@dso-toolkit/core 65.0.0 → 65.0.2

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 (122) hide show
  1. package/dist/cjs/dso-advanced-select.cjs.entry.js +1 -1
  2. package/dist/cjs/dso-alert_6.cjs.entry.js +3 -3
  3. package/dist/cjs/dso-alert_6.cjs.entry.js.map +1 -1
  4. package/dist/cjs/dso-autosuggest.cjs.entry.js +1 -1
  5. package/dist/cjs/dso-header.cjs.entry.js +1 -1
  6. package/dist/cjs/dso-helpcenter-panel.cjs.entry.js +2 -2
  7. package/dist/cjs/dso-helpcenter-panel.cjs.entry.js.map +1 -1
  8. package/dist/cjs/dso-label_2.cjs.entry.js +1 -1
  9. package/dist/cjs/dso-legend-item.cjs.entry.js +1 -1
  10. package/dist/cjs/dso-legend-item.cjs.entry.js.map +1 -1
  11. package/dist/cjs/dso-list-button.cjs.entry.js +2 -2
  12. package/dist/cjs/dso-list-button.cjs.entry.js.map +1 -1
  13. package/dist/cjs/dso-map-controls.cjs.entry.js +1 -1
  14. package/dist/cjs/dso-map-controls.cjs.entry.js.map +1 -1
  15. package/dist/cjs/dso-scrollable.cjs.entry.js +1 -1
  16. package/dist/cjs/dso-tab.cjs.entry.js +1 -1
  17. package/dist/cjs/dso-tab.cjs.entry.js.map +1 -1
  18. package/dist/cjs/dso-viewer-grid.cjs.entry.js +2 -2
  19. package/dist/cjs/dso-viewer-grid.cjs.entry.js.map +1 -1
  20. package/dist/cjs/{focus-trap.esm-6cff35a7.js → focus-trap.esm-dd03396f.js} +43 -48
  21. package/dist/cjs/focus-trap.esm-dd03396f.js.map +1 -0
  22. package/dist/cjs/{index-10c6b031.js → index-7244933f.js} +7 -3
  23. package/dist/cjs/index-7244933f.js.map +1 -0
  24. package/dist/collection/components/helpcenter-panel/helpcenter-panel.css +20 -16
  25. package/dist/collection/components/image-overlay/image-overlay.css +19 -15
  26. package/dist/collection/components/legend-item/legend-item.css +4 -2
  27. package/dist/collection/components/list-button/list-button.css +3 -1
  28. package/dist/collection/components/map-controls/map-controls.css +34 -35
  29. package/dist/collection/components/tabs/components/tab.css +2 -0
  30. package/dist/collection/components/viewer-grid/viewer-grid.css +17 -15
  31. package/dist/components/dso-helpcenter-panel.js +1 -1
  32. package/dist/components/dso-helpcenter-panel.js.map +1 -1
  33. package/dist/components/dso-legend-item.js +1 -1
  34. package/dist/components/dso-legend-item.js.map +1 -1
  35. package/dist/components/dso-list-button.js +1 -1
  36. package/dist/components/dso-list-button.js.map +1 -1
  37. package/dist/components/dso-map-controls.js +1 -1
  38. package/dist/components/dso-map-controls.js.map +1 -1
  39. package/dist/components/dso-tab.js +1 -1
  40. package/dist/components/dso-tab.js.map +1 -1
  41. package/dist/components/dso-viewer-grid.js +1 -1
  42. package/dist/components/dso-viewer-grid.js.map +1 -1
  43. package/dist/components/focus-trap.esm.js +42 -47
  44. package/dist/components/focus-trap.esm.js.map +1 -1
  45. package/dist/components/image-overlay.js +1 -1
  46. package/dist/components/image-overlay.js.map +1 -1
  47. package/dist/components/index2.js +6 -2
  48. package/dist/components/index2.js.map +1 -1
  49. package/dist/components/table.js.map +1 -1
  50. package/dist/dso-toolkit/dso-toolkit.esm.js +1 -1
  51. package/dist/dso-toolkit/{p-f1b0fe14.entry.js → p-1f8b5c49.entry.js} +2 -2
  52. package/dist/dso-toolkit/p-2a83ec2c.entry.js +2 -0
  53. package/dist/dso-toolkit/p-2a83ec2c.entry.js.map +1 -0
  54. package/dist/dso-toolkit/p-2ab51dba.entry.js +2 -0
  55. package/dist/dso-toolkit/p-2ab51dba.entry.js.map +1 -0
  56. package/dist/dso-toolkit/p-2f9c5d0e.entry.js +2 -0
  57. package/dist/dso-toolkit/p-2f9c5d0e.entry.js.map +1 -0
  58. package/dist/dso-toolkit/{p-eb79a374.entry.js → p-331f52b3.entry.js} +2 -2
  59. package/dist/dso-toolkit/p-391deb2a.entry.js +2 -0
  60. package/dist/dso-toolkit/{p-66689c5c.entry.js.map → p-391deb2a.entry.js.map} +1 -1
  61. package/dist/dso-toolkit/p-4948f5e5.entry.js +2 -0
  62. package/dist/dso-toolkit/p-4948f5e5.entry.js.map +1 -0
  63. package/dist/dso-toolkit/p-4d1af9b6.entry.js +2 -0
  64. package/dist/dso-toolkit/p-4d1af9b6.entry.js.map +1 -0
  65. package/dist/dso-toolkit/p-709ff0a5.js +2 -0
  66. package/dist/dso-toolkit/p-709ff0a5.js.map +1 -0
  67. package/dist/dso-toolkit/{p-5180315a.entry.js → p-85d58afe.entry.js} +2 -2
  68. package/dist/dso-toolkit/{p-470c6242.entry.js → p-8d57cfcf.entry.js} +2 -2
  69. package/dist/dso-toolkit/{p-d42db4af.entry.js → p-c0460667.entry.js} +2 -2
  70. package/dist/dso-toolkit/p-ea804e9e.entry.js +2 -0
  71. package/dist/dso-toolkit/{p-7d7630d0.entry.js.map → p-ea804e9e.entry.js.map} +1 -1
  72. package/dist/dso-toolkit/p-f0538f4a.js +6 -0
  73. package/dist/dso-toolkit/p-f0538f4a.js.map +1 -0
  74. package/dist/esm/dso-advanced-select.entry.js +1 -1
  75. package/dist/esm/dso-alert_6.entry.js +3 -3
  76. package/dist/esm/dso-alert_6.entry.js.map +1 -1
  77. package/dist/esm/dso-autosuggest.entry.js +1 -1
  78. package/dist/esm/dso-header.entry.js +1 -1
  79. package/dist/esm/dso-helpcenter-panel.entry.js +2 -2
  80. package/dist/esm/dso-helpcenter-panel.entry.js.map +1 -1
  81. package/dist/esm/dso-label_2.entry.js +1 -1
  82. package/dist/esm/dso-legend-item.entry.js +1 -1
  83. package/dist/esm/dso-legend-item.entry.js.map +1 -1
  84. package/dist/esm/dso-list-button.entry.js +2 -2
  85. package/dist/esm/dso-list-button.entry.js.map +1 -1
  86. package/dist/esm/dso-map-controls.entry.js +1 -1
  87. package/dist/esm/dso-map-controls.entry.js.map +1 -1
  88. package/dist/esm/dso-scrollable.entry.js +1 -1
  89. package/dist/esm/dso-tab.entry.js +1 -1
  90. package/dist/esm/dso-tab.entry.js.map +1 -1
  91. package/dist/esm/dso-viewer-grid.entry.js +2 -2
  92. package/dist/esm/dso-viewer-grid.entry.js.map +1 -1
  93. package/dist/esm/{focus-trap.esm-f16e876b.js → focus-trap.esm-24223ea1.js} +43 -48
  94. package/dist/esm/focus-trap.esm-24223ea1.js.map +1 -0
  95. package/dist/esm/{index-bbc2933c.js → index-f62149d1.js} +7 -3
  96. package/dist/esm/index-f62149d1.js.map +1 -0
  97. package/package.json +6 -6
  98. package/dist/cjs/focus-trap.esm-6cff35a7.js.map +0 -1
  99. package/dist/cjs/index-10c6b031.js.map +0 -1
  100. package/dist/dso-toolkit/p-1a824699.entry.js +0 -2
  101. package/dist/dso-toolkit/p-1a824699.entry.js.map +0 -1
  102. package/dist/dso-toolkit/p-3735286c.entry.js +0 -2
  103. package/dist/dso-toolkit/p-3735286c.entry.js.map +0 -1
  104. package/dist/dso-toolkit/p-5f2d8a1f.entry.js +0 -2
  105. package/dist/dso-toolkit/p-5f2d8a1f.entry.js.map +0 -1
  106. package/dist/dso-toolkit/p-66689c5c.entry.js +0 -2
  107. package/dist/dso-toolkit/p-7d7630d0.entry.js +0 -2
  108. package/dist/dso-toolkit/p-808a98bc.js +0 -6
  109. package/dist/dso-toolkit/p-808a98bc.js.map +0 -1
  110. package/dist/dso-toolkit/p-892b8003.entry.js +0 -2
  111. package/dist/dso-toolkit/p-892b8003.entry.js.map +0 -1
  112. package/dist/dso-toolkit/p-9438a55c.js +0 -2
  113. package/dist/dso-toolkit/p-9438a55c.js.map +0 -1
  114. package/dist/dso-toolkit/p-b7ca8de2.entry.js +0 -2
  115. package/dist/dso-toolkit/p-b7ca8de2.entry.js.map +0 -1
  116. package/dist/esm/focus-trap.esm-f16e876b.js.map +0 -1
  117. package/dist/esm/index-bbc2933c.js.map +0 -1
  118. /package/dist/dso-toolkit/{p-f1b0fe14.entry.js.map → p-1f8b5c49.entry.js.map} +0 -0
  119. /package/dist/dso-toolkit/{p-eb79a374.entry.js.map → p-331f52b3.entry.js.map} +0 -0
  120. /package/dist/dso-toolkit/{p-5180315a.entry.js.map → p-85d58afe.entry.js.map} +0 -0
  121. /package/dist/dso-toolkit/{p-470c6242.entry.js.map → p-8d57cfcf.entry.js.map} +0 -0
  122. /package/dist/dso-toolkit/{p-d42db4af.entry.js.map → p-c0460667.entry.js.map} +0 -0
package/dist/components/dso-map-controls.js CHANGED
@@ -2,7 +2,7 @@ import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/
2
2
  import { d as defineCustomElement$3 } from './icon.js';
3
3
  import { d as defineCustomElement$2 } from './scrollable.js';
4
4
 
5
- const mapControlsCss = ":host {\n background-color: #fff;\n border: 1px solid #ccc;\n inset-block-end: 0;\n display: block;\n font-family: Asap, sans-serif;\n position: absolute;\n inset-block-start: 0;\n inset-inline-start: 100%;\n transition: transform 300ms ease;\n inline-size: 300px;\n}\n\n*,\n*::after,\n*::before {\n box-sizing: border-box;\n}\n\n:host([open]) {\n box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.3);\n transform: translateX(-100%);\n}\n:host([open]) .toggle-visibility-button {\n display: none;\n}\n:host([open]) .zoom-buttons {\n inset-block-start: 16px;\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.toggle-visibility-button {\n display: inline-block;\n font-size: 1em;\n font-weight: 500;\n margin-block-end: 0;\n text-decoration: none;\n touch-action: manipulation;\n text-align: start;\n user-select: none;\n vertical-align: middle;\n border: 0;\n box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.5);\n font-weight: 600;\n margin-inline-end: 16px;\n padding-block: 8px;\n padding-inline: 16px;\n white-space: nowrap;\n position: absolute;\n inset-inline-end: calc(\n 100% + 56px\n );\n inset-block-start: 16px;\n}\n.toggle-visibility-button:focus, .toggle-visibility-button:focus-visible {\n outline-offset: 2px;\n}\n.toggle-visibility-button:active {\n outline: 0;\n}\n.toggle-visibility-button {\n background-color: #fff;\n border-color: #39870c;\n color: #39870c;\n}\n.toggle-visibility-button {\n border-width: 1px;\n border-style: solid;\n border-radius: 4px;\n line-height: 1.5;\n min-inline-size: 56px;\n padding-block: 11px;\n padding-inline: 15px;\n}\n.toggle-visibility-button:hover {\n background-color: #d7e7ce;\n border-color: #39870c;\n color: #39870c;\n}\n.toggle-visibility-button:active {\n background-color: #39870c;\n border-color: #39870c;\n color: #fff;\n}\n.toggle-visibility-button[disabled], .toggle-visibility-button[disabled]:hover {\n background-color: #fff;\n border-color: #afcf9d;\n color: #afcf9d;\n}\n.toggle-visibility-button.dso-small {\n line-height: 1rem;\n}\n.toggle-visibility-button.dso-small dso-icon,\n.toggle-visibility-button.dso-small svg.di, .toggle-visibility-button.dso-small.extern::after, .toggle-visibility-button.dso-small.download::after, .toggle-visibility-button.dso-small.dso-spinner::before {\n margin-block-end: -4px;\n margin-block-start: -4px;\n}\n.toggle-visibility-button.dso-small.dso-spinner-left::before {\n block-size: 16px;\n inline-size: 16px;\n}\n.toggle-visibility-button.dso-small.dso-spinner-right::after {\n block-size: 16px;\n inline-size: 16px;\n}\n.toggle-visibility-button dso-icon,\n.toggle-visibility-button svg.di {\n margin-inline-start: -8px;\n margin-inline-end: 8px;\n}\n.toggle-visibility-button span + dso-icon,\n.toggle-visibility-button span + svg.di {\n margin-inline-start: 8px;\n margin-inline-end: -8px;\n}\n.toggle-visibility-button.dso-spinner-left[disabled], .toggle-visibility-button.dso-spinner-right[disabled] {\n background-color: #fff;\n border-color: #39870c;\n color: #39870c;\n}\n.toggle-visibility-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 block-size: 24px;\n vertical-align: top;\n inline-size: 24px;\n margin-inline-end: 8px;\n}\n.toggle-visibility-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 block-size: 24px;\n vertical-align: top;\n inline-size: 24px;\n margin-inline-end: 8px;\n}\n.toggle-visibility-button.dso-spinner-left:not([disabled]).dso-small:hover::before {\n block-size: 16px;\n inline-size: 16px;\n}\n.toggle-visibility-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 block-size: 24px;\n vertical-align: top;\n inline-size: 24px;\n margin-inline-start: 8px;\n}\n.toggle-visibility-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 block-size: 24px;\n vertical-align: top;\n inline-size: 24px;\n margin-inline-start: 8px;\n}\n.toggle-visibility-button.dso-spinner-right:not([disabled]).dso-small:hover::after {\n block-size: 16px;\n inline-size: 16px;\n}\n.toggle-visibility-button:focus-visible {\n background-color: #d7e7ce;\n border-color: #d7e7ce;\n color: #fff;\n outline: none;\n}\n\n.zoom-buttons {\n border-radius: 4px;\n box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.5);\n display: flex;\n flex-wrap: wrap;\n flex: 0 0;\n position: absolute;\n inset-inline-end: calc(100% + 16px);\n inset-block-start: 16px;\n}\n.zoom-buttons button {\n display: inline-block;\n font-size: 1em;\n font-weight: 500;\n margin-block-end: 0;\n text-decoration: none;\n touch-action: manipulation;\n text-align: start;\n user-select: none;\n vertical-align: middle;\n border: 0;\n padding: 8px;\n border-radius: 0;\n border-start-start-radius: 4px;\n border-start-end-radius: 4px;\n flex: 0 0 100%;\n block-size: 40px;\n min-inline-size: auto;\n inline-size: 40px;\n}\n.zoom-buttons button:focus, .zoom-buttons button:focus-visible {\n outline-offset: 2px;\n}\n.zoom-buttons button:active {\n outline: 0;\n}\n.zoom-buttons button {\n background-color: #fff;\n border-color: #39870c;\n color: #39870c;\n}\n.zoom-buttons button {\n border-width: 1px;\n border-style: solid;\n border-radius: 4px;\n line-height: 1.5;\n min-inline-size: 56px;\n padding-block: 11px;\n padding-inline: 15px;\n}\n.zoom-buttons button:hover {\n background-color: #d7e7ce;\n border-color: #39870c;\n color: #39870c;\n}\n.zoom-buttons button:active {\n background-color: #39870c;\n border-color: #39870c;\n color: #fff;\n}\n.zoom-buttons button[disabled], .zoom-buttons button[disabled]:hover {\n background-color: #fff;\n border-color: #afcf9d;\n color: #afcf9d;\n}\n.zoom-buttons button.dso-small {\n line-height: 1rem;\n}\n.zoom-buttons button.dso-small dso-icon,\n.zoom-buttons button.dso-small svg.di, .zoom-buttons button.dso-small.extern::after, .zoom-buttons button.dso-small.download::after, .zoom-buttons button.dso-small.dso-spinner::before {\n margin-block-end: -4px;\n margin-block-start: -4px;\n}\n.zoom-buttons button.dso-small.dso-spinner-left::before {\n block-size: 16px;\n inline-size: 16px;\n}\n.zoom-buttons button.dso-small.dso-spinner-right::after {\n block-size: 16px;\n inline-size: 16px;\n}\n.zoom-buttons button > span {\n position: absolute;\n inline-size: 1px;\n block-size: 1px;\n padding: 0;\n margin: -1px;\n overflow: hidden;\n clip: rect(0, 0, 0, 0);\n border: 0;\n}\n.zoom-buttons button.dso-spinner-left[disabled], .zoom-buttons button.dso-spinner-right[disabled] {\n background-color: #fff;\n border-color: #39870c;\n color: #39870c;\n}\n.zoom-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 block-size: 24px;\n vertical-align: top;\n inline-size: 24px;\n margin-inline-end: 8px;\n}\n.zoom-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 block-size: 24px;\n vertical-align: top;\n inline-size: 24px;\n margin-inline-end: 8px;\n}\n.zoom-buttons button.dso-spinner-left:not([disabled]).dso-small:hover::before {\n block-size: 16px;\n inline-size: 16px;\n}\n.zoom-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 block-size: 24px;\n vertical-align: top;\n inline-size: 24px;\n margin-inline-start: 8px;\n}\n.zoom-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 block-size: 24px;\n vertical-align: top;\n inline-size: 24px;\n margin-inline-start: 8px;\n}\n.zoom-buttons button.dso-spinner-right:not([disabled]).dso-small:hover::after {\n block-size: 16px;\n inline-size: 16px;\n}\n.zoom-buttons button:focus-visible {\n background-color: #d7e7ce;\n border-color: #d7e7ce;\n color: #fff;\n outline: none;\n}\n.zoom-buttons button + button {\n border-radius: 0;\n border-end-start-radius: 4px;\n border-end-end-radius: 4px;\n border-block-start: 1px solid #ccc;\n}\n\n.close-button {\n display: inline-block;\n font-size: 1em;\n font-weight: 500;\n margin-block-end: 0;\n text-decoration: none;\n touch-action: manipulation;\n text-align: start;\n user-select: none;\n vertical-align: middle;\n padding: 0;\n position: absolute;\n inset-inline-end: 16px;\n inset-block-start: 16px;\n}\n.close-button:focus, .close-button:focus-visible {\n outline-offset: 2px;\n}\n.close-button:active {\n outline: 0;\n}\n.close-button {\n border: 0;\n color: #39870c;\n line-height: 1;\n padding: 0;\n background-color: transparent;\n}\n.close-button[disabled] {\n color: #afcf9d;\n}\n.close-button[disabled].dso-spinner-left, .close-button[disabled].dso-spinner-right {\n color: #39870c;\n}\n.close-button:not([disabled]):hover {\n color: #275937;\n text-decoration: underline;\n text-underline-position: under;\n}\n.close-button:not([disabled]):active {\n color: #173521;\n}\n.close-button.dso-align {\n line-height: calc(1.5em - 1px);\n padding-block: 11px;\n padding-inline: 0;\n position: relative;\n}\n.close-button.dso-truncate {\n max-inline-size: 100%;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n.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 block-size: 24px;\n vertical-align: middle;\n inline-size: 24px;\n margin-inline-end: 8px;\n}\n.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 block-size: 24px;\n vertical-align: middle;\n inline-size: 24px;\n margin-inline-start: 8px;\n}\n.close-button > span {\n position: absolute;\n inline-size: 1px;\n block-size: 1px;\n padding: 0;\n margin: -1px;\n overflow: hidden;\n clip: rect(0, 0, 0, 0);\n border: 0;\n}\n\nsection:not([hidden]) {\n display: flex;\n flex-direction: column;\n block-size: 100%;\n}\n\nheader,\n.content {\n padding: 16px;\n}\n\nheader {\n border-block-end: 1px solid #ccc;\n flex-grow: 0;\n position: relative;\n}\nheader h2 {\n color: #275937;\n font-family: \"Asap\", sans-serif;\n line-height: 1;\n margin: 0;\n}\n\n@media screen and (max-width: 767px) {\n .toggle-visibility-button {\n block-size: 40px;\n margin-inline-end: 0;\n min-inline-size: auto;\n inset-inline-end: calc(100% + 16px);\n inline-size: 40px;\n }\n .toggle-visibility-button dso-icon {\n margin-inline-end: 0;\n }\n .toggle-visibility-button span {\n visibility: hidden;\n }\n .zoom-buttons {\n inset-block-start: 72px;\n }\n}";
5
+ const mapControlsCss = ":host {\n background-color: #fff;\n border: 1px solid #ccc;\n inset-block-end: 0;\n display: block;\n font-family: Asap, sans-serif;\n position: absolute;\n inset-block-start: 0;\n inset-inline-start: 100%;\n transition: transform 300ms ease;\n inline-size: 300px;\n}\n\n*,\n*::after,\n*::before {\n box-sizing: border-box;\n}\n\n:host([open]) {\n box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.3);\n transform: translateX(-100%);\n}\n:host([open]) .toggle-visibility-button {\n display: none;\n}\n:host([open]) .zoom-buttons {\n inset-block-start: 16px;\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.toggle-visibility-button {\n display: inline-block;\n font-size: 1em;\n font-weight: 500;\n margin-block-end: 0;\n text-decoration: none;\n touch-action: manipulation;\n text-align: start;\n user-select: none;\n vertical-align: middle;\n}\n.toggle-visibility-button:focus, .toggle-visibility-button:focus-visible {\n outline-offset: 2px;\n}\n.toggle-visibility-button:active {\n outline: 0;\n}\n.toggle-visibility-button {\n background-color: #fff;\n border-color: #39870c;\n color: #39870c;\n}\n.toggle-visibility-button {\n border-width: 1px;\n border-style: solid;\n border-radius: 4px;\n line-height: 1.5;\n min-inline-size: 56px;\n padding-block: 11px;\n padding-inline: 15px;\n}\n.toggle-visibility-button:hover {\n background-color: #d7e7ce;\n border-color: #39870c;\n color: #39870c;\n}\n.toggle-visibility-button:active {\n background-color: #39870c;\n border-color: #39870c;\n color: #fff;\n}\n.toggle-visibility-button[disabled], .toggle-visibility-button[disabled]:hover {\n background-color: #fff;\n border-color: #afcf9d;\n color: #afcf9d;\n}\n.toggle-visibility-button.dso-small {\n line-height: 1rem;\n}\n.toggle-visibility-button.dso-small dso-icon,\n.toggle-visibility-button.dso-small svg.di, .toggle-visibility-button.dso-small.extern::after, .toggle-visibility-button.dso-small.download::after, .toggle-visibility-button.dso-small.dso-spinner::before {\n margin-block-end: -4px;\n margin-block-start: -4px;\n}\n.toggle-visibility-button.dso-small.dso-spinner-left::before {\n block-size: 16px;\n inline-size: 16px;\n}\n.toggle-visibility-button.dso-small.dso-spinner-right::after {\n block-size: 16px;\n inline-size: 16px;\n}\n.toggle-visibility-button dso-icon,\n.toggle-visibility-button svg.di {\n margin-inline-start: -8px;\n margin-inline-end: 8px;\n}\n.toggle-visibility-button span + dso-icon,\n.toggle-visibility-button span + svg.di {\n margin-inline-start: 8px;\n margin-inline-end: -8px;\n}\n.toggle-visibility-button.dso-spinner-left[disabled], .toggle-visibility-button.dso-spinner-right[disabled] {\n background-color: #fff;\n border-color: #39870c;\n color: #39870c;\n}\n.toggle-visibility-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 block-size: 24px;\n vertical-align: top;\n inline-size: 24px;\n margin-inline-end: 8px;\n}\n.toggle-visibility-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 block-size: 24px;\n vertical-align: top;\n inline-size: 24px;\n margin-inline-end: 8px;\n}\n.toggle-visibility-button.dso-spinner-left:not([disabled]).dso-small:hover::before {\n block-size: 16px;\n inline-size: 16px;\n}\n.toggle-visibility-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 block-size: 24px;\n vertical-align: top;\n inline-size: 24px;\n margin-inline-start: 8px;\n}\n.toggle-visibility-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 block-size: 24px;\n vertical-align: top;\n inline-size: 24px;\n margin-inline-start: 8px;\n}\n.toggle-visibility-button.dso-spinner-right:not([disabled]).dso-small:hover::after {\n block-size: 16px;\n inline-size: 16px;\n}\n.toggle-visibility-button {\n border: 0;\n box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.5);\n font-weight: 600;\n margin-inline-end: 16px;\n padding-block: 8px;\n padding-inline: 16px;\n white-space: nowrap;\n}\n.toggle-visibility-button {\n position: absolute;\n inset-inline-end: calc(\n 100% + 56px\n );\n inset-block-start: 16px;\n}\n\n.zoom-buttons {\n border-radius: 4px;\n box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.5);\n display: flex;\n flex-wrap: wrap;\n flex: 0 0;\n position: absolute;\n inset-inline-end: calc(100% + 16px);\n inset-block-start: 16px;\n}\n.zoom-buttons button {\n display: inline-block;\n font-size: 1em;\n font-weight: 500;\n margin-block-end: 0;\n text-decoration: none;\n touch-action: manipulation;\n text-align: start;\n user-select: none;\n vertical-align: middle;\n}\n.zoom-buttons button:focus, .zoom-buttons button:focus-visible {\n outline-offset: 2px;\n}\n.zoom-buttons button:active {\n outline: 0;\n}\n.zoom-buttons button {\n background-color: #fff;\n border-color: #39870c;\n color: #39870c;\n}\n.zoom-buttons button {\n border-width: 1px;\n border-style: solid;\n border-radius: 4px;\n line-height: 1.5;\n min-inline-size: 56px;\n padding-block: 11px;\n padding-inline: 15px;\n}\n.zoom-buttons button:hover {\n background-color: #d7e7ce;\n border-color: #39870c;\n color: #39870c;\n}\n.zoom-buttons button:active {\n background-color: #39870c;\n border-color: #39870c;\n color: #fff;\n}\n.zoom-buttons button[disabled], .zoom-buttons button[disabled]:hover {\n background-color: #fff;\n border-color: #afcf9d;\n color: #afcf9d;\n}\n.zoom-buttons button.dso-small {\n line-height: 1rem;\n}\n.zoom-buttons button.dso-small dso-icon,\n.zoom-buttons button.dso-small svg.di, .zoom-buttons button.dso-small.extern::after, .zoom-buttons button.dso-small.download::after, .zoom-buttons button.dso-small.dso-spinner::before {\n margin-block-end: -4px;\n margin-block-start: -4px;\n}\n.zoom-buttons button.dso-small.dso-spinner-left::before {\n block-size: 16px;\n inline-size: 16px;\n}\n.zoom-buttons button.dso-small.dso-spinner-right::after {\n block-size: 16px;\n inline-size: 16px;\n}\n.zoom-buttons button > span {\n position: absolute;\n inline-size: 1px;\n block-size: 1px;\n padding: 0;\n margin: -1px;\n overflow: hidden;\n clip: rect(0, 0, 0, 0);\n border: 0;\n}\n.zoom-buttons button.dso-spinner-left[disabled], .zoom-buttons button.dso-spinner-right[disabled] {\n background-color: #fff;\n border-color: #39870c;\n color: #39870c;\n}\n.zoom-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 block-size: 24px;\n vertical-align: top;\n inline-size: 24px;\n margin-inline-end: 8px;\n}\n.zoom-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 block-size: 24px;\n vertical-align: top;\n inline-size: 24px;\n margin-inline-end: 8px;\n}\n.zoom-buttons button.dso-spinner-left:not([disabled]).dso-small:hover::before {\n block-size: 16px;\n inline-size: 16px;\n}\n.zoom-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 block-size: 24px;\n vertical-align: top;\n inline-size: 24px;\n margin-inline-start: 8px;\n}\n.zoom-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 block-size: 24px;\n vertical-align: top;\n inline-size: 24px;\n margin-inline-start: 8px;\n}\n.zoom-buttons button.dso-spinner-right:not([disabled]).dso-small:hover::after {\n block-size: 16px;\n inline-size: 16px;\n}\n.zoom-buttons button {\n border: 0;\n padding: 8px;\n border-radius: 0;\n border-start-start-radius: 4px;\n border-start-end-radius: 4px;\n flex: 0 0 100%;\n block-size: 40px;\n min-inline-size: auto;\n inline-size: 40px;\n}\n.zoom-buttons button + button {\n border-radius: 0;\n border-end-start-radius: 4px;\n border-end-end-radius: 4px;\n border-block-start: 1px solid #ccc;\n}\n.zoom-buttons button:focus-visible {\n outline-offset: -1px;\n}\n\n.close-button {\n display: inline-block;\n font-size: 1em;\n font-weight: 500;\n margin-block-end: 0;\n text-decoration: none;\n touch-action: manipulation;\n text-align: start;\n user-select: none;\n vertical-align: middle;\n}\n.close-button:focus, .close-button:focus-visible {\n outline-offset: 2px;\n}\n.close-button:active {\n outline: 0;\n}\n.close-button {\n border: 0;\n color: #39870c;\n line-height: 1;\n padding: 0;\n background-color: transparent;\n}\n.close-button[disabled] {\n color: #afcf9d;\n}\n.close-button[disabled].dso-spinner-left, .close-button[disabled].dso-spinner-right {\n color: #39870c;\n}\n.close-button:not([disabled]):hover {\n color: #275937;\n text-decoration: underline;\n text-underline-position: under;\n}\n.close-button:not([disabled]):active {\n color: #173521;\n}\n.close-button.dso-align {\n line-height: calc(1.5em - 1px);\n padding-block: 11px;\n padding-inline: 0;\n position: relative;\n}\n.close-button.dso-truncate {\n max-inline-size: 100%;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n.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 block-size: 24px;\n vertical-align: middle;\n inline-size: 24px;\n margin-inline-end: 8px;\n}\n.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 block-size: 24px;\n vertical-align: middle;\n inline-size: 24px;\n margin-inline-start: 8px;\n}\n.close-button > span {\n position: absolute;\n inline-size: 1px;\n block-size: 1px;\n padding: 0;\n margin: -1px;\n overflow: hidden;\n clip: rect(0, 0, 0, 0);\n border: 0;\n}\n.close-button {\n padding: 0;\n position: absolute;\n inset-inline-end: 16px;\n inset-block-start: 16px;\n}\n\nsection:not([hidden]) {\n display: flex;\n flex-direction: column;\n block-size: 100%;\n}\n\nheader,\n.content {\n padding: 16px;\n}\n\nheader {\n border-block-end: 1px solid #ccc;\n flex-grow: 0;\n position: relative;\n}\nheader h2 {\n color: #275937;\n font-family: \"Asap\", sans-serif;\n line-height: 1;\n margin: 0;\n}\n\n@media screen and (max-width: 767px) {\n .toggle-visibility-button {\n block-size: 40px;\n margin-inline-end: 0;\n min-inline-size: auto;\n inset-inline-end: calc(100% + 16px);\n inline-size: 40px;\n }\n .toggle-visibility-button dso-icon {\n margin-inline-end: 0;\n }\n .toggle-visibility-button span {\n visibility: hidden;\n }\n .zoom-buttons {\n inset-block-start: 72px;\n }\n}";
6
6
  const DsoMapControlsStyle0 = mapControlsCss;
7
7
 
8
8
  var __classPrivateFieldGet = (undefined && undefined.__classPrivateFieldGet) || function (receiver, state, kind, f) {
package/dist/components/dso-map-controls.js.map CHANGED
@@ -1 +1 @@
1
- {"file":"dso-map-controls.js","mappings":";;;;AAAA,MAAM,cAAc,GAAG,sslBAAsslB,CAAC;AAC9tlB,6BAAe,cAAc;;;;;;;;;;;;;;;;;;;ACE7B;AACA,MAAM,kBAAkB,GAAG,GAAG,CAAC;MAOlB,WAAW;;;;;;;;QACd,eAAU,GAAG,YAAY,CAAC;QAyElC,kDAAmD;QACnD,mDAAoD;oBApE7C,KAAK;;2BAkCE,CAAC,IAAI,CAAC,IAAI;;IAGxB,SAAS,CAAC,IAAa;QACrB,IAAI,IAAI,EAAE;YACR,IAAI,CAAC,WAAW,GAAG,KAAK,CAAC;YAEzB,UAAU,CAAC,gBAAM,OAAA,MAAA,uBAAA,IAAI,uCAAoB,0CAAE,KAAK,EAAE,CAAA,EAAA,EAAE,kBAAkB,CAAC,CAAC;SACzE;aAAM;YACL,UAAU,CAAC;;gBACT,IAAI,CAAC,WAAW,GAAG,IAAI,CAAC;gBAExB,MAAA,uBAAA,IAAI,wCAAqB,0CAAE,KAAK,EAAE,CAAC;aACpC,EAAE,kBAAkB,CAAC,CAAC;SACxB;KACF;;;;;;;IASD,MAAM,gBAAgB,CAAC,CAA6B;QAClD,IAAI,CAAC,IAAI,GAAG,CAAC,IAAI,CAAC,IAAI,CAAC;QAEvB,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC;YAClB,aAAa,EAAE,CAAC;YAChB,IAAI,EAAE,IAAI,CAAC,IAAI;SAChB,CAAC,CAAC;KACJ;IAKD,MAAM;QACJ,QACE,EAAC,IAAI,uDACH,+DACE,IAAI,EAAC,QAAQ,EACb,EAAE,EAAC,0BAA0B,EAC7B,KAAK,EAAC,0BAA0B,EAChC,OAAO,EAAE,CAAC,CAAC,KAAK,IAAI,CAAC,gBAAgB,CAAC,CAAC,CAAC,EACxC,GAAG,EAAE,CAAC,OAAO,MAAM,uBAAA,IAAI,oCAAwB,OAAO,MAAA,CAAC,IAEvD,iEAAU,IAAI,EAAC,QAAQ,GAAY,EACnC,4EAAuB,CAChB,EACT,4DAAK,KAAK,EAAC,cAAc,IACvB,+DACE,IAAI,EAAC,QAAQ,EACb,OAAO,EAAE,CAAC,CAAC,KAAK,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,CAAC,CAAC,EACtC,QAAQ,EAAE,IAAI,CAAC,WAAW,KAAK,IAAI,IAAI,IAAI,CAAC,WAAW,KAAK,MAAM,IAElE,yEAAoB,EACpB,iEAAU,IAAI,EAAC,MAAM,GAAY,CAC1B,EACT,+DACE,IAAI,EAAC,QAAQ,EACb,OAAO,EAAE,CAAC,CAAC,KAAK,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,CAAC,CAAC,EACvC,QAAQ,EAAE,IAAI,CAAC,WAAW,KAAK,KAAK,IAAI,IAAI,CAAC,WAAW,KAAK,MAAM,IAEnE,0EAAqB,EACrB,iEAAU,IAAI,EAAC,OAAO,GAAY,CAC3B,CACL,EACN,gEAAS,MAAM,EAAE,IAAI,CAAC,WAAW,IAC/B,iEACE,6DAAK,IAAI,CAAC,UAAU,CAAM,EAC1B,+DACE,IAAI,EAAC,QAAQ,EACb,KAAK,EAAC,cAAc,EACpB,OAAO,EAAE,CAAC,CAAC,KAAK,IAAI,CAAC,gBAAgB,CAAC,CAAC,CAAC,EACxC,GAAG,EAAE,CAAC,OAAO,MAAM,uBAAA,IAAI,mCAAuB,OAAO,MAAA,CAAC,IAEtD,kFAAsB,IAAI,CAAC,UAAU,CAAQ,EAC7C,iEAAU,IAAI,EAAC,OAAO,GAAY,CAC3B,CACF,EACT,yEACE,4DAAK,KAAK,EAAC,SAAS,IAClB,8DAAa,CACT,CACS,CACT,CACL,EACP;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/map-controls/map-controls.scss?tag=dso-map-controls&encapsulation=shadow","src/components/map-controls/map-controls.tsx"],"sourcesContent":["@use \"~dso-toolkit/src/utilities\";\r\n@use \"~dso-toolkit/src/variables/colors\";\r\n@use \"~dso-toolkit/src/variables/media-query-breakpoints\";\r\n@use \"~dso-toolkit/src/variables/typography\";\r\n@use \"~dso-toolkit/src/variables/units\";\r\n@use \"~dso-toolkit/src/components/button\";\r\n\r\n@use \"map-controls.variables\" as core-map-controls-variables;\r\n\r\n:host {\r\n background-color: colors.$wit;\r\n border: 1px solid colors.$grijs-20;\r\n inset-block-end: 0;\r\n display: block;\r\n font-family: typography.$font-family-base;\r\n position: absolute;\r\n inset-block-start: 0;\r\n inset-inline-start: 100%;\r\n transition: transform core-map-controls-variables.$transition-duration ease;\r\n inline-size: 300px;\r\n}\r\n\r\n@include utilities.box-sizing();\r\n\r\n:host([open]) {\r\n box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.3);\r\n transform: translateX(-100%);\r\n\r\n .toggle-visibility-button {\r\n display: none;\r\n }\r\n\r\n .zoom-buttons {\r\n inset-block-start: units.$u2;\r\n }\r\n}\r\n\r\nbutton {\r\n @include button.element();\r\n}\r\n\r\n.toggle-visibility-button {\r\n @include button.map();\r\n\r\n position: absolute;\r\n inset-inline-end: calc(\r\n 100% + #{core-map-controls-variables.$controls-margin + core-map-controls-variables.$zoom-button-size}\r\n );\r\n inset-block-start: core-map-controls-variables.$controls-margin;\r\n}\r\n\r\n.zoom-buttons {\r\n border-radius: 4px;\r\n box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.5);\r\n display: flex;\r\n flex-wrap: wrap;\r\n flex: 0 0;\r\n position: absolute;\r\n inset-inline-end: calc(100% + core-map-controls-variables.$controls-margin);\r\n inset-block-start: core-map-controls-variables.$controls-margin;\r\n\r\n button {\r\n @include button.secondary($modifiers: false, $icon-only: true);\r\n @include button.map-focus();\r\n\r\n border: 0;\r\n padding: 8px;\r\n border-radius: 0;\r\n border-start-start-radius: 4px;\r\n border-start-end-radius: 4px;\r\n flex: 0 0 100%;\r\n block-size: core-map-controls-variables.$zoom-button-size;\r\n min-inline-size: auto;\r\n inline-size: core-map-controls-variables.$zoom-button-size;\r\n\r\n + button {\r\n border-radius: 0;\r\n border-end-start-radius: 4px;\r\n border-end-end-radius: 4px;\r\n border-block-start: 1px solid colors.$grijs-20;\r\n }\r\n }\r\n}\r\n\r\n.close-button {\r\n @include button.tertiary($modifiers: false, $icon-only: true);\r\n\r\n padding: 0;\r\n position: absolute;\r\n inset-inline-end: core-map-controls-variables.$controls-margin;\r\n inset-block-start: core-map-controls-variables.$controls-margin;\r\n}\r\n\r\nsection:not([hidden]) {\r\n display: flex;\r\n flex-direction: column;\r\n block-size: 100%;\r\n}\r\n\r\nheader,\r\n.content {\r\n padding: units.$u2;\r\n}\r\n\r\nheader {\r\n border-block-end: 1px solid colors.$grijs-20;\r\n flex-grow: 0;\r\n position: relative;\r\n\r\n h2 {\r\n color: colors.$bosgroen;\r\n font-family: typography.$headings-font-family;\r\n line-height: 1;\r\n margin: 0;\r\n }\r\n}\r\n\r\n@media screen and (max-width: media-query-breakpoints.$screen-xs-max) {\r\n .toggle-visibility-button {\r\n block-size: units.$u5;\r\n margin-inline-end: 0;\r\n min-inline-size: auto;\r\n inset-inline-end: calc(100% + core-map-controls-variables.$controls-margin);\r\n inline-size: units.$u5;\r\n\r\n dso-icon {\r\n margin-inline-end: 0;\r\n }\r\n\r\n span {\r\n visibility: hidden;\r\n }\r\n }\r\n\r\n .zoom-buttons {\r\n inset-block-start: units.$u9;\r\n }\r\n}\r\n","import { Component, h, Host, Prop, Event, EventEmitter, State, Watch, Method } from \"@stencil/core\";\r\nimport { MapControlsToggleEvent } from \"./map-controls.interfaces\";\r\n\r\n// Sync with $transition-duration in ./map-controls.scss\r\nconst transitionDuration = 300;\r\n\r\n@Component({\r\n tag: \"dso-map-controls\",\r\n styleUrl: \"./map-controls.scss\",\r\n shadow: true,\r\n})\r\nexport class MapControls {\r\n private panelTitle = \"Kaartlagen\";\r\n\r\n /**\r\n * To show and hide the Map Controls.\r\n */\r\n @Prop({ reflect: true, mutable: true })\r\n open = false;\r\n\r\n /**\r\n * To disable the zoom controls:\r\n *\r\n * * `in`: Disable zoom in button.\r\n * * `out`: Disable zoom out button.\r\n * * `both`: Disable zoom in and zoom out.\r\n */\r\n @Prop()\r\n disableZoom?: \"in\" | \"out\" | \"both\";\r\n\r\n /**\r\n * Emitted when the user activates the zoom in button.\r\n */\r\n @Event()\r\n dsoZoomIn!: EventEmitter<MouseEvent>;\r\n\r\n /**\r\n * Emitted when the user activates the zoom out button.\r\n */\r\n @Event()\r\n dsoZoomOut!: EventEmitter<MouseEvent>;\r\n\r\n /**\r\n * emits when the panel opens or closes.\r\n *\r\n * - `event.detail.originalEvent` contains the original `MouseEvent / KeyboardEvent` when the panel is toggled by clicking the visibility button or the close button.\r\n * - `event.detail.open` is true when the panel opens and false when the panel closes.\r\n */\r\n @Event()\r\n dsoToggle!: EventEmitter<MapControlsToggleEvent>;\r\n\r\n @State()\r\n hideContent = !this.open;\r\n\r\n @Watch(\"open\")\r\n watchOpen(open: boolean) {\r\n if (open) {\r\n this.hideContent = false;\r\n\r\n setTimeout(() => this.#closeButtonElement?.focus(), transitionDuration);\r\n } else {\r\n setTimeout(() => {\r\n this.hideContent = true;\r\n\r\n this.#toggleButtonElement?.focus();\r\n }, transitionDuration);\r\n }\r\n }\r\n\r\n /**\r\n * Emitted when the visibility is toggled.\r\n *\r\n * Can be used to recalculate map widths or reposition center when the Map Controls opens or closes.\r\n * @param e\r\n */\r\n @Method()\r\n async toggleVisibility(e: MouseEvent | KeyboardEvent) {\r\n this.open = !this.open;\r\n\r\n this.dsoToggle.emit({\r\n originalEvent: e,\r\n open: this.open,\r\n });\r\n }\r\n\r\n #closeButtonElement: HTMLButtonElement | undefined;\r\n #toggleButtonElement: HTMLButtonElement | undefined;\r\n\r\n render() {\r\n return (\r\n <Host>\r\n <button\r\n type=\"button\"\r\n id=\"toggle-visibility-button\"\r\n class=\"toggle-visibility-button\"\r\n onClick={(e) => this.toggleVisibility(e)}\r\n ref={(element) => (this.#toggleButtonElement = element)}\r\n >\r\n <dso-icon icon=\"layers\"></dso-icon>\r\n <span>Kaartlagen</span>\r\n </button>\r\n <div class=\"zoom-buttons\">\r\n <button\r\n type=\"button\"\r\n onClick={(e) => this.dsoZoomIn.emit(e)}\r\n disabled={this.disableZoom === \"in\" || this.disableZoom === \"both\"}\r\n >\r\n <span>Zoom in</span>\r\n <dso-icon icon=\"plus\"></dso-icon>\r\n </button>\r\n <button\r\n type=\"button\"\r\n onClick={(e) => this.dsoZoomOut.emit(e)}\r\n disabled={this.disableZoom === \"out\" || this.disableZoom === \"both\"}\r\n >\r\n <span>Zoom uit</span>\r\n <dso-icon icon=\"minus\"></dso-icon>\r\n </button>\r\n </div>\r\n <section hidden={this.hideContent}>\r\n <header>\r\n <h2>{this.panelTitle}</h2>\r\n <button\r\n type=\"button\"\r\n class=\"close-button\"\r\n onClick={(e) => this.toggleVisibility(e)}\r\n ref={(element) => (this.#closeButtonElement = element)}\r\n >\r\n <span>Verberg paneel {this.panelTitle}</span>\r\n <dso-icon icon=\"times\"></dso-icon>\r\n </button>\r\n </header>\r\n <dso-scrollable>\r\n <div class=\"content\">\r\n <slot></slot>\r\n </div>\r\n </dso-scrollable>\r\n </section>\r\n </Host>\r\n );\r\n }\r\n}\r\n"],"version":3}
1
+ {"file":"dso-map-controls.js","mappings":";;;;AAAA,MAAM,cAAc,GAAG,gnlBAAgnlB,CAAC;AACxolB,6BAAe,cAAc;;;;;;;;;;;;;;;;;;;ACE7B;AACA,MAAM,kBAAkB,GAAG,GAAG,CAAC;MAOlB,WAAW;;;;;;;;QACd,eAAU,GAAG,YAAY,CAAC;QAyElC,kDAAmD;QACnD,mDAAoD;oBApE7C,KAAK;;2BAkCE,CAAC,IAAI,CAAC,IAAI;;IAGxB,SAAS,CAAC,IAAa;QACrB,IAAI,IAAI,EAAE;YACR,IAAI,CAAC,WAAW,GAAG,KAAK,CAAC;YAEzB,UAAU,CAAC,gBAAM,OAAA,MAAA,uBAAA,IAAI,uCAAoB,0CAAE,KAAK,EAAE,CAAA,EAAA,EAAE,kBAAkB,CAAC,CAAC;SACzE;aAAM;YACL,UAAU,CAAC;;gBACT,IAAI,CAAC,WAAW,GAAG,IAAI,CAAC;gBAExB,MAAA,uBAAA,IAAI,wCAAqB,0CAAE,KAAK,EAAE,CAAC;aACpC,EAAE,kBAAkB,CAAC,CAAC;SACxB;KACF;;;;;;;IASD,MAAM,gBAAgB,CAAC,CAA6B;QAClD,IAAI,CAAC,IAAI,GAAG,CAAC,IAAI,CAAC,IAAI,CAAC;QAEvB,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC;YAClB,aAAa,EAAE,CAAC;YAChB,IAAI,EAAE,IAAI,CAAC,IAAI;SAChB,CAAC,CAAC;KACJ;IAKD,MAAM;QACJ,QACE,EAAC,IAAI,uDACH,+DACE,IAAI,EAAC,QAAQ,EACb,EAAE,EAAC,0BAA0B,EAC7B,KAAK,EAAC,0BAA0B,EAChC,OAAO,EAAE,CAAC,CAAC,KAAK,IAAI,CAAC,gBAAgB,CAAC,CAAC,CAAC,EACxC,GAAG,EAAE,CAAC,OAAO,MAAM,uBAAA,IAAI,oCAAwB,OAAO,MAAA,CAAC,IAEvD,iEAAU,IAAI,EAAC,QAAQ,GAAY,EACnC,4EAAuB,CAChB,EACT,4DAAK,KAAK,EAAC,cAAc,IACvB,+DACE,IAAI,EAAC,QAAQ,EACb,OAAO,EAAE,CAAC,CAAC,KAAK,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,CAAC,CAAC,EACtC,QAAQ,EAAE,IAAI,CAAC,WAAW,KAAK,IAAI,IAAI,IAAI,CAAC,WAAW,KAAK,MAAM,IAElE,yEAAoB,EACpB,iEAAU,IAAI,EAAC,MAAM,GAAY,CAC1B,EACT,+DACE,IAAI,EAAC,QAAQ,EACb,OAAO,EAAE,CAAC,CAAC,KAAK,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,CAAC,CAAC,EACvC,QAAQ,EAAE,IAAI,CAAC,WAAW,KAAK,KAAK,IAAI,IAAI,CAAC,WAAW,KAAK,MAAM,IAEnE,0EAAqB,EACrB,iEAAU,IAAI,EAAC,OAAO,GAAY,CAC3B,CACL,EACN,gEAAS,MAAM,EAAE,IAAI,CAAC,WAAW,IAC/B,iEACE,6DAAK,IAAI,CAAC,UAAU,CAAM,EAC1B,+DACE,IAAI,EAAC,QAAQ,EACb,KAAK,EAAC,cAAc,EACpB,OAAO,EAAE,CAAC,CAAC,KAAK,IAAI,CAAC,gBAAgB,CAAC,CAAC,CAAC,EACxC,GAAG,EAAE,CAAC,OAAO,MAAM,uBAAA,IAAI,mCAAuB,OAAO,MAAA,CAAC,IAEtD,kFAAsB,IAAI,CAAC,UAAU,CAAQ,EAC7C,iEAAU,IAAI,EAAC,OAAO,GAAY,CAC3B,CACF,EACT,yEACE,4DAAK,KAAK,EAAC,SAAS,IAClB,8DAAa,CACT,CACS,CACT,CACL,EACP;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/map-controls/map-controls.scss?tag=dso-map-controls&encapsulation=shadow","src/components/map-controls/map-controls.tsx"],"sourcesContent":["@use \"~dso-toolkit/src/utilities\";\r\n@use \"~dso-toolkit/src/variables/colors\";\r\n@use \"~dso-toolkit/src/variables/media-query-breakpoints\";\r\n@use \"~dso-toolkit/src/variables/typography\";\r\n@use \"~dso-toolkit/src/variables/units\";\r\n@use \"~dso-toolkit/src/components/button\";\r\n\r\n@use \"map-controls.variables\" as core-map-controls-variables;\r\n\r\n:host {\r\n background-color: colors.$wit;\r\n border: 1px solid colors.$grijs-20;\r\n inset-block-end: 0;\r\n display: block;\r\n font-family: typography.$font-family-base;\r\n position: absolute;\r\n inset-block-start: 0;\r\n inset-inline-start: 100%;\r\n transition: transform core-map-controls-variables.$transition-duration ease;\r\n inline-size: 300px;\r\n}\r\n\r\n@include utilities.box-sizing();\r\n\r\n:host([open]) {\r\n box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.3);\r\n transform: translateX(-100%);\r\n\r\n .toggle-visibility-button {\r\n display: none;\r\n }\r\n\r\n .zoom-buttons {\r\n inset-block-start: units.$u2;\r\n }\r\n}\r\n\r\nbutton {\r\n @include button.element();\r\n}\r\n\r\n.toggle-visibility-button {\r\n @include button.map();\r\n\r\n // stylelint-disable-next-line no-duplicate-selectors -- needed to fix sass deprecation warnings: #2724\r\n & {\r\n position: absolute;\r\n inset-inline-end: calc(\r\n 100% + #{core-map-controls-variables.$controls-margin + core-map-controls-variables.$zoom-button-size}\r\n );\r\n inset-block-start: core-map-controls-variables.$controls-margin;\r\n }\r\n}\r\n\r\n.zoom-buttons {\r\n border-radius: 4px;\r\n box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.5);\r\n display: flex;\r\n flex-wrap: wrap;\r\n flex: 0 0;\r\n position: absolute;\r\n inset-inline-end: calc(100% + core-map-controls-variables.$controls-margin);\r\n inset-block-start: core-map-controls-variables.$controls-margin;\r\n\r\n button {\r\n @include button.secondary($modifiers: false, $icon-only: true);\r\n\r\n // stylelint-disable-next-line no-duplicate-selectors -- needed to fix sass deprecation warnings: #2724\r\n & {\r\n border: 0;\r\n padding: 8px;\r\n border-radius: 0;\r\n border-start-start-radius: 4px;\r\n border-start-end-radius: 4px;\r\n flex: 0 0 100%;\r\n block-size: core-map-controls-variables.$zoom-button-size;\r\n min-inline-size: auto;\r\n inline-size: core-map-controls-variables.$zoom-button-size;\r\n\r\n + button {\r\n border-radius: 0;\r\n border-end-start-radius: 4px;\r\n border-end-end-radius: 4px;\r\n border-block-start: 1px solid colors.$grijs-20;\r\n }\r\n\r\n &:focus-visible {\r\n outline-offset: -1px;\r\n }\r\n }\r\n }\r\n}\r\n\r\n.close-button {\r\n @include button.tertiary($modifiers: false, $icon-only: true);\r\n\r\n // stylelint-disable-next-line no-duplicate-selectors -- needed to fix sass deprecation warnings: #2724\r\n & {\r\n padding: 0;\r\n position: absolute;\r\n inset-inline-end: core-map-controls-variables.$controls-margin;\r\n inset-block-start: core-map-controls-variables.$controls-margin;\r\n }\r\n}\r\n\r\nsection:not([hidden]) {\r\n display: flex;\r\n flex-direction: column;\r\n block-size: 100%;\r\n}\r\n\r\nheader,\r\n.content {\r\n padding: units.$u2;\r\n}\r\n\r\nheader {\r\n border-block-end: 1px solid colors.$grijs-20;\r\n flex-grow: 0;\r\n position: relative;\r\n\r\n h2 {\r\n color: colors.$bosgroen;\r\n font-family: typography.$headings-font-family;\r\n line-height: 1;\r\n margin: 0;\r\n }\r\n}\r\n\r\n@media screen and (max-width: media-query-breakpoints.$screen-xs-max) {\r\n .toggle-visibility-button {\r\n block-size: units.$u5;\r\n margin-inline-end: 0;\r\n min-inline-size: auto;\r\n inset-inline-end: calc(100% + core-map-controls-variables.$controls-margin);\r\n inline-size: units.$u5;\r\n\r\n dso-icon {\r\n margin-inline-end: 0;\r\n }\r\n\r\n span {\r\n visibility: hidden;\r\n }\r\n }\r\n\r\n .zoom-buttons {\r\n inset-block-start: units.$u9;\r\n }\r\n}\r\n","import { Component, h, Host, Prop, Event, EventEmitter, State, Watch, Method } from \"@stencil/core\";\r\nimport { MapControlsToggleEvent } from \"./map-controls.interfaces\";\r\n\r\n// Sync with $transition-duration in ./map-controls.scss\r\nconst transitionDuration = 300;\r\n\r\n@Component({\r\n tag: \"dso-map-controls\",\r\n styleUrl: \"./map-controls.scss\",\r\n shadow: true,\r\n})\r\nexport class MapControls {\r\n private panelTitle = \"Kaartlagen\";\r\n\r\n /**\r\n * To show and hide the Map Controls.\r\n */\r\n @Prop({ reflect: true, mutable: true })\r\n open = false;\r\n\r\n /**\r\n * To disable the zoom controls:\r\n *\r\n * * `in`: Disable zoom in button.\r\n * * `out`: Disable zoom out button.\r\n * * `both`: Disable zoom in and zoom out.\r\n */\r\n @Prop()\r\n disableZoom?: \"in\" | \"out\" | \"both\";\r\n\r\n /**\r\n * Emitted when the user activates the zoom in button.\r\n */\r\n @Event()\r\n dsoZoomIn!: EventEmitter<MouseEvent>;\r\n\r\n /**\r\n * Emitted when the user activates the zoom out button.\r\n */\r\n @Event()\r\n dsoZoomOut!: EventEmitter<MouseEvent>;\r\n\r\n /**\r\n * emits when the panel opens or closes.\r\n *\r\n * - `event.detail.originalEvent` contains the original `MouseEvent / KeyboardEvent` when the panel is toggled by clicking the visibility button or the close button.\r\n * - `event.detail.open` is true when the panel opens and false when the panel closes.\r\n */\r\n @Event()\r\n dsoToggle!: EventEmitter<MapControlsToggleEvent>;\r\n\r\n @State()\r\n hideContent = !this.open;\r\n\r\n @Watch(\"open\")\r\n watchOpen(open: boolean) {\r\n if (open) {\r\n this.hideContent = false;\r\n\r\n setTimeout(() => this.#closeButtonElement?.focus(), transitionDuration);\r\n } else {\r\n setTimeout(() => {\r\n this.hideContent = true;\r\n\r\n this.#toggleButtonElement?.focus();\r\n }, transitionDuration);\r\n }\r\n }\r\n\r\n /**\r\n * Emitted when the visibility is toggled.\r\n *\r\n * Can be used to recalculate map widths or reposition center when the Map Controls opens or closes.\r\n * @param e\r\n */\r\n @Method()\r\n async toggleVisibility(e: MouseEvent | KeyboardEvent) {\r\n this.open = !this.open;\r\n\r\n this.dsoToggle.emit({\r\n originalEvent: e,\r\n open: this.open,\r\n });\r\n }\r\n\r\n #closeButtonElement: HTMLButtonElement | undefined;\r\n #toggleButtonElement: HTMLButtonElement | undefined;\r\n\r\n render() {\r\n return (\r\n <Host>\r\n <button\r\n type=\"button\"\r\n id=\"toggle-visibility-button\"\r\n class=\"toggle-visibility-button\"\r\n onClick={(e) => this.toggleVisibility(e)}\r\n ref={(element) => (this.#toggleButtonElement = element)}\r\n >\r\n <dso-icon icon=\"layers\"></dso-icon>\r\n <span>Kaartlagen</span>\r\n </button>\r\n <div class=\"zoom-buttons\">\r\n <button\r\n type=\"button\"\r\n onClick={(e) => this.dsoZoomIn.emit(e)}\r\n disabled={this.disableZoom === \"in\" || this.disableZoom === \"both\"}\r\n >\r\n <span>Zoom in</span>\r\n <dso-icon icon=\"plus\"></dso-icon>\r\n </button>\r\n <button\r\n type=\"button\"\r\n onClick={(e) => this.dsoZoomOut.emit(e)}\r\n disabled={this.disableZoom === \"out\" || this.disableZoom === \"both\"}\r\n >\r\n <span>Zoom uit</span>\r\n <dso-icon icon=\"minus\"></dso-icon>\r\n </button>\r\n </div>\r\n <section hidden={this.hideContent}>\r\n <header>\r\n <h2>{this.panelTitle}</h2>\r\n <button\r\n type=\"button\"\r\n class=\"close-button\"\r\n onClick={(e) => this.toggleVisibility(e)}\r\n ref={(element) => (this.#closeButtonElement = element)}\r\n >\r\n <span>Verberg paneel {this.panelTitle}</span>\r\n <dso-icon icon=\"times\"></dso-icon>\r\n </button>\r\n </header>\r\n <dso-scrollable>\r\n <div class=\"content\">\r\n <slot></slot>\r\n </div>\r\n </dso-scrollable>\r\n </section>\r\n </Host>\r\n );\r\n }\r\n}\r\n"],"version":3}
package/dist/components/dso-tab.js CHANGED
@@ -1,7 +1,7 @@
1
1
  import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
2
2
  import { i as isModifiedEvent } from './is-modified-event.js';
3
3
 
4
- const tabCss = "*,*::after,*::before{box-sizing:border-box}:host{display:block;border-color:#39870c;margin-block-end:-1px}@media screen and (max-width: 767px){:host{margin-block:10px}:host(:first-child){margin-block-start:0}}:host([active]:not([active=false])) [role=tab],:host([active]:not([active=false])) [role=tab]:active,:host([active]:not([active=false])) [role=tab]:focus,:host([active]:not([active=false])) [role=tab]:hover,:host([active]:not([active=false])) [role=tab]:visited{background-color:#fff;border:1px solid #39870c;border-block-end-color:#fff;color:#39870c;cursor:default}@media screen and (max-width: 767px){:host([active]:not([active=false])) [role=tab],:host([active]:not([active=false])) [role=tab]:active,:host([active]:not([active=false])) [role=tab]:focus,:host([active]:not([active=false])) [role=tab]:hover,:host([active]:not([active=false])) [role=tab]:visited{border-block-end-color:#39870c}}:host([disabled]:not([disabled=false])) [role=tab]{color:#999}:host([disabled]:not([disabled=false])) [role=tab]:hover,:host([disabled]:not([disabled=false])) [role=tab]:focus{color:#999;text-decoration:none;cursor:default;background-color:transparent}@media screen and (max-width: 767px){:host([disabled]:not([disabled=false])) [role=tab]:hover,:host([disabled]:not([disabled=false])) [role=tab]:focus{border-block-end-color:#fff}}a{text-decoration:none}a:hover,a:focus-visible{text-decoration:none}a:active{text-decoration:underline}a:visited{color:#666}button{font-family:inherit;font-size:inherit;background-color:transparent}[role=tab]{font-weight:bold;cursor:pointer;display:block;min-block-size:56px;border:1px solid transparent;border-radius:4px 4px 0 0;color:#666;line-height:1.5;padding-block:15px;padding-inline:23px}[role=tab]:hover{border-color:#e5e5e5 #e5e5e5 #e5e5e5}[role=tab]:hover,[role=tab]:focus{text-decoration:none;background-color:#e5e5e5}[role=tab]:active,[role=tab]:focus,[role=tab]:hover{background-color:#f2f2f2;border:1px solid transparent;border-block-end-color:#39870c;text-decoration:none}@media screen and (max-width: 767px){[role=tab]:active,[role=tab]:focus,[role=tab]:hover{border-block-end-color:#fff}}@media screen and (max-width: 767px){[role=tab]{border-color:#fff;border-radius:8px;padding-block:18px;padding-inline:20px}}";
4
+ const tabCss = "*,*::after,*::before{box-sizing:border-box}:host{display:block;border-color:#39870c;margin-block-end:-1px}@media screen and (max-width: 767px){:host{margin-block:10px}:host(:first-child){margin-block-start:0}}:host([active]:not([active=false])) [role=tab],:host([active]:not([active=false])) [role=tab]:active,:host([active]:not([active=false])) [role=tab]:focus,:host([active]:not([active=false])) [role=tab]:hover,:host([active]:not([active=false])) [role=tab]:visited{background-color:#fff;border:1px solid #39870c;border-block-end-color:#fff;color:#39870c;cursor:default}@media screen and (max-width: 767px){:host([active]:not([active=false])) [role=tab],:host([active]:not([active=false])) [role=tab]:active,:host([active]:not([active=false])) [role=tab]:focus,:host([active]:not([active=false])) [role=tab]:hover,:host([active]:not([active=false])) [role=tab]:visited{border-block-end-color:#39870c}}:host([disabled]:not([disabled=false])) [role=tab]{color:#999}:host([disabled]:not([disabled=false])) [role=tab]:hover,:host([disabled]:not([disabled=false])) [role=tab]:focus{color:#999;text-decoration:none;cursor:default;background-color:transparent}@media screen and (max-width: 767px){:host([disabled]:not([disabled=false])) [role=tab]:hover,:host([disabled]:not([disabled=false])) [role=tab]:focus{border-block-end-color:#fff}}a{text-decoration:none}a:hover,a:focus-visible{text-decoration:none}a:active{text-decoration:underline}a:visited{color:#666}button{font-family:inherit;font-size:inherit;background-color:transparent}[role=tab]{font-weight:bold;cursor:pointer;display:block;min-block-size:56px;border:1px solid transparent;border-radius:4px 4px 0 0;color:#666;line-height:1.5;padding-block:15px;padding-inline:23px}[role=tab]:hover{border-color:#e5e5e5 #e5e5e5 #e5e5e5}[role=tab]:hover,[role=tab]:focus{text-decoration:none;background-color:#e5e5e5}[role=tab]:active,[role=tab]:focus,[role=tab]:hover{background-color:#f2f2f2;border:1px solid transparent;border-block-end-color:#39870c;text-decoration:none}@media screen and (max-width: 767px){[role=tab]:active,[role=tab]:focus,[role=tab]:hover{border-block-end-color:#fff}}@media screen and (max-width: 767px){[role=tab]{border-color:#fff;border-radius:8px;padding-block:18px;padding-inline:20px;inline-size:100%;text-align:start}}";
5
5
  const DsoTabStyle0 = tabCss;
6
6
 
7
7
  const Tab = /*@__PURE__*/ proxyCustomElement(class Tab extends HTMLElement {
package/dist/components/dso-tab.js.map CHANGED
@@ -1 +1 @@
1
- {"file":"dso-tab.js","mappings":";;;AAAA,MAAM,MAAM,GAAG,8tEAA8tE,CAAC;AAC9uE,qBAAe,MAAM;;MCWR,GAAG;;;;;;QAsCN,cAAS,GAAG,CAAC,CAA6B;YAChD,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC;gBACrB,aAAa,EAAE,CAAC;gBAChB,eAAe,EAAE,CAAC,YAAY,UAAU,GAAG,eAAe,CAAC,CAAC,CAAC,GAAG,KAAK;aACtE,CAAC,CAAC;SACJ,CAAC;QAEM,iBAAY,GAAG,CAAC,CAAgB;YACtC,IAAI,CAAC,CAAC,GAAG,KAAK,GAAG,IAAI,CAAC,IAAI,CAAC,QAAQ,IAAI,CAAC,IAAI,CAAC,MAAM,EAAE;gBACnD,IAAI,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC;aACnB;SACF,CAAC;QAEM,iBAAY,GAAG,CAAC,CAAa;YACnC,IAAI,CAAC,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,IAAI,KAAK,IAAI,CAAC,MAAM,EAAE;gBAC/C,CAAC,CAAC,cAAc,EAAE,CAAC;aACpB;iBAAM;gBACL,IAAI,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC;aACnB;SACF,CAAC;;;;;;;;IAzBF,MAAM,SAAS;;QACb,MAAA,IAAI,CAAC,iBAAiB,0CAAE,KAAK,EAAE,CAAC;KACjC;IAyBD,MAAM;QACJ,OAAO,IAAI,CAAC,IAAI,IACd,uBACE,IAAI,EAAC,KAAK,EACV,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,OAAO,EAAE,IAAI,CAAC,YAAY,EAC1B,OAAO,EAAE,IAAI,CAAC,YAAY,mBACX,IAAI,CAAC,MAAM,GAAG,MAAM,GAAG,OAAO,KACxC,CAAC,IAAI,CAAC,MAAM,GAAG,EAAE,QAAQ,EAAE,CAAC,CAAC,EAAE,GAAG,EAAE,KACzC,GAAG,EAAE,CAAC,OAAO,MAAM,IAAI,CAAC,iBAAiB,GAAG,OAAO,CAAC,KAEpD,eAAQ,CACN,KAEJ,4BACE,IAAI,EAAC,KAAK,EACV,IAAI,EAAC,QAAQ,EACb,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,OAAO,EAAE,IAAI,CAAC,YAAY,mBACX,IAAI,CAAC,MAAM,GAAG,MAAM,GAAG,OAAO,KACxC,CAAC,IAAI,CAAC,MAAM,GAAG,EAAE,QAAQ,EAAE,CAAC,CAAC,EAAE,GAAG,EAAE,KACzC,GAAG,EAAE,CAAC,OAAO,MAAM,IAAI,CAAC,iBAAiB,GAAG,OAAO,CAAC,KAEpD,eAAQ,CACD,CACV,CAAC;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/tabs/components/tab.scss?tag=dso-tab&encapsulation=shadow","src/components/tabs/components/tab.tsx"],"sourcesContent":["@use \"~dso-toolkit/src/utilities\";\r\n\r\n@use \"~dso-toolkit/src/components/anchor\";\r\n@use \"~dso-toolkit/src/variables/colors\";\r\n@use \"~dso-toolkit/src/variables/media-query-breakpoints\";\r\n@use \"~dso-toolkit/src/variables/scaffolding\";\r\n@use \"~dso-toolkit/src/variables/typography\";\r\n\r\n@use \"tab.variables\" as tab-variables;\r\n\r\n@include utilities.box-sizing();\r\n\r\n:host {\r\n display: block;\r\n border-color: tab-variables.$color;\r\n // Make the list-items overlay the bottom border\r\n margin-block-end: -1px;\r\n}\r\n\r\n@media screen and (max-width: media-query-breakpoints.$screen-xs-max) {\r\n :host {\r\n margin-block: 10px;\r\n }\r\n\r\n :host(:first-child) {\r\n margin-block-start: 0;\r\n }\r\n}\r\n\r\n:host([active]:not([active=\"false\"])) {\r\n [role=\"tab\"] {\r\n &,\r\n &:active,\r\n &:focus,\r\n &:hover,\r\n &:visited {\r\n background-color: colors.$wit;\r\n border: 1px solid tab-variables.$color;\r\n border-block-end-color: colors.$wit;\r\n color: tab-variables.$color;\r\n cursor: default;\r\n\r\n @media screen and (max-width: media-query-breakpoints.$screen-xs-max) {\r\n border-block-end-color: tab-variables.$color;\r\n }\r\n }\r\n }\r\n}\r\n\r\n:host([disabled]:not([disabled=\"false\"])) {\r\n [role=\"tab\"] {\r\n color: tab-variables.$nav-disabled-link-color;\r\n\r\n &:hover,\r\n &:focus {\r\n color: tab-variables.$nav-disabled-link-hover-color;\r\n text-decoration: none;\r\n cursor: scaffolding.$cursor-disabled;\r\n background-color: transparent;\r\n\r\n @media screen and (max-width: media-query-breakpoints.$screen-xs-max) {\r\n border-block-end-color: colors.$wit;\r\n }\r\n }\r\n }\r\n}\r\n\r\na {\r\n @include anchor.clean();\r\n\r\n &:visited {\r\n color: tab-variables.$text-color;\r\n }\r\n}\r\n\r\nbutton {\r\n font-family: inherit;\r\n font-size: inherit;\r\n background-color: transparent;\r\n}\r\n\r\n[role=\"tab\"] {\r\n font-weight: bold;\r\n cursor: pointer;\r\n display: block;\r\n min-block-size: tab-variables.$block-size;\r\n border: 1px solid transparent;\r\n border-radius: tab-variables.$border-radius tab-variables.$border-radius 0 0;\r\n color: tab-variables.$text-color;\r\n line-height: typography.$line-height-base;\r\n padding-block: tab-variables.$block-padding;\r\n padding-inline: tab-variables.$inline-padding;\r\n\r\n &:hover {\r\n border-color: tab-variables.$link-hover-border-color tab-variables.$link-hover-border-color\r\n tab-variables.$border-color;\r\n }\r\n\r\n &:hover,\r\n &:focus {\r\n text-decoration: none;\r\n background-color: tab-variables.$nav-link-hover-bg;\r\n }\r\n\r\n &:active,\r\n &:focus,\r\n &:hover {\r\n background-color: tab-variables.$hover-color;\r\n border: 1px solid transparent;\r\n border-block-end-color: tab-variables.$color;\r\n text-decoration: none;\r\n\r\n @media screen and (max-width: media-query-breakpoints.$screen-xs-max) {\r\n border-block-end-color: colors.$wit;\r\n }\r\n }\r\n\r\n @media screen and (max-width: media-query-breakpoints.$screen-xs-max) {\r\n border-color: colors.$wit;\r\n border-radius: 8px;\r\n padding-block: 18px;\r\n padding-inline: 20px;\r\n }\r\n}\r\n","import { Component, Element, Event, EventEmitter, Prop, h, Method } from \"@stencil/core\";\r\nimport { isModifiedEvent } from \"../../../utils/is-modified-event\";\r\nimport { TabsSwitchEvent } from \"../tabs.interfaces\";\r\n\r\n/**\r\n * @slot - The label for this tab\r\n */\r\n@Component({\r\n tag: \"dso-tab\",\r\n styleUrl: \"tab.scss\",\r\n shadow: true,\r\n})\r\nexport class Tab {\r\n @Element()\r\n host!: HTMLDsoTabElement;\r\n\r\n /**\r\n * Makes the tab active. The tab for which the tabpanel is visible is the active tab.\r\n */\r\n @Prop({ reflect: true })\r\n active?: boolean;\r\n\r\n /**\r\n * Disables the tab. A disabled tab cannot be activated and it's tabpanel cannot be shown.\r\n */\r\n @Prop({ reflect: true })\r\n disabled?: boolean;\r\n\r\n /**\r\n * The optional href of the tab. Creates an anchor if present. Creates a button if absent.\r\n */\r\n @Prop()\r\n href?: string;\r\n\r\n /**\r\n * Emitted when the user activates tab via click or arrow keys followed by space or enter.\r\n */\r\n @Event()\r\n dsoTabSwitch!: EventEmitter<TabsSwitchEvent>;\r\n\r\n /**\r\n * @internal\r\n */\r\n @Method()\r\n async _dsoFocus() {\r\n this.anchorOrButtonRef?.focus();\r\n }\r\n\r\n private anchorOrButtonRef?: HTMLAnchorElement | HTMLButtonElement;\r\n\r\n private emitEvent = (e: MouseEvent | KeyboardEvent) => {\r\n this.dsoTabSwitch.emit({\r\n originalEvent: e,\r\n isModifiedEvent: e instanceof MouseEvent ? isModifiedEvent(e) : false,\r\n });\r\n };\r\n\r\n private keyUpHandler = (e: KeyboardEvent) => {\r\n if (e.key === \" \" && !this.disabled && !this.active) {\r\n this.emitEvent(e);\r\n }\r\n };\r\n\r\n private clickHandler = (e: MouseEvent) => {\r\n if ((this.disabled && this.href) || this.active) {\r\n e.preventDefault();\r\n } else {\r\n this.emitEvent(e);\r\n }\r\n };\r\n\r\n render() {\r\n return this.href ? (\r\n <a\r\n role=\"tab\"\r\n href={this.href}\r\n onKeyUp={this.keyUpHandler}\r\n onClick={this.clickHandler}\r\n aria-selected={this.active ? \"true\" : \"false\"}\r\n {...(!this.active ? { tabIndex: -1 } : {})}\r\n ref={(element) => (this.anchorOrButtonRef = element)}\r\n >\r\n <slot />\r\n </a>\r\n ) : (\r\n <button\r\n role=\"tab\"\r\n type=\"button\"\r\n disabled={this.disabled}\r\n onClick={this.clickHandler}\r\n aria-selected={this.active ? \"true\" : \"false\"}\r\n {...(!this.active ? { tabIndex: -1 } : {})}\r\n ref={(element) => (this.anchorOrButtonRef = element)}\r\n >\r\n <slot />\r\n </button>\r\n );\r\n }\r\n}\r\n"],"version":3}
1
+ {"file":"dso-tab.js","mappings":";;;AAAA,MAAM,MAAM,GAAG,gwEAAgwE,CAAC;AAChxE,qBAAe,MAAM;;MCWR,GAAG;;;;;;QAsCN,cAAS,GAAG,CAAC,CAA6B;YAChD,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC;gBACrB,aAAa,EAAE,CAAC;gBAChB,eAAe,EAAE,CAAC,YAAY,UAAU,GAAG,eAAe,CAAC,CAAC,CAAC,GAAG,KAAK;aACtE,CAAC,CAAC;SACJ,CAAC;QAEM,iBAAY,GAAG,CAAC,CAAgB;YACtC,IAAI,CAAC,CAAC,GAAG,KAAK,GAAG,IAAI,CAAC,IAAI,CAAC,QAAQ,IAAI,CAAC,IAAI,CAAC,MAAM,EAAE;gBACnD,IAAI,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC;aACnB;SACF,CAAC;QAEM,iBAAY,GAAG,CAAC,CAAa;YACnC,IAAI,CAAC,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,IAAI,KAAK,IAAI,CAAC,MAAM,EAAE;gBAC/C,CAAC,CAAC,cAAc,EAAE,CAAC;aACpB;iBAAM;gBACL,IAAI,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC;aACnB;SACF,CAAC;;;;;;;;IAzBF,MAAM,SAAS;;QACb,MAAA,IAAI,CAAC,iBAAiB,0CAAE,KAAK,EAAE,CAAC;KACjC;IAyBD,MAAM;QACJ,OAAO,IAAI,CAAC,IAAI,IACd,uBACE,IAAI,EAAC,KAAK,EACV,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,OAAO,EAAE,IAAI,CAAC,YAAY,EAC1B,OAAO,EAAE,IAAI,CAAC,YAAY,mBACX,IAAI,CAAC,MAAM,GAAG,MAAM,GAAG,OAAO,KACxC,CAAC,IAAI,CAAC,MAAM,GAAG,EAAE,QAAQ,EAAE,CAAC,CAAC,EAAE,GAAG,EAAE,KACzC,GAAG,EAAE,CAAC,OAAO,MAAM,IAAI,CAAC,iBAAiB,GAAG,OAAO,CAAC,KAEpD,eAAQ,CACN,KAEJ,4BACE,IAAI,EAAC,KAAK,EACV,IAAI,EAAC,QAAQ,EACb,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,OAAO,EAAE,IAAI,CAAC,YAAY,mBACX,IAAI,CAAC,MAAM,GAAG,MAAM,GAAG,OAAO,KACxC,CAAC,IAAI,CAAC,MAAM,GAAG,EAAE,QAAQ,EAAE,CAAC,CAAC,EAAE,GAAG,EAAE,KACzC,GAAG,EAAE,CAAC,OAAO,MAAM,IAAI,CAAC,iBAAiB,GAAG,OAAO,CAAC,KAEpD,eAAQ,CACD,CACV,CAAC;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/tabs/components/tab.scss?tag=dso-tab&encapsulation=shadow","src/components/tabs/components/tab.tsx"],"sourcesContent":["@use \"~dso-toolkit/src/utilities\";\r\n\r\n@use \"~dso-toolkit/src/components/anchor\";\r\n@use \"~dso-toolkit/src/variables/colors\";\r\n@use \"~dso-toolkit/src/variables/media-query-breakpoints\";\r\n@use \"~dso-toolkit/src/variables/scaffolding\";\r\n@use \"~dso-toolkit/src/variables/typography\";\r\n\r\n@use \"tab.variables\" as tab-variables;\r\n\r\n@include utilities.box-sizing();\r\n\r\n:host {\r\n display: block;\r\n border-color: tab-variables.$color;\r\n // Make the list-items overlay the bottom border\r\n margin-block-end: -1px;\r\n}\r\n\r\n@media screen and (max-width: media-query-breakpoints.$screen-xs-max) {\r\n :host {\r\n margin-block: 10px;\r\n }\r\n\r\n :host(:first-child) {\r\n margin-block-start: 0;\r\n }\r\n}\r\n\r\n:host([active]:not([active=\"false\"])) {\r\n [role=\"tab\"] {\r\n &,\r\n &:active,\r\n &:focus,\r\n &:hover,\r\n &:visited {\r\n background-color: colors.$wit;\r\n border: 1px solid tab-variables.$color;\r\n border-block-end-color: colors.$wit;\r\n color: tab-variables.$color;\r\n cursor: default;\r\n\r\n @media screen and (max-width: media-query-breakpoints.$screen-xs-max) {\r\n border-block-end-color: tab-variables.$color;\r\n }\r\n }\r\n }\r\n}\r\n\r\n:host([disabled]:not([disabled=\"false\"])) {\r\n [role=\"tab\"] {\r\n color: tab-variables.$nav-disabled-link-color;\r\n\r\n &:hover,\r\n &:focus {\r\n color: tab-variables.$nav-disabled-link-hover-color;\r\n text-decoration: none;\r\n cursor: scaffolding.$cursor-disabled;\r\n background-color: transparent;\r\n\r\n @media screen and (max-width: media-query-breakpoints.$screen-xs-max) {\r\n border-block-end-color: colors.$wit;\r\n }\r\n }\r\n }\r\n}\r\n\r\na {\r\n @include anchor.clean();\r\n\r\n &:visited {\r\n color: tab-variables.$text-color;\r\n }\r\n}\r\n\r\nbutton {\r\n font-family: inherit;\r\n font-size: inherit;\r\n background-color: transparent;\r\n}\r\n\r\n[role=\"tab\"] {\r\n font-weight: bold;\r\n cursor: pointer;\r\n display: block;\r\n min-block-size: tab-variables.$block-size;\r\n border: 1px solid transparent;\r\n border-radius: tab-variables.$border-radius tab-variables.$border-radius 0 0;\r\n color: tab-variables.$text-color;\r\n line-height: typography.$line-height-base;\r\n padding-block: tab-variables.$block-padding;\r\n padding-inline: tab-variables.$inline-padding;\r\n\r\n &:hover {\r\n border-color: tab-variables.$link-hover-border-color tab-variables.$link-hover-border-color\r\n tab-variables.$border-color;\r\n }\r\n\r\n &:hover,\r\n &:focus {\r\n text-decoration: none;\r\n background-color: tab-variables.$nav-link-hover-bg;\r\n }\r\n\r\n &:active,\r\n &:focus,\r\n &:hover {\r\n background-color: tab-variables.$hover-color;\r\n border: 1px solid transparent;\r\n border-block-end-color: tab-variables.$color;\r\n text-decoration: none;\r\n\r\n @media screen and (max-width: media-query-breakpoints.$screen-xs-max) {\r\n border-block-end-color: colors.$wit;\r\n }\r\n }\r\n\r\n @media screen and (max-width: media-query-breakpoints.$screen-xs-max) {\r\n border-color: colors.$wit;\r\n border-radius: 8px;\r\n padding-block: 18px;\r\n padding-inline: 20px;\r\n inline-size: 100%;\r\n text-align: start;\r\n }\r\n}\r\n","import { Component, Element, Event, EventEmitter, Prop, h, Method } from \"@stencil/core\";\r\nimport { isModifiedEvent } from \"../../../utils/is-modified-event\";\r\nimport { TabsSwitchEvent } from \"../tabs.interfaces\";\r\n\r\n/**\r\n * @slot - The label for this tab\r\n */\r\n@Component({\r\n tag: \"dso-tab\",\r\n styleUrl: \"tab.scss\",\r\n shadow: true,\r\n})\r\nexport class Tab {\r\n @Element()\r\n host!: HTMLDsoTabElement;\r\n\r\n /**\r\n * Makes the tab active. The tab for which the tabpanel is visible is the active tab.\r\n */\r\n @Prop({ reflect: true })\r\n active?: boolean;\r\n\r\n /**\r\n * Disables the tab. A disabled tab cannot be activated and it's tabpanel cannot be shown.\r\n */\r\n @Prop({ reflect: true })\r\n disabled?: boolean;\r\n\r\n /**\r\n * The optional href of the tab. Creates an anchor if present. Creates a button if absent.\r\n */\r\n @Prop()\r\n href?: string;\r\n\r\n /**\r\n * Emitted when the user activates tab via click or arrow keys followed by space or enter.\r\n */\r\n @Event()\r\n dsoTabSwitch!: EventEmitter<TabsSwitchEvent>;\r\n\r\n /**\r\n * @internal\r\n */\r\n @Method()\r\n async _dsoFocus() {\r\n this.anchorOrButtonRef?.focus();\r\n }\r\n\r\n private anchorOrButtonRef?: HTMLAnchorElement | HTMLButtonElement;\r\n\r\n private emitEvent = (e: MouseEvent | KeyboardEvent) => {\r\n this.dsoTabSwitch.emit({\r\n originalEvent: e,\r\n isModifiedEvent: e instanceof MouseEvent ? isModifiedEvent(e) : false,\r\n });\r\n };\r\n\r\n private keyUpHandler = (e: KeyboardEvent) => {\r\n if (e.key === \" \" && !this.disabled && !this.active) {\r\n this.emitEvent(e);\r\n }\r\n };\r\n\r\n private clickHandler = (e: MouseEvent) => {\r\n if ((this.disabled && this.href) || this.active) {\r\n e.preventDefault();\r\n } else {\r\n this.emitEvent(e);\r\n }\r\n };\r\n\r\n render() {\r\n return this.href ? (\r\n <a\r\n role=\"tab\"\r\n href={this.href}\r\n onKeyUp={this.keyUpHandler}\r\n onClick={this.clickHandler}\r\n aria-selected={this.active ? \"true\" : \"false\"}\r\n {...(!this.active ? { tabIndex: -1 } : {})}\r\n ref={(element) => (this.anchorOrButtonRef = element)}\r\n >\r\n <slot />\r\n </a>\r\n ) : (\r\n <button\r\n role=\"tab\"\r\n type=\"button\"\r\n disabled={this.disabled}\r\n onClick={this.clickHandler}\r\n aria-selected={this.active ? \"true\" : \"false\"}\r\n {...(!this.active ? { tabIndex: -1 } : {})}\r\n ref={(element) => (this.anchorOrButtonRef = element)}\r\n >\r\n <slot />\r\n </button>\r\n );\r\n }\r\n}\r\n"],"version":3}
package/dist/components/dso-viewer-grid.js CHANGED
@@ -91,7 +91,7 @@ const Overlay = ({ ref, dsoCloseOverlay }) => (h("dialog", { class: "overlay", r
91
91
  h("span", { class: "sr-only" }, "sluiten")),
92
92
  h("slot", { name: "overlay" })));
93
93
 
94
- const viewerGridCss = "*,\n*::after,\n*::before {\n box-sizing: border-box;\n}\n\n:host([mode=vdk]) .overlay {\n block-size: calc(100% - 32px);\n margin-block: 16px;\n margin-inline: auto 16px;\n}\n\nbutton {\n -webkit-appearance: button;\n color: inherit;\n cursor: pointer;\n font: inherit;\n font-family: inherit;\n font-size: inherit;\n line-height: inherit;\n margin: 0;\n overflow: visible;\n text-transform: none;\n}\nbutton[disabled] {\n cursor: default;\n}\nbutton::-moz-focus-inner {\n border: 0;\n padding: 0;\n}\n\n.sr-only {\n position: absolute;\n inline-size: 1px;\n block-size: 1px;\n padding: 0;\n margin: -1px;\n 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-block-end: 0;\n text-decoration: none;\n touch-action: manipulation;\n text-align: start;\n user-select: none;\n vertical-align: middle;\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,\n.expand,\n.overlay-close-button {\n border: 0;\n color: #39870c;\n line-height: 1;\n padding: 0;\n background-color: transparent;\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.dso-align,\n.expand.dso-align,\n.overlay-close-button.dso-align {\n line-height: calc(1.5em - 1px);\n padding-block: 11px;\n padding-inline: 0;\n position: relative;\n}\n.shrink.dso-truncate,\n.expand.dso-truncate,\n.overlay-close-button.dso-truncate {\n max-inline-size: 100%;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\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 block-size: 24px;\n vertical-align: middle;\n inline-size: 24px;\n margin-inline-end: 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 block-size: 24px;\n vertical-align: middle;\n inline-size: 24px;\n margin-inline-start: 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-inline-start: 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-inline-start: 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-inline-start: 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\n.overlay-close-button {\n position: absolute;\n inset-block-start: 8px;\n inset-inline-end: 16px;\n}\n\n.content.invisible {\n visibility: hidden;\n}\n\n.dso-main-panel .content,\n.dso-document-panel .content {\n block-size: 100%;\n padding-block: 0;\n padding-inline: 16px;\n}\n\n.dso-main-panel {\n background-color: #fff;\n flex-shrink: 0;\n flex-grow: 0;\n position: relative;\n transition: flex-basis 200ms ease-in, max-inline-size 200ms ease-in, min-inline-size 200ms ease-in;\n z-index: 100;\n}\n.dso-main-panel.compact.collapsed, .dso-main-panel.expanded.collapsed {\n inset-inline-start: -432px;\n}\n.dso-main-panel.compact, .dso-main-panel.contracted {\n flex-shrink: unset;\n flex-grow: unset;\n position: absolute;\n transition: none;\n}\n.dso-main-panel.expanded.collapsed {\n position: absolute;\n block-size: 100%;\n}\n.dso-main-panel .dso-filterblok-address {\n font-weight: bold;\n margin-block: 8px;\n margin-inline: 0;\n}\n.dso-main-panel .sizing-buttons,\n.dso-main-panel .toggle-button {\n inset-inline-start: calc(100% + 1px);\n transition: inset-inline-start 200ms ease-in;\n padding-block: 0 8px;\n padding-inline: 0 4px;\n}\n.dso-main-panel .sizing-buttons button,\n.dso-main-panel .toggle-button button {\n border-end-end-radius: 4px;\n border-start-end-radius: 4px;\n}\n\n.dso-document-panel {\n background-color: #fff;\n flex-shrink: 0;\n flex-grow: 0;\n position: relative;\n transition: flex-basis 200ms ease-in, max-inline-size 200ms ease-in, min-inline-size 200ms ease-in;\n z-index: 100;\n}\n.dso-document-panel .sizing-buttons {\n inset-block-start: auto;\n inset-block-end: 16px;\n inset-inline-end: calc(100% + 1px);\n transition: inset-inline-end 200ms ease-in;\n padding-block: 0 8px;\n padding-inline: 4px 0;\n}\n.dso-document-panel .sizing-buttons button {\n border-end-start-radius: 4px;\n border-start-start-radius: 4px;\n}\n\n.sizing-buttons,\n.toggle-button {\n overflow-x: hidden;\n position: absolute;\n inset-block-start: 16px;\n inline-size: 44px;\n z-index: -1;\n}\n.sizing-buttons button,\n.toggle-button button {\n display: inline-block;\n font-size: 1em;\n font-weight: 500;\n margin-block-end: 0;\n text-decoration: none;\n touch-action: manipulation;\n text-align: start;\n user-select: none;\n vertical-align: middle;\n border: 0;\n padding: 8px;\n border-radius: 0;\n box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.4);\n flex: 0 0 100%;\n block-size: 40px;\n min-inline-size: auto;\n inline-size: 40px;\n}\n.sizing-buttons button:focus, .sizing-buttons button:focus-visible,\n.toggle-button button:focus,\n.toggle-button button:focus-visible {\n outline-offset: 2px;\n}\n.sizing-buttons button:active,\n.toggle-button button:active {\n outline: 0;\n}\n.sizing-buttons button,\n.toggle-button button {\n background-color: #fff;\n border-color: #39870c;\n color: #39870c;\n}\n.sizing-buttons button,\n.toggle-button button {\n border-width: 1px;\n border-style: solid;\n border-radius: 4px;\n line-height: 1.5;\n min-inline-size: 56px;\n padding-block: 11px;\n padding-inline: 15px;\n}\n.sizing-buttons button:hover,\n.toggle-button button:hover {\n background-color: #d7e7ce;\n border-color: #39870c;\n color: #39870c;\n}\n.sizing-buttons button:active,\n.toggle-button button:active {\n background-color: #39870c;\n border-color: #39870c;\n color: #fff;\n}\n.sizing-buttons button[disabled], .sizing-buttons button[disabled]:hover,\n.toggle-button button[disabled],\n.toggle-button button[disabled]:hover {\n background-color: #fff;\n border-color: #afcf9d;\n color: #afcf9d;\n}\n.sizing-buttons button.dso-small,\n.toggle-button button.dso-small {\n line-height: 1rem;\n}\n.sizing-buttons button.dso-small dso-icon,\n.sizing-buttons button.dso-small svg.di, .sizing-buttons button.dso-small.extern::after, .sizing-buttons button.dso-small.download::after, .sizing-buttons button.dso-small.dso-spinner::before,\n.toggle-button button.dso-small dso-icon,\n.toggle-button button.dso-small svg.di,\n.toggle-button button.dso-small.extern::after,\n.toggle-button button.dso-small.download::after,\n.toggle-button button.dso-small.dso-spinner::before {\n margin-block-end: -4px;\n margin-block-start: -4px;\n}\n.sizing-buttons button.dso-small.dso-spinner-left::before,\n.toggle-button button.dso-small.dso-spinner-left::before {\n block-size: 16px;\n inline-size: 16px;\n}\n.sizing-buttons button.dso-small.dso-spinner-right::after,\n.toggle-button button.dso-small.dso-spinner-right::after {\n block-size: 16px;\n inline-size: 16px;\n}\n.sizing-buttons button > span,\n.toggle-button button > span {\n position: absolute;\n inline-size: 1px;\n block-size: 1px;\n padding: 0;\n margin: -1px;\n overflow: hidden;\n clip: rect(0, 0, 0, 0);\n border: 0;\n}\n.sizing-buttons button.dso-spinner-left[disabled], .sizing-buttons button.dso-spinner-right[disabled],\n.toggle-button button.dso-spinner-left[disabled],\n.toggle-button 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.toggle-button 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 block-size: 24px;\n vertical-align: top;\n inline-size: 24px;\n margin-inline-end: 8px;\n}\n.sizing-buttons button.dso-spinner-left:not([disabled]):hover::before,\n.toggle-button 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 block-size: 24px;\n vertical-align: top;\n inline-size: 24px;\n margin-inline-end: 8px;\n}\n.sizing-buttons button.dso-spinner-left:not([disabled]).dso-small:hover::before,\n.toggle-button button.dso-spinner-left:not([disabled]).dso-small:hover::before {\n block-size: 16px;\n inline-size: 16px;\n}\n.sizing-buttons button.dso-spinner-right::after,\n.toggle-button 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 block-size: 24px;\n vertical-align: top;\n inline-size: 24px;\n margin-inline-start: 8px;\n}\n.sizing-buttons button.dso-spinner-right:not([disabled]):hover::after,\n.toggle-button 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 block-size: 24px;\n vertical-align: top;\n inline-size: 24px;\n margin-inline-start: 8px;\n}\n.sizing-buttons button.dso-spinner-right:not([disabled]).dso-small:hover::after,\n.toggle-button button.dso-spinner-right:not([disabled]).dso-small:hover::after {\n block-size: 16px;\n inline-size: 16px;\n}\n.sizing-buttons button:focus-visible,\n.toggle-button button:focus-visible {\n background-color: #d7e7ce;\n border-color: #d7e7ce;\n color: #fff;\n outline: none;\n}\n.sizing-buttons button:hover dso-icon,\n.toggle-button button:hover dso-icon {\n color: #fff;\n}\n\n.map {\n block-size: 100%;\n inline-size: 100%;\n overflow: hidden;\n position: relative;\n}\n\n.filterpanel,\n.overlay {\n background-color: #fff;\n border: 0;\n block-size: 100%;\n margin-block: 0;\n max-block-size: 100vh;\n overflow-y: auto;\n z-index: 101;\n}\n\n.filterpanel {\n padding-block: 8px;\n padding-inline: 16px;\n inset-inline-start: 0;\n}\n@media screen and (max-width: 768px) {\n .filterpanel {\n inline-size: 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: 1.5rem;\n font-weight: 700;\n}\n@media screen and (min-width: 480px) {\n .filterpanel h1 {\n font-size: 2rem;\n }\n}\n\n.overlay {\n padding-block: 40px 8px;\n padding-inline: 16px;\n inset-inline-end: 0;\n inline-size: 624px;\n}\n.overlay::backdrop {\n background-color: rgba(0, 0, 0, 0.5);\n}\n@media screen and (max-width: 624px) {\n .overlay {\n inline-size: 100vw;\n }\n}\n\n.filterpanel-buttons {\n text-align: end;\n}\n.filterpanel-buttons .cancel-button {\n display: inline-block;\n font-size: 1em;\n font-weight: 500;\n margin-block-end: 0;\n text-decoration: none;\n touch-action: manipulation;\n text-align: start;\n user-select: none;\n vertical-align: middle;\n 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 {\n background-color: #fff;\n border-color: #39870c;\n color: #39870c;\n}\n.filterpanel-buttons .cancel-button {\n border-width: 1px;\n border-style: solid;\n border-radius: 4px;\n line-height: 1.5;\n min-inline-size: 56px;\n padding-block: 11px;\n padding-inline: 15px;\n}\n.filterpanel-buttons .cancel-button:hover {\n background-color: #d7e7ce;\n border-color: #39870c;\n color: #39870c;\n}\n.filterpanel-buttons .cancel-button:active {\n background-color: #39870c;\n border-color: #39870c;\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.dso-small {\n line-height: 1rem;\n}\n.filterpanel-buttons .cancel-button.dso-small dso-icon,\n.filterpanel-buttons .cancel-button.dso-small svg.di, .filterpanel-buttons .cancel-button.dso-small.extern::after, .filterpanel-buttons .cancel-button.dso-small.download::after, .filterpanel-buttons .cancel-button.dso-small.dso-spinner::before {\n margin-block-end: -4px;\n margin-block-start: -4px;\n}\n.filterpanel-buttons .cancel-button.dso-small.dso-spinner-left::before {\n block-size: 16px;\n inline-size: 16px;\n}\n.filterpanel-buttons .cancel-button.dso-small.dso-spinner-right::after {\n block-size: 16px;\n inline-size: 16px;\n}\n.filterpanel-buttons .cancel-button dso-icon,\n.filterpanel-buttons .cancel-button svg.di {\n margin-inline-start: -8px;\n margin-inline-end: 8px;\n}\n.filterpanel-buttons .cancel-button span + dso-icon,\n.filterpanel-buttons .cancel-button span + svg.di {\n margin-inline-start: 8px;\n margin-inline-end: -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 block-size: 24px;\n vertical-align: top;\n inline-size: 24px;\n margin-inline-end: 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 block-size: 24px;\n vertical-align: top;\n inline-size: 24px;\n margin-inline-end: 8px;\n}\n.filterpanel-buttons .cancel-button.dso-spinner-left:not([disabled]).dso-small:hover::before {\n block-size: 16px;\n inline-size: 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 block-size: 24px;\n vertical-align: top;\n inline-size: 24px;\n margin-inline-start: 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 block-size: 24px;\n vertical-align: top;\n inline-size: 24px;\n margin-inline-start: 8px;\n}\n.filterpanel-buttons .cancel-button.dso-spinner-right:not([disabled]).dso-small:hover::after {\n block-size: 16px;\n inline-size: 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-block-end: -4px;\n margin-block-start: -4px;\n}\n.filterpanel-buttons .cancel-button.dso-spinner-left::before {\n block-size: 16px;\n inline-size: 16px;\n}\n.filterpanel-buttons .cancel-button.dso-spinner-right::after {\n block-size: 16px;\n inline-size: 16px;\n}\n.filterpanel-buttons .apply-button {\n display: inline-block;\n font-size: 1em;\n font-weight: 500;\n margin-block-end: 0;\n text-decoration: none;\n touch-action: manipulation;\n text-align: start;\n user-select: none;\n vertical-align: middle;\n 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 {\n background-color: #39870c;\n border-color: #39870c;\n color: #fff;\n}\n.filterpanel-buttons .apply-button {\n border-width: 1px;\n border-style: solid;\n border-radius: 4px;\n line-height: 1.5;\n min-inline-size: 56px;\n padding-block: 11px;\n padding-inline: 15px;\n}\n.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.dso-small {\n line-height: 1rem;\n}\n.filterpanel-buttons .apply-button.dso-small dso-icon,\n.filterpanel-buttons .apply-button.dso-small svg.di, .filterpanel-buttons .apply-button.dso-small.extern::after, .filterpanel-buttons .apply-button.dso-small.download::after, .filterpanel-buttons .apply-button.dso-small.dso-spinner::before {\n margin-block-end: -4px;\n margin-block-start: -4px;\n}\n.filterpanel-buttons .apply-button.dso-small.dso-spinner-left::before {\n block-size: 16px;\n inline-size: 16px;\n}\n.filterpanel-buttons .apply-button.dso-small.dso-spinner-right::after {\n block-size: 16px;\n inline-size: 16px;\n}\n.filterpanel-buttons .apply-button dso-icon,\n.filterpanel-buttons .apply-button svg.di {\n margin-inline-start: -8px;\n margin-inline-end: 8px;\n}\n.filterpanel-buttons .apply-button span + dso-icon,\n.filterpanel-buttons .apply-button span + svg.di {\n margin-inline-start: 8px;\n margin-inline-end: -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 block-size: 24px;\n vertical-align: top;\n inline-size: 24px;\n margin-inline-end: 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 block-size: 24px;\n vertical-align: top;\n inline-size: 24px;\n margin-inline-start: 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-block-end: -4px;\n margin-block-start: -4px;\n}\n.filterpanel-buttons .apply-button.dso-spinner-left::before {\n block-size: 16px;\n inline-size: 16px;\n}\n.filterpanel-buttons .apply-button.dso-spinner-right::after {\n block-size: 16px;\n inline-size: 16px;\n}\n.filterpanel-buttons .cancel-button + .apply-button {\n margin-inline-start: 16px;\n}\n\n@media screen and (min-width: 808px) {\n :host([main-size=small]) .dso-main-panel,\n :host([document-panel-size=small]) .dso-document-panel {\n flex-basis: 375px;\n min-inline-size: 0;\n max-inline-size: 375px;\n }\n}\n@media screen and (min-width: 808px) and (max-width: 375px) {\n :host([main-size=small]) .dso-main-panel,\n :host([document-panel-size=small]) .dso-document-panel {\n flex-basis: 100vw;\n max-inline-size: 100vw;\n min-inline-size: 0;\n transition: none;\n }\n}\n@media screen and (min-width: 808px) {\n :host([main-size=medium]) .dso-main-panel,\n :host([document-panel-size=medium]) .dso-document-panel {\n flex-basis: 624px;\n min-inline-size: 375px;\n max-inline-size: 624px;\n }\n}\n@media screen and (min-width: 808px) and (max-width: 624px) {\n :host([main-size=medium]) .dso-main-panel,\n :host([document-panel-size=medium]) .dso-document-panel {\n flex-basis: 100vw;\n max-inline-size: 100vw;\n min-inline-size: 375px;\n transition: none;\n }\n}\n@media screen and (min-width: 808px) {\n :host([main-size=large]) .dso-main-panel,\n :host([document-panel-size=large]) .dso-document-panel {\n flex-basis: 60%;\n min-inline-size: 768px;\n max-inline-size: 1024px;\n }\n}\n@media screen and (min-width: 808px) and (max-width: 768px) {\n :host([main-size=large]) .dso-main-panel,\n :host([document-panel-size=large]) .dso-document-panel {\n flex-basis: 100vw;\n max-inline-size: 100vw;\n min-inline-size: 768px;\n transition: none;\n }\n}\n@media screen and (min-width: 808px) {\n :host {\n display: flex;\n block-size: 100vh;\n overflow: hidden;\n position: relative;\n }\n :host .dso-main-panel.compact,\n :host .dso-main-panel.expanded {\n flex-basis: unset;\n min-inline-size: unset;\n max-inline-size: unset;\n inline-size: 440px;\n }\n :host .dso-main-panel.compact .content,\n :host .dso-main-panel.expanded .content {\n block-size: auto;\n overflow-y: auto;\n }\n}\n@media screen and (min-width: 808px) {\n .dso-main-panel,\n .dso-document-panel {\n box-shadow: 2px 0 8px 0 rgba(0, 0, 0, 0.4);\n }\n .dso-main-panel .content,\n .dso-document-panel .content {\n overflow-y: auto;\n }\n}\n@media screen and (min-width: 808px) {\n .filterpanel {\n box-shadow: 2px 0 5px #666;\n margin-inline: 0 auto;\n max-inline-size: 896px;\n inline-size: calc(100vw - 40px);\n }\n .filterpanel::before {\n content: \"\";\n display: block;\n position: fixed;\n inset-block-start: 0;\n inset-block-end: 0;\n inset-inline-end: 0;\n inset-inline-start: 896px;\n background-color: rgba(0, 0, 0, 0.5);\n }\n}\n@media screen and (min-width: 808px) and (max-width: 936px) {\n .filterpanel::before {\n inset-inline-start: auto;\n inline-size: 40px;\n }\n}\n@media screen and (min-width: 808px) {\n .overlay {\n box-shadow: -2px 0 5px #666;\n margin-inline: auto 0;\n }\n}\n@media screen and (max-width: 807.99px) {\n .dso-navbar {\n min-block-size: 32px;\n }\n .dso-navbar .dso-navbar-header {\n float: inline-start;\n }\n .dso-navbar .dso-navbar-toggle {\n border-radius: 4px;\n min-inline-size: auto;\n padding-block: 5px;\n padding-inline: 0;\n }\n .dso-navbar .dso-navbar-toggle dso-icon,\n .dso-navbar .dso-navbar-toggle svg.di {\n margin-inline-start: 8px;\n margin-inline-end: 8px;\n }\n}\n@media screen and (max-width: 807.99px) and (min-width: 992px) {\n .dso-navbar .dso-navbar-toggle {\n display: none;\n }\n}\n@media screen and (max-width: 807.99px) {\n .dso-navbar.dso-has-navbar-extension .dso-nav > li:last-child {\n margin-inline-end: 8rem;\n }\n}\n@media screen and (max-width: 807.99px) {\n .dso-nav {\n list-style: none;\n margin-block-end: 0;\n padding-inline-start: 0;\n }\n .dso-nav > li > button {\n border: 0;\n background-color: transparent;\n }\n .dso-nav > li > a,\n .dso-nav > li > button {\n display: block;\n }\n .dso-nav > li > a, .dso-nav > li > a:hover, .dso-nav > li > a:focus, .dso-nav > li > a:visited,\n .dso-nav > li > button,\n .dso-nav > li > button:hover,\n .dso-nav > li > button:focus,\n .dso-nav > li > button:visited {\n color: #275937;\n }\n .dso-nav > li.dso-active > a,\n .dso-nav > li.dso-active > button, .dso-nav > li.is-active > a,\n .dso-nav > li.is-active > button {\n border-block-end: 4px solid #8b4a6a;\n font-weight: bold;\n }\n .dso-nav.dso-nav-main > li {\n display: inline-block;\n }\n .dso-nav.dso-nav-main > li > a,\n .dso-nav.dso-nav-main > li > button {\n text-decoration: none;\n }\n .dso-nav.dso-nav-main > li > a:hover, .dso-nav.dso-nav-main > li > a:focus-visible, .dso-nav.dso-nav-main > li > a:active,\n .dso-nav.dso-nav-main > li > button:hover,\n .dso-nav.dso-nav-main > li > button:focus-visible,\n .dso-nav.dso-nav-main > li > button:active {\n text-decoration: underline;\n }\n .dso-nav.dso-nav-main > li > a,\n .dso-nav.dso-nav-main > li > button {\n font-size: 1.25em;\n line-height: 1;\n margin-block-start: 8px;\n padding-block: 8px 7px;\n padding-inline: 16px;\n }\n .dso-nav.dso-nav-sub > li {\n display: inline-block;\n }\n .dso-nav.dso-nav-sub > li > a,\n .dso-nav.dso-nav-sub > li > button {\n text-decoration: none;\n }\n .dso-nav.dso-nav-sub > li > a:hover, .dso-nav.dso-nav-sub > li > a:focus-visible, .dso-nav.dso-nav-sub > li > a:active,\n .dso-nav.dso-nav-sub > li > button:hover,\n .dso-nav.dso-nav-sub > li > button:focus-visible,\n .dso-nav.dso-nav-sub > li > button:active {\n text-decoration: underline;\n }\n .dso-nav.dso-nav-sub > li > a,\n .dso-nav.dso-nav-sub > li > button {\n font-size: 1rem;\n margin-block-start: 4px;\n padding-block: 4px 3px;\n padding-inline: 8px;\n }\n}\n@media screen and (max-width: 807.99px) {\n .dso-navbar {\n padding-inline: 16px;\n }\n}\n@media screen and (max-width: 807.99px) {\n .dso-nav {\n border-block-end: 1px solid #ccc;\n display: flex;\n gap: 16px;\n margin-block-start: 0;\n inline-size: calc(100vw - 32px);\n }\n}\n@media screen and (max-width: 807.99px) {\n .dso-tertiary {\n display: inline-block;\n font-size: 1em;\n font-weight: 500;\n margin-block-end: 0;\n text-decoration: none;\n touch-action: manipulation;\n text-align: start;\n user-select: none;\n vertical-align: middle;\n font-weight: 300;\n }\n .dso-tertiary:focus, .dso-tertiary:focus-visible {\n outline-offset: 2px;\n }\n .dso-tertiary:active {\n outline: 0;\n }\n .dso-tertiary {\n border: 0;\n color: #39870c;\n line-height: 1;\n padding: 0;\n background-color: transparent;\n }\n .dso-tertiary[disabled] {\n color: #afcf9d;\n }\n .dso-tertiary[disabled].dso-spinner-left, .dso-tertiary[disabled].dso-spinner-right {\n color: #39870c;\n }\n .dso-tertiary:not([disabled]):hover {\n color: #275937;\n text-decoration: underline;\n text-underline-position: under;\n }\n .dso-tertiary:not([disabled]):active {\n color: #173521;\n }\n .dso-tertiary.dso-align {\n line-height: calc(1.5em - 1px);\n padding-block: 11px;\n padding-inline: 0;\n position: relative;\n }\n .dso-tertiary.dso-truncate {\n max-inline-size: 100%;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n }\n .dso-tertiary.dso-spinner-left::before {\n background-image: url(\"data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E .spinner %7B animation: rotator 8s linear infinite; transform-origin: center; %7D @keyframes rotator %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D .path %7B stroke-dasharray: 265; stroke-dashoffset: 0; transform-origin: center; stroke: %2339870c; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 265; %7D 50%25 %7B stroke-dashoffset: 65; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 265; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='10' stroke-linecap='butt' cx='50' cy='50' r='45'%3E%3C/circle%3E%3C/svg%3E\");\n background-repeat: no-repeat;\n content: \"\";\n display: inline-block;\n block-size: 24px;\n vertical-align: middle;\n inline-size: 24px;\n margin-inline-end: 8px;\n }\n .dso-tertiary.dso-spinner-right::after {\n background-image: url(\"data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E .spinner %7B animation: rotator 8s linear infinite; transform-origin: center; %7D @keyframes rotator %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D .path %7B stroke-dasharray: 265; stroke-dashoffset: 0; transform-origin: center; stroke: %2339870c; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 265; %7D 50%25 %7B stroke-dashoffset: 65; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 265; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='10' stroke-linecap='butt' cx='50' cy='50' r='45'%3E%3C/circle%3E%3C/svg%3E\");\n background-repeat: no-repeat;\n content: \"\";\n display: inline-block;\n block-size: 24px;\n vertical-align: middle;\n inline-size: 24px;\n margin-inline-start: 8px;\n }\n .dso-tertiary dso-icon + span:not(.sr-only),\n .dso-tertiary svg.di + span:not(.sr-only),\n .dso-tertiary span:not(.sr-only) + dso-icon,\n .dso-tertiary span:not(.sr-only) + svg.di {\n margin-inline-start: 8px;\n }\n .dso-tertiary svg.di.di-chevron-down + span:not(.sr-only),\n .dso-tertiary svg.di.di-chevron-up + span:not(.sr-only),\n .dso-tertiary span:not(.sr-only) + svg.di.di-chevron-down,\n .dso-tertiary span:not(.sr-only) + svg.di.di-chevron-up {\n margin-inline-start: 4px;\n }\n .dso-tertiary dso-icon[icon=chevron-left] + span:not(.sr-only),\n .dso-tertiary dso-icon[icon=chevron-right] + span:not(.sr-only),\n .dso-tertiary svg.di.di-angle-down + span:not(.sr-only),\n .dso-tertiary svg.di.di-angle-up + span:not(.sr-only),\n .dso-tertiary span:not(.sr-only) + svg.di.di-angle-down,\n .dso-tertiary span:not(.sr-only) + svg.di.di-angle-up,\n .dso-tertiary span:not(.sr-only) + dso-icon[icon=chevron-left],\n .dso-tertiary span:not(.sr-only) + dso-icon[icon=chevron-right] {\n margin-inline-start: 0;\n }\n .dso-tertiary dso-icon,\n .dso-tertiary svg.di,\n .dso-tertiary span {\n vertical-align: middle;\n }\n}\n@media screen and (max-width: 807.99px) {\n .filterpanel,\n .overlay {\n margin-inline: 0;\n max-inline-size: 100vw;\n inset-block-start: 0;\n inline-size: 100vw;\n }\n}";
94
+ const viewerGridCss = "*,\n*::after,\n*::before {\n box-sizing: border-box;\n}\n\n:host([mode=vdk]) .overlay {\n block-size: calc(100% - 32px);\n margin-block: 16px;\n margin-inline: auto 16px;\n}\n\nbutton {\n -webkit-appearance: button;\n color: inherit;\n cursor: pointer;\n font: inherit;\n font-family: inherit;\n font-size: inherit;\n line-height: inherit;\n margin: 0;\n overflow: visible;\n text-transform: none;\n}\nbutton[disabled] {\n cursor: default;\n}\nbutton::-moz-focus-inner {\n border: 0;\n padding: 0;\n}\n\n.sr-only {\n position: absolute;\n inline-size: 1px;\n block-size: 1px;\n padding: 0;\n margin: -1px;\n 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-block-end: 0;\n text-decoration: none;\n touch-action: manipulation;\n text-align: start;\n user-select: none;\n vertical-align: middle;\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,\n.expand,\n.overlay-close-button {\n border: 0;\n color: #39870c;\n line-height: 1;\n padding: 0;\n background-color: transparent;\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.dso-align,\n.expand.dso-align,\n.overlay-close-button.dso-align {\n line-height: calc(1.5em - 1px);\n padding-block: 11px;\n padding-inline: 0;\n position: relative;\n}\n.shrink.dso-truncate,\n.expand.dso-truncate,\n.overlay-close-button.dso-truncate {\n max-inline-size: 100%;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\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 block-size: 24px;\n vertical-align: middle;\n inline-size: 24px;\n margin-inline-end: 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 block-size: 24px;\n vertical-align: middle;\n inline-size: 24px;\n margin-inline-start: 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-inline-start: 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-inline-start: 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-inline-start: 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\n.overlay-close-button {\n position: absolute;\n inset-block-start: 8px;\n inset-inline-end: 16px;\n}\n\n.content.invisible {\n visibility: hidden;\n}\n\n.dso-main-panel .content,\n.dso-document-panel .content {\n block-size: 100%;\n padding-block: 0;\n padding-inline: 16px;\n}\n\n.dso-main-panel {\n background-color: #fff;\n flex-shrink: 0;\n flex-grow: 0;\n position: relative;\n transition: flex-basis 200ms ease-in, max-inline-size 200ms ease-in, min-inline-size 200ms ease-in;\n z-index: 100;\n}\n.dso-main-panel.compact.collapsed, .dso-main-panel.expanded.collapsed {\n inset-inline-start: -432px;\n}\n.dso-main-panel.compact, .dso-main-panel.contracted {\n flex-shrink: unset;\n flex-grow: unset;\n position: absolute;\n transition: none;\n}\n.dso-main-panel.expanded.collapsed {\n position: absolute;\n block-size: 100%;\n}\n.dso-main-panel .dso-filterblok-address {\n font-weight: bold;\n margin-block: 8px;\n margin-inline: 0;\n}\n.dso-main-panel .sizing-buttons,\n.dso-main-panel .toggle-button {\n inset-inline-start: calc(100% + 1px);\n transition: inset-inline-start 200ms ease-in;\n padding-block: 0 8px;\n padding-inline: 0 4px;\n}\n.dso-main-panel .sizing-buttons button,\n.dso-main-panel .toggle-button button {\n border-end-end-radius: 4px;\n border-start-end-radius: 4px;\n}\n\n.dso-document-panel {\n background-color: #fff;\n flex-shrink: 0;\n flex-grow: 0;\n position: relative;\n transition: flex-basis 200ms ease-in, max-inline-size 200ms ease-in, min-inline-size 200ms ease-in;\n z-index: 100;\n}\n.dso-document-panel .sizing-buttons {\n inset-block-start: auto;\n inset-block-end: 16px;\n inset-inline-end: calc(100% + 1px);\n transition: inset-inline-end 200ms ease-in;\n padding-block: 0 8px;\n padding-inline: 4px 0;\n}\n.dso-document-panel .sizing-buttons button {\n border-end-start-radius: 4px;\n border-start-start-radius: 4px;\n}\n\n.sizing-buttons,\n.toggle-button {\n overflow-x: hidden;\n position: absolute;\n inset-block-start: 16px;\n inline-size: 44px;\n z-index: -1;\n}\n.sizing-buttons button,\n.toggle-button button {\n display: inline-block;\n font-size: 1em;\n font-weight: 500;\n margin-block-end: 0;\n text-decoration: none;\n touch-action: manipulation;\n text-align: start;\n user-select: none;\n vertical-align: middle;\n}\n.sizing-buttons button:focus, .sizing-buttons button:focus-visible,\n.toggle-button button:focus,\n.toggle-button button:focus-visible {\n outline-offset: 2px;\n}\n.sizing-buttons button:active,\n.toggle-button button:active {\n outline: 0;\n}\n.sizing-buttons button,\n.toggle-button button {\n background-color: #fff;\n border-color: #39870c;\n color: #39870c;\n}\n.sizing-buttons button,\n.toggle-button button {\n border-width: 1px;\n border-style: solid;\n border-radius: 4px;\n line-height: 1.5;\n min-inline-size: 56px;\n padding-block: 11px;\n padding-inline: 15px;\n}\n.sizing-buttons button:hover,\n.toggle-button button:hover {\n background-color: #d7e7ce;\n border-color: #39870c;\n color: #39870c;\n}\n.sizing-buttons button:active,\n.toggle-button button:active {\n background-color: #39870c;\n border-color: #39870c;\n color: #fff;\n}\n.sizing-buttons button[disabled], .sizing-buttons button[disabled]:hover,\n.toggle-button button[disabled],\n.toggle-button button[disabled]:hover {\n background-color: #fff;\n border-color: #afcf9d;\n color: #afcf9d;\n}\n.sizing-buttons button.dso-small,\n.toggle-button button.dso-small {\n line-height: 1rem;\n}\n.sizing-buttons button.dso-small dso-icon,\n.sizing-buttons button.dso-small svg.di, .sizing-buttons button.dso-small.extern::after, .sizing-buttons button.dso-small.download::after, .sizing-buttons button.dso-small.dso-spinner::before,\n.toggle-button button.dso-small dso-icon,\n.toggle-button button.dso-small svg.di,\n.toggle-button button.dso-small.extern::after,\n.toggle-button button.dso-small.download::after,\n.toggle-button button.dso-small.dso-spinner::before {\n margin-block-end: -4px;\n margin-block-start: -4px;\n}\n.sizing-buttons button.dso-small.dso-spinner-left::before,\n.toggle-button button.dso-small.dso-spinner-left::before {\n block-size: 16px;\n inline-size: 16px;\n}\n.sizing-buttons button.dso-small.dso-spinner-right::after,\n.toggle-button button.dso-small.dso-spinner-right::after {\n block-size: 16px;\n inline-size: 16px;\n}\n.sizing-buttons button > span,\n.toggle-button button > span {\n position: absolute;\n inline-size: 1px;\n block-size: 1px;\n padding: 0;\n margin: -1px;\n overflow: hidden;\n clip: rect(0, 0, 0, 0);\n border: 0;\n}\n.sizing-buttons button.dso-spinner-left[disabled], .sizing-buttons button.dso-spinner-right[disabled],\n.toggle-button button.dso-spinner-left[disabled],\n.toggle-button 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.toggle-button 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 block-size: 24px;\n vertical-align: top;\n inline-size: 24px;\n margin-inline-end: 8px;\n}\n.sizing-buttons button.dso-spinner-left:not([disabled]):hover::before,\n.toggle-button 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 block-size: 24px;\n vertical-align: top;\n inline-size: 24px;\n margin-inline-end: 8px;\n}\n.sizing-buttons button.dso-spinner-left:not([disabled]).dso-small:hover::before,\n.toggle-button button.dso-spinner-left:not([disabled]).dso-small:hover::before {\n block-size: 16px;\n inline-size: 16px;\n}\n.sizing-buttons button.dso-spinner-right::after,\n.toggle-button 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 block-size: 24px;\n vertical-align: top;\n inline-size: 24px;\n margin-inline-start: 8px;\n}\n.sizing-buttons button.dso-spinner-right:not([disabled]):hover::after,\n.toggle-button 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 block-size: 24px;\n vertical-align: top;\n inline-size: 24px;\n margin-inline-start: 8px;\n}\n.sizing-buttons button.dso-spinner-right:not([disabled]).dso-small:hover::after,\n.toggle-button button.dso-spinner-right:not([disabled]).dso-small:hover::after {\n block-size: 16px;\n inline-size: 16px;\n}\n.sizing-buttons button,\n.toggle-button button {\n border: 0;\n padding: 8px;\n border-radius: 0;\n box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.4);\n flex: 0 0 100%;\n block-size: 40px;\n min-inline-size: auto;\n inline-size: 40px;\n}\n.sizing-buttons button:hover dso-icon,\n.toggle-button button:hover dso-icon {\n color: #fff;\n}\n.sizing-buttons button:focus-visible,\n.toggle-button button:focus-visible {\n outline-offset: -1px;\n}\n\n.map {\n block-size: 100%;\n inline-size: 100%;\n overflow: hidden;\n position: relative;\n}\n\n.filterpanel,\n.overlay {\n background-color: #fff;\n border: 0;\n block-size: 100%;\n margin-block: 0;\n max-block-size: 100vh;\n overflow-y: auto;\n z-index: 101;\n}\n\n.filterpanel {\n padding-block: 8px;\n padding-inline: 16px;\n inset-inline-start: 0;\n}\n@media screen and (max-width: 768px) {\n .filterpanel {\n inline-size: 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: 1.5rem;\n font-weight: 700;\n}\n@media screen and (min-width: 480px) {\n .filterpanel h1 {\n font-size: 2rem;\n }\n}\n\n.overlay {\n padding-block: 40px 8px;\n padding-inline: 16px;\n inset-inline-end: 0;\n inline-size: 624px;\n}\n.overlay::backdrop {\n background-color: rgba(0, 0, 0, 0.5);\n}\n@media screen and (max-width: 624px) {\n .overlay {\n inline-size: 100vw;\n }\n}\n\n.filterpanel-buttons {\n text-align: end;\n}\n.filterpanel-buttons .cancel-button {\n display: inline-block;\n font-size: 1em;\n font-weight: 500;\n margin-block-end: 0;\n text-decoration: none;\n touch-action: manipulation;\n text-align: start;\n user-select: none;\n vertical-align: middle;\n 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 {\n background-color: #fff;\n border-color: #39870c;\n color: #39870c;\n}\n.filterpanel-buttons .cancel-button {\n border-width: 1px;\n border-style: solid;\n border-radius: 4px;\n line-height: 1.5;\n min-inline-size: 56px;\n padding-block: 11px;\n padding-inline: 15px;\n}\n.filterpanel-buttons .cancel-button:hover {\n background-color: #d7e7ce;\n border-color: #39870c;\n color: #39870c;\n}\n.filterpanel-buttons .cancel-button:active {\n background-color: #39870c;\n border-color: #39870c;\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.dso-small {\n line-height: 1rem;\n}\n.filterpanel-buttons .cancel-button.dso-small dso-icon,\n.filterpanel-buttons .cancel-button.dso-small svg.di, .filterpanel-buttons .cancel-button.dso-small.extern::after, .filterpanel-buttons .cancel-button.dso-small.download::after, .filterpanel-buttons .cancel-button.dso-small.dso-spinner::before {\n margin-block-end: -4px;\n margin-block-start: -4px;\n}\n.filterpanel-buttons .cancel-button.dso-small.dso-spinner-left::before {\n block-size: 16px;\n inline-size: 16px;\n}\n.filterpanel-buttons .cancel-button.dso-small.dso-spinner-right::after {\n block-size: 16px;\n inline-size: 16px;\n}\n.filterpanel-buttons .cancel-button dso-icon,\n.filterpanel-buttons .cancel-button svg.di {\n margin-inline-start: -8px;\n margin-inline-end: 8px;\n}\n.filterpanel-buttons .cancel-button span + dso-icon,\n.filterpanel-buttons .cancel-button span + svg.di {\n margin-inline-start: 8px;\n margin-inline-end: -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 block-size: 24px;\n vertical-align: top;\n inline-size: 24px;\n margin-inline-end: 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 block-size: 24px;\n vertical-align: top;\n inline-size: 24px;\n margin-inline-end: 8px;\n}\n.filterpanel-buttons .cancel-button.dso-spinner-left:not([disabled]).dso-small:hover::before {\n block-size: 16px;\n inline-size: 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 block-size: 24px;\n vertical-align: top;\n inline-size: 24px;\n margin-inline-start: 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 block-size: 24px;\n vertical-align: top;\n inline-size: 24px;\n margin-inline-start: 8px;\n}\n.filterpanel-buttons .cancel-button.dso-spinner-right:not([disabled]).dso-small:hover::after {\n block-size: 16px;\n inline-size: 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-block-end: -4px;\n margin-block-start: -4px;\n}\n.filterpanel-buttons .cancel-button.dso-spinner-left::before {\n block-size: 16px;\n inline-size: 16px;\n}\n.filterpanel-buttons .cancel-button.dso-spinner-right::after {\n block-size: 16px;\n inline-size: 16px;\n}\n.filterpanel-buttons .apply-button {\n display: inline-block;\n font-size: 1em;\n font-weight: 500;\n margin-block-end: 0;\n text-decoration: none;\n touch-action: manipulation;\n text-align: start;\n user-select: none;\n vertical-align: middle;\n 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 {\n background-color: #39870c;\n border-color: #39870c;\n color: #fff;\n}\n.filterpanel-buttons .apply-button {\n border-width: 1px;\n border-style: solid;\n border-radius: 4px;\n line-height: 1.5;\n min-inline-size: 56px;\n padding-block: 11px;\n padding-inline: 15px;\n}\n.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.dso-small {\n line-height: 1rem;\n}\n.filterpanel-buttons .apply-button.dso-small dso-icon,\n.filterpanel-buttons .apply-button.dso-small svg.di, .filterpanel-buttons .apply-button.dso-small.extern::after, .filterpanel-buttons .apply-button.dso-small.download::after, .filterpanel-buttons .apply-button.dso-small.dso-spinner::before {\n margin-block-end: -4px;\n margin-block-start: -4px;\n}\n.filterpanel-buttons .apply-button.dso-small.dso-spinner-left::before {\n block-size: 16px;\n inline-size: 16px;\n}\n.filterpanel-buttons .apply-button.dso-small.dso-spinner-right::after {\n block-size: 16px;\n inline-size: 16px;\n}\n.filterpanel-buttons .apply-button dso-icon,\n.filterpanel-buttons .apply-button svg.di {\n margin-inline-start: -8px;\n margin-inline-end: 8px;\n}\n.filterpanel-buttons .apply-button span + dso-icon,\n.filterpanel-buttons .apply-button span + svg.di {\n margin-inline-start: 8px;\n margin-inline-end: -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 block-size: 24px;\n vertical-align: top;\n inline-size: 24px;\n margin-inline-end: 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 block-size: 24px;\n vertical-align: top;\n inline-size: 24px;\n margin-inline-start: 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-block-end: -4px;\n margin-block-start: -4px;\n}\n.filterpanel-buttons .apply-button.dso-spinner-left::before {\n block-size: 16px;\n inline-size: 16px;\n}\n.filterpanel-buttons .apply-button.dso-spinner-right::after {\n block-size: 16px;\n inline-size: 16px;\n}\n.filterpanel-buttons .cancel-button + .apply-button {\n margin-inline-start: 16px;\n}\n\n@media screen and (min-width: 808px) {\n :host([main-size=small]) .dso-main-panel,\n :host([document-panel-size=small]) .dso-document-panel {\n flex-basis: 375px;\n min-inline-size: 0;\n max-inline-size: 375px;\n }\n}\n@media screen and (min-width: 808px) and (max-width: 375px) {\n :host([main-size=small]) .dso-main-panel,\n :host([document-panel-size=small]) .dso-document-panel {\n flex-basis: 100vw;\n max-inline-size: 100vw;\n min-inline-size: 0;\n transition: none;\n }\n}\n@media screen and (min-width: 808px) {\n :host([main-size=medium]) .dso-main-panel,\n :host([document-panel-size=medium]) .dso-document-panel {\n flex-basis: 624px;\n min-inline-size: 375px;\n max-inline-size: 624px;\n }\n}\n@media screen and (min-width: 808px) and (max-width: 624px) {\n :host([main-size=medium]) .dso-main-panel,\n :host([document-panel-size=medium]) .dso-document-panel {\n flex-basis: 100vw;\n max-inline-size: 100vw;\n min-inline-size: 375px;\n transition: none;\n }\n}\n@media screen and (min-width: 808px) {\n :host([main-size=large]) .dso-main-panel,\n :host([document-panel-size=large]) .dso-document-panel {\n flex-basis: 60%;\n min-inline-size: 768px;\n max-inline-size: 1024px;\n }\n}\n@media screen and (min-width: 808px) and (max-width: 768px) {\n :host([main-size=large]) .dso-main-panel,\n :host([document-panel-size=large]) .dso-document-panel {\n flex-basis: 100vw;\n max-inline-size: 100vw;\n min-inline-size: 768px;\n transition: none;\n }\n}\n@media screen and (min-width: 808px) {\n :host {\n display: flex;\n block-size: 100vh;\n overflow: hidden;\n position: relative;\n }\n :host .dso-main-panel.compact,\n :host .dso-main-panel.expanded {\n flex-basis: unset;\n min-inline-size: unset;\n max-inline-size: unset;\n inline-size: 440px;\n }\n :host .dso-main-panel.compact .content,\n :host .dso-main-panel.expanded .content {\n block-size: auto;\n overflow-y: auto;\n }\n}\n@media screen and (min-width: 808px) {\n .dso-main-panel,\n .dso-document-panel {\n box-shadow: 2px 0 8px 0 rgba(0, 0, 0, 0.4);\n }\n .dso-main-panel .content,\n .dso-document-panel .content {\n overflow-y: auto;\n }\n}\n@media screen and (min-width: 808px) {\n .filterpanel {\n box-shadow: 2px 0 5px #666;\n margin-inline: 0 auto;\n max-inline-size: 896px;\n inline-size: calc(100vw - 40px);\n }\n .filterpanel::before {\n content: \"\";\n display: block;\n position: fixed;\n inset-block-start: 0;\n inset-block-end: 0;\n inset-inline-end: 0;\n inset-inline-start: 896px;\n background-color: rgba(0, 0, 0, 0.5);\n }\n}\n@media screen and (min-width: 808px) and (max-width: 936px) {\n .filterpanel::before {\n inset-inline-start: auto;\n inline-size: 40px;\n }\n}\n@media screen and (min-width: 808px) {\n .overlay {\n box-shadow: -2px 0 5px #666;\n margin-inline: auto 0;\n }\n}\n@media screen and (max-width: 807.99px) {\n .dso-navbar {\n min-block-size: 32px;\n }\n .dso-navbar .dso-navbar-header {\n float: inline-start;\n }\n .dso-navbar .dso-navbar-toggle {\n border-radius: 4px;\n min-inline-size: auto;\n padding-block: 5px;\n padding-inline: 0;\n }\n .dso-navbar .dso-navbar-toggle dso-icon,\n .dso-navbar .dso-navbar-toggle svg.di {\n margin-inline-start: 8px;\n margin-inline-end: 8px;\n }\n}\n@media screen and (max-width: 807.99px) and (min-width: 992px) {\n .dso-navbar .dso-navbar-toggle {\n display: none;\n }\n}\n@media screen and (max-width: 807.99px) {\n .dso-navbar.dso-has-navbar-extension .dso-nav > li:last-child {\n margin-inline-end: 8rem;\n }\n}\n@media screen and (max-width: 807.99px) {\n .dso-nav {\n list-style: none;\n margin-block-end: 0;\n padding-inline-start: 0;\n }\n .dso-nav > li > button {\n border: 0;\n background-color: transparent;\n }\n .dso-nav > li > a,\n .dso-nav > li > button {\n display: block;\n }\n .dso-nav > li > a, .dso-nav > li > a:hover, .dso-nav > li > a:focus, .dso-nav > li > a:visited,\n .dso-nav > li > button,\n .dso-nav > li > button:hover,\n .dso-nav > li > button:focus,\n .dso-nav > li > button:visited {\n color: #275937;\n }\n .dso-nav > li.dso-active > a,\n .dso-nav > li.dso-active > button, .dso-nav > li.is-active > a,\n .dso-nav > li.is-active > button {\n border-block-end: 4px solid #8b4a6a;\n font-weight: bold;\n }\n .dso-nav.dso-nav-main > li {\n display: inline-block;\n }\n .dso-nav.dso-nav-main > li > a,\n .dso-nav.dso-nav-main > li > button {\n text-decoration: none;\n }\n .dso-nav.dso-nav-main > li > a:hover, .dso-nav.dso-nav-main > li > a:focus-visible, .dso-nav.dso-nav-main > li > a:active,\n .dso-nav.dso-nav-main > li > button:hover,\n .dso-nav.dso-nav-main > li > button:focus-visible,\n .dso-nav.dso-nav-main > li > button:active {\n text-decoration: underline;\n }\n .dso-nav.dso-nav-main > li > a,\n .dso-nav.dso-nav-main > li > button {\n font-size: 1.25em;\n line-height: 1;\n margin-block-start: 8px;\n padding-block: 8px 7px;\n padding-inline: 16px;\n }\n .dso-nav.dso-nav-sub > li {\n display: inline-block;\n }\n .dso-nav.dso-nav-sub > li > a,\n .dso-nav.dso-nav-sub > li > button {\n text-decoration: none;\n }\n .dso-nav.dso-nav-sub > li > a:hover, .dso-nav.dso-nav-sub > li > a:focus-visible, .dso-nav.dso-nav-sub > li > a:active,\n .dso-nav.dso-nav-sub > li > button:hover,\n .dso-nav.dso-nav-sub > li > button:focus-visible,\n .dso-nav.dso-nav-sub > li > button:active {\n text-decoration: underline;\n }\n .dso-nav.dso-nav-sub > li > a,\n .dso-nav.dso-nav-sub > li > button {\n font-size: 1rem;\n margin-block-start: 4px;\n padding-block: 4px 3px;\n padding-inline: 8px;\n }\n}\n@media screen and (max-width: 807.99px) {\n .dso-navbar {\n padding-inline: 16px;\n }\n}\n@media screen and (max-width: 807.99px) {\n .dso-nav {\n border-block-end: 1px solid #ccc;\n display: flex;\n gap: 16px;\n margin-block-start: 0;\n inline-size: calc(100vw - 32px);\n }\n}\n@media screen and (max-width: 807.99px) {\n .dso-tertiary {\n display: inline-block;\n font-size: 1em;\n font-weight: 500;\n margin-block-end: 0;\n text-decoration: none;\n touch-action: manipulation;\n text-align: start;\n user-select: none;\n vertical-align: middle;\n }\n .dso-tertiary:focus, .dso-tertiary:focus-visible {\n outline-offset: 2px;\n }\n .dso-tertiary:active {\n outline: 0;\n }\n .dso-tertiary {\n border: 0;\n color: #39870c;\n line-height: 1;\n padding: 0;\n background-color: transparent;\n }\n .dso-tertiary[disabled] {\n color: #afcf9d;\n }\n .dso-tertiary[disabled].dso-spinner-left, .dso-tertiary[disabled].dso-spinner-right {\n color: #39870c;\n }\n .dso-tertiary:not([disabled]):hover {\n color: #275937;\n text-decoration: underline;\n text-underline-position: under;\n }\n .dso-tertiary:not([disabled]):active {\n color: #173521;\n }\n .dso-tertiary.dso-align {\n line-height: calc(1.5em - 1px);\n padding-block: 11px;\n padding-inline: 0;\n position: relative;\n }\n .dso-tertiary.dso-truncate {\n max-inline-size: 100%;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n }\n .dso-tertiary.dso-spinner-left::before {\n background-image: url(\"data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E .spinner %7B animation: rotator 8s linear infinite; transform-origin: center; %7D @keyframes rotator %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D .path %7B stroke-dasharray: 265; stroke-dashoffset: 0; transform-origin: center; stroke: %2339870c; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 265; %7D 50%25 %7B stroke-dashoffset: 65; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 265; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='10' stroke-linecap='butt' cx='50' cy='50' r='45'%3E%3C/circle%3E%3C/svg%3E\");\n background-repeat: no-repeat;\n content: \"\";\n display: inline-block;\n block-size: 24px;\n vertical-align: middle;\n inline-size: 24px;\n margin-inline-end: 8px;\n }\n .dso-tertiary.dso-spinner-right::after {\n background-image: url(\"data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E .spinner %7B animation: rotator 8s linear infinite; transform-origin: center; %7D @keyframes rotator %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D .path %7B stroke-dasharray: 265; stroke-dashoffset: 0; transform-origin: center; stroke: %2339870c; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 265; %7D 50%25 %7B stroke-dashoffset: 65; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 265; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='10' stroke-linecap='butt' cx='50' cy='50' r='45'%3E%3C/circle%3E%3C/svg%3E\");\n background-repeat: no-repeat;\n content: \"\";\n display: inline-block;\n block-size: 24px;\n vertical-align: middle;\n inline-size: 24px;\n margin-inline-start: 8px;\n }\n .dso-tertiary dso-icon + span:not(.sr-only),\n .dso-tertiary svg.di + span:not(.sr-only),\n .dso-tertiary span:not(.sr-only) + dso-icon,\n .dso-tertiary span:not(.sr-only) + svg.di {\n margin-inline-start: 8px;\n }\n .dso-tertiary svg.di.di-chevron-down + span:not(.sr-only),\n .dso-tertiary svg.di.di-chevron-up + span:not(.sr-only),\n .dso-tertiary span:not(.sr-only) + svg.di.di-chevron-down,\n .dso-tertiary span:not(.sr-only) + svg.di.di-chevron-up {\n margin-inline-start: 4px;\n }\n .dso-tertiary dso-icon[icon=chevron-left] + span:not(.sr-only),\n .dso-tertiary dso-icon[icon=chevron-right] + span:not(.sr-only),\n .dso-tertiary svg.di.di-angle-down + span:not(.sr-only),\n .dso-tertiary svg.di.di-angle-up + span:not(.sr-only),\n .dso-tertiary span:not(.sr-only) + svg.di.di-angle-down,\n .dso-tertiary span:not(.sr-only) + svg.di.di-angle-up,\n .dso-tertiary span:not(.sr-only) + dso-icon[icon=chevron-left],\n .dso-tertiary span:not(.sr-only) + dso-icon[icon=chevron-right] {\n margin-inline-start: 0;\n }\n .dso-tertiary dso-icon,\n .dso-tertiary svg.di,\n .dso-tertiary span {\n vertical-align: middle;\n }\n .dso-tertiary {\n font-weight: 300;\n }\n}\n@media screen and (max-width: 807.99px) {\n .filterpanel,\n .overlay {\n margin-inline: 0;\n max-inline-size: 100vw;\n inset-block-start: 0;\n inline-size: 100vw;\n }\n}";
95
95
  const DsoViewerGridStyle0 = viewerGridCss;
96
96
 
97
97
  const resizeObserver = new ResizeObserver(debounce(([entry]) => {