@dso-toolkit/core 49.0.1 → 49.1.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (25) hide show
  1. package/dist/cjs/dso-map-controls.cjs.entry.js +2 -2
  2. package/dist/cjs/dso-progress-bar.cjs.entry.js +1 -1
  3. package/dist/cjs/dso-viewer-grid.cjs.entry.js +2 -2
  4. package/dist/collection/components/map-controls/map-controls.css +57 -57
  5. package/dist/collection/components/map-controls/map-controls.js +1 -1
  6. package/dist/collection/components/progress-bar/progress-bar.css +4 -4
  7. package/dist/collection/components/viewer-grid/viewer-grid.css +6 -6
  8. package/dist/collection/components/viewer-grid/viewer-grid.js +1 -1
  9. package/dist/components/dso-map-controls.js +2 -2
  10. package/dist/components/dso-progress-bar.js +1 -1
  11. package/dist/components/dso-viewer-grid.js +2 -2
  12. package/dist/dso-toolkit/dso-toolkit.esm.js +1 -1
  13. package/dist/dso-toolkit/{p-a4086aa3.entry.js → p-3b8cbd05.entry.js} +1 -1
  14. package/dist/dso-toolkit/p-6478aeca.entry.js +1 -0
  15. package/dist/dso-toolkit/p-c2157b55.entry.js +1 -0
  16. package/dist/esm/dso-map-controls.entry.js +2 -2
  17. package/dist/esm/dso-progress-bar.entry.js +1 -1
  18. package/dist/esm/dso-viewer-grid.entry.js +2 -2
  19. package/dist/types/components/ozon-content/ozon-content-mapper.d.ts +1 -1
  20. package/dist/types/components/ozon-content/ozon-content-node-context.interface.d.ts +1 -1
  21. package/dist/types/components/ozon-content/ozon-content-node.interface.d.ts +1 -1
  22. package/dist/types/components/ozon-content/ozon-content.d.ts +1 -2
  23. package/package.json +4 -4
  24. package/dist/dso-toolkit/p-80575700.entry.js +0 -1
  25. package/dist/dso-toolkit/p-c9ad94a6.entry.js +0 -1
package/dist/cjs/dso-map-controls.cjs.entry.js CHANGED
@@ -4,7 +4,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
4
4
 
5
5
  const index = require('./index-ecec64a0.js');
6
6
 
7
- const mapControlsCss = ":host {\n background-color: #fff;\n border: 1px solid #ccc;\n bottom: 0;\n display: block;\n font-family: Asap, sans-serif;\n position: absolute;\n top: 0;\n left: 100%;\n transition: transform 300ms ease;\n width: 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\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-bottom: 0;\n text-decoration: none;\n touch-action: manipulation;\n text-align: left;\n user-select: none;\n vertical-align: middle;\n background-color: #fff;\n border-color: #39870c;\n color: #39870c;\n border-width: 1px;\n border-style: solid;\n border-radius: 4px;\n line-height: 1.5;\n min-width: 56px;\n padding: 11px 15px;\n border: 0;\n box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.5);\n font-weight: 600;\n margin-right: 16px;\n padding: 8px 16px;\n white-space: nowrap;\n position: absolute;\n right: calc(100% + 56px);\n top: 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:hover {\n background-color: #39870c;\n border-color: #39870c;\n color: #fff;\n}\n#toggle-visibility-button:active {\n background-color: #275937;\n border-color: #275937;\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.btn-sm {\n line-height: 1rem;\n}\n#toggle-visibility-button.btn-sm dso-icon,\n#toggle-visibility-button.btn-sm svg.di, #toggle-visibility-button.btn-sm.extern::after, #toggle-visibility-button.btn-sm.download::after, #toggle-visibility-button.btn-sm.dso-spinner::before {\n margin-bottom: -4px;\n margin-top: -4px;\n}\n#toggle-visibility-button.btn-sm.dso-spinner-left::before {\n height: 16px;\n width: 16px;\n}\n#toggle-visibility-button.btn-sm.dso-spinner-right::after {\n height: 16px;\n width: 16px;\n}\n#toggle-visibility-button dso-icon,\n#toggle-visibility-button svg.di {\n margin-left: -8px;\n margin-right: 8px;\n}\n#toggle-visibility-button span + dso-icon,\n#toggle-visibility-button span + svg.di {\n margin-left: 8px;\n margin-right: -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 height: 24px;\n vertical-align: top;\n width: 24px;\n margin-right: 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 height: 24px;\n vertical-align: top;\n width: 24px;\n margin-right: 8px;\n}\n#toggle-visibility-button.dso-spinner-left:not([disabled]).btn-sm:hover::before {\n height: 16px;\n width: 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 height: 24px;\n vertical-align: top;\n width: 24px;\n margin-left: 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 height: 24px;\n vertical-align: top;\n width: 24px;\n margin-left: 8px;\n}\n#toggle-visibility-button.dso-spinner-right:not([disabled]).btn-sm:hover::after {\n height: 16px;\n width: 16px;\n}\n#toggle-visibility-button:focus-visible {\n background-color: #39870c;\n border-color: #39870c;\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 right: calc(100% + 16px);\n top: 16px;\n}\n#zoom-buttons button {\n display: inline-block;\n font-size: 1em;\n font-weight: 500;\n margin-bottom: 0;\n text-decoration: none;\n touch-action: manipulation;\n text-align: left;\n user-select: none;\n vertical-align: middle;\n background-color: #fff;\n border-color: #39870c;\n color: #39870c;\n border-width: 1px;\n border-style: solid;\n border-radius: 4px;\n line-height: 1.5;\n min-width: 56px;\n padding: 11px 15px;\n border: 0;\n padding: 8px;\n border-radius: 0;\n border-top-left-radius: 4px;\n border-top-right-radius: 4px;\n flex: 0 0 100%;\n height: 40px;\n min-width: auto;\n width: 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:hover {\n background-color: #39870c;\n border-color: #39870c;\n color: #fff;\n}\n#zoom-buttons button:active {\n background-color: #275937;\n border-color: #275937;\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.btn-sm {\n line-height: 1rem;\n}\n#zoom-buttons button.btn-sm dso-icon,\n#zoom-buttons button.btn-sm svg.di, #zoom-buttons button.btn-sm.extern::after, #zoom-buttons button.btn-sm.download::after, #zoom-buttons button.btn-sm.dso-spinner::before {\n margin-bottom: -4px;\n margin-top: -4px;\n}\n#zoom-buttons button.btn-sm.dso-spinner-left::before {\n height: 16px;\n width: 16px;\n}\n#zoom-buttons button.btn-sm.dso-spinner-right::after {\n height: 16px;\n width: 16px;\n}\n#zoom-buttons button > span {\n position: absolute;\n width: 1px;\n height: 1px;\n padding: 0;\n margin: -1px;\n overflow: hidden;\n clip: rect(0, 0, 0, 0);\n border: 0;\n}\n#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 height: 24px;\n vertical-align: top;\n width: 24px;\n margin-right: 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 height: 24px;\n vertical-align: top;\n width: 24px;\n margin-right: 8px;\n}\n#zoom-buttons button.dso-spinner-left:not([disabled]).btn-sm:hover::before {\n height: 16px;\n width: 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 height: 24px;\n vertical-align: top;\n width: 24px;\n margin-left: 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 height: 24px;\n vertical-align: top;\n width: 24px;\n margin-left: 8px;\n}\n#zoom-buttons button.dso-spinner-right:not([disabled]).btn-sm:hover::after {\n height: 16px;\n width: 16px;\n}\n#zoom-buttons button:focus-visible {\n background-color: #39870c;\n border-color: #39870c;\n color: #fff;\n outline: none;\n}\n#zoom-buttons button + button {\n border-radius: 0;\n border-bottom-left-radius: 4px;\n border-bottom-right-radius: 4px;\n border-top: 1px solid #ccc;\n}\n\n#close-button {\n display: inline-block;\n font-size: 1em;\n font-weight: 500;\n margin-bottom: 0;\n text-decoration: none;\n touch-action: manipulation;\n text-align: left;\n user-select: none;\n vertical-align: middle;\n border: 0;\n color: #39870c;\n line-height: 1;\n padding: 0;\n background-color: transparent;\n padding: 0;\n position: absolute;\n right: 16px;\n top: 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[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: #676cb0;\n text-decoration: underline;\n text-underline-position: under;\n}\n#close-button:not([disabled]):active {\n color: #676cb0;\n}\n#close-button.btn-align {\n line-height: calc(1.5em - 1px);\n padding: 11px 0;\n position: relative;\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 height: 24px;\n vertical-align: middle;\n width: 24px;\n margin-right: 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 height: 24px;\n vertical-align: middle;\n width: 24px;\n margin-left: 8px;\n}\n#close-button > span {\n position: absolute;\n width: 1px;\n height: 1px;\n padding: 0;\n margin: -1px;\n overflow: hidden;\n clip: rect(0, 0, 0, 0);\n border: 0;\n}\n\nsection:not([hidden]) {\n display: flex;\n flex-direction: column;\n height: 100%;\n}\n\nheader,\n.content {\n padding: 16px;\n}\n\nheader {\n border-bottom: 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.content {\n flex-grow: 1;\n overflow-y: auto;\n}";
7
+ const mapControlsCss = ":host {\n background-color: #fff;\n border: 1px solid #ccc;\n bottom: 0;\n display: block;\n font-family: Asap, sans-serif;\n position: absolute;\n top: 0;\n left: 100%;\n transition: transform 300ms ease;\n width: 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\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-bottom: 0;\n text-decoration: none;\n touch-action: manipulation;\n text-align: left;\n user-select: none;\n vertical-align: middle;\n background-color: #fff;\n border-color: #39870c;\n color: #39870c;\n border-width: 1px;\n border-style: solid;\n border-radius: 4px;\n line-height: 1.5;\n min-width: 56px;\n padding: 11px 15px;\n border: 0;\n box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.5);\n font-weight: 600;\n margin-right: 16px;\n padding: 8px 16px;\n white-space: nowrap;\n position: absolute;\n right: calc(100% + 56px);\n top: 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:hover {\n background-color: #39870c;\n border-color: #39870c;\n color: #fff;\n}\n.toggle-visibility-button:active {\n background-color: #275937;\n border-color: #275937;\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.btn-sm {\n line-height: 1rem;\n}\n.toggle-visibility-button.btn-sm dso-icon,\n.toggle-visibility-button.btn-sm svg.di, .toggle-visibility-button.btn-sm.extern::after, .toggle-visibility-button.btn-sm.download::after, .toggle-visibility-button.btn-sm.dso-spinner::before {\n margin-bottom: -4px;\n margin-top: -4px;\n}\n.toggle-visibility-button.btn-sm.dso-spinner-left::before {\n height: 16px;\n width: 16px;\n}\n.toggle-visibility-button.btn-sm.dso-spinner-right::after {\n height: 16px;\n width: 16px;\n}\n.toggle-visibility-button dso-icon,\n.toggle-visibility-button svg.di {\n margin-left: -8px;\n margin-right: 8px;\n}\n.toggle-visibility-button span + dso-icon,\n.toggle-visibility-button span + svg.di {\n margin-left: 8px;\n margin-right: -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 height: 24px;\n vertical-align: top;\n width: 24px;\n margin-right: 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 height: 24px;\n vertical-align: top;\n width: 24px;\n margin-right: 8px;\n}\n.toggle-visibility-button.dso-spinner-left:not([disabled]).btn-sm:hover::before {\n height: 16px;\n width: 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 height: 24px;\n vertical-align: top;\n width: 24px;\n margin-left: 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 height: 24px;\n vertical-align: top;\n width: 24px;\n margin-left: 8px;\n}\n.toggle-visibility-button.dso-spinner-right:not([disabled]).btn-sm:hover::after {\n height: 16px;\n width: 16px;\n}\n.toggle-visibility-button:focus-visible {\n background-color: #39870c;\n border-color: #39870c;\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 right: calc(100% + 16px);\n top: 16px;\n}\n.zoom-buttons button {\n display: inline-block;\n font-size: 1em;\n font-weight: 500;\n margin-bottom: 0;\n text-decoration: none;\n touch-action: manipulation;\n text-align: left;\n user-select: none;\n vertical-align: middle;\n background-color: #fff;\n border-color: #39870c;\n color: #39870c;\n border-width: 1px;\n border-style: solid;\n border-radius: 4px;\n line-height: 1.5;\n min-width: 56px;\n padding: 11px 15px;\n border: 0;\n padding: 8px;\n border-radius: 0;\n border-top-left-radius: 4px;\n border-top-right-radius: 4px;\n flex: 0 0 100%;\n height: 40px;\n min-width: auto;\n width: 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:hover {\n background-color: #39870c;\n border-color: #39870c;\n color: #fff;\n}\n.zoom-buttons button:active {\n background-color: #275937;\n border-color: #275937;\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.btn-sm {\n line-height: 1rem;\n}\n.zoom-buttons button.btn-sm dso-icon,\n.zoom-buttons button.btn-sm svg.di, .zoom-buttons button.btn-sm.extern::after, .zoom-buttons button.btn-sm.download::after, .zoom-buttons button.btn-sm.dso-spinner::before {\n margin-bottom: -4px;\n margin-top: -4px;\n}\n.zoom-buttons button.btn-sm.dso-spinner-left::before {\n height: 16px;\n width: 16px;\n}\n.zoom-buttons button.btn-sm.dso-spinner-right::after {\n height: 16px;\n width: 16px;\n}\n.zoom-buttons button > span {\n position: absolute;\n width: 1px;\n height: 1px;\n padding: 0;\n margin: -1px;\n overflow: hidden;\n clip: rect(0, 0, 0, 0);\n border: 0;\n}\n.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 height: 24px;\n vertical-align: top;\n width: 24px;\n margin-right: 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 height: 24px;\n vertical-align: top;\n width: 24px;\n margin-right: 8px;\n}\n.zoom-buttons button.dso-spinner-left:not([disabled]).btn-sm:hover::before {\n height: 16px;\n width: 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 height: 24px;\n vertical-align: top;\n width: 24px;\n margin-left: 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 height: 24px;\n vertical-align: top;\n width: 24px;\n margin-left: 8px;\n}\n.zoom-buttons button.dso-spinner-right:not([disabled]).btn-sm:hover::after {\n height: 16px;\n width: 16px;\n}\n.zoom-buttons button:focus-visible {\n background-color: #39870c;\n border-color: #39870c;\n color: #fff;\n outline: none;\n}\n.zoom-buttons button + button {\n border-radius: 0;\n border-bottom-left-radius: 4px;\n border-bottom-right-radius: 4px;\n border-top: 1px solid #ccc;\n}\n\n.close-button {\n display: inline-block;\n font-size: 1em;\n font-weight: 500;\n margin-bottom: 0;\n text-decoration: none;\n touch-action: manipulation;\n text-align: left;\n user-select: none;\n vertical-align: middle;\n border: 0;\n color: #39870c;\n line-height: 1;\n padding: 0;\n background-color: transparent;\n padding: 0;\n position: absolute;\n right: 16px;\n top: 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[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: #676cb0;\n text-decoration: underline;\n text-underline-position: under;\n}\n.close-button:not([disabled]):active {\n color: #676cb0;\n}\n.close-button.btn-align {\n line-height: calc(1.5em - 1px);\n padding: 11px 0;\n position: relative;\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 height: 24px;\n vertical-align: middle;\n width: 24px;\n margin-right: 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 height: 24px;\n vertical-align: middle;\n width: 24px;\n margin-left: 8px;\n}\n.close-button > span {\n position: absolute;\n width: 1px;\n height: 1px;\n padding: 0;\n margin: -1px;\n overflow: hidden;\n clip: rect(0, 0, 0, 0);\n border: 0;\n}\n\nsection:not([hidden]) {\n display: flex;\n flex-direction: column;\n height: 100%;\n}\n\nheader,\n.content {\n padding: 16px;\n}\n\nheader {\n border-bottom: 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.content {\n flex-grow: 1;\n overflow-y: auto;\n}";
8
8
 
9
9
  var __classPrivateFieldGet = (undefined && undefined.__classPrivateFieldGet) || function (receiver, state, kind, f) {
10
10
  if (kind === "a" && !f)
@@ -50,7 +50,7 @@ const MapControls = class {
50
50
  }
51
51
  }
52
52
  render() {
53
- return (index.h(index.Host, null, index.h("button", { type: "button", id: "toggle-visibility-button", onClick: () => (this.open = !this.open), ref: (element) => (__classPrivateFieldSet(this, _MapControls_toggleButtonElement, element, "f")) }, index.h("dso-icon", { icon: "layers" }), index.h("span", null, "Kaartlagen")), index.h("div", { id: "zoom-buttons" }, index.h("button", { type: "button", onClick: (e) => this.dsoZoomIn.emit(e), disabled: this.disableZoom === "in" || this.disableZoom === "both" }, index.h("span", null, "Zoom in"), index.h("dso-icon", { icon: "plus" })), index.h("button", { type: "button", onClick: (e) => this.dsoZoomOut.emit(e), disabled: this.disableZoom === "out" || this.disableZoom === "both" }, index.h("span", null, "Zoom uit"), index.h("dso-icon", { icon: "minus" }))), index.h("section", { hidden: this.hideContent }, index.h("header", null, index.h("h2", null, this.panelTitle), index.h("button", { type: "button", id: "close-button", onClick: () => (this.open = false), ref: (element) => (__classPrivateFieldSet(this, _MapControls_closeButtonElement, element, "f")) }, index.h("span", null, "Verberg paneel ", this.panelTitle), index.h("dso-icon", { icon: "times" }))), index.h("div", { class: "content" }, index.h("slot", null)))));
53
+ return (index.h(index.Host, null, index.h("button", { type: "button", id: "toggle-visibility-button", class: "toggle-visibility-button", onClick: () => (this.open = !this.open), ref: (element) => (__classPrivateFieldSet(this, _MapControls_toggleButtonElement, element, "f")) }, index.h("dso-icon", { icon: "layers" }), index.h("span", null, "Kaartlagen")), index.h("div", { class: "zoom-buttons" }, index.h("button", { type: "button", onClick: (e) => this.dsoZoomIn.emit(e), disabled: this.disableZoom === "in" || this.disableZoom === "both" }, index.h("span", null, "Zoom in"), index.h("dso-icon", { icon: "plus" })), index.h("button", { type: "button", onClick: (e) => this.dsoZoomOut.emit(e), disabled: this.disableZoom === "out" || this.disableZoom === "both" }, index.h("span", null, "Zoom uit"), index.h("dso-icon", { icon: "minus" }))), index.h("section", { hidden: this.hideContent }, index.h("header", null, index.h("h2", null, this.panelTitle), index.h("button", { type: "button", class: "close-button", onClick: () => (this.open = false), ref: (element) => (__classPrivateFieldSet(this, _MapControls_closeButtonElement, element, "f")) }, index.h("span", null, "Verberg paneel ", this.panelTitle), index.h("dso-icon", { icon: "times" }))), index.h("div", { class: "content" }, index.h("slot", null)))));
54
54
  }
55
55
  static get watchers() { return {
56
56
  "open": ["watchOpen"]
package/dist/cjs/dso-progress-bar.cjs.entry.js CHANGED
@@ -4,7 +4,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
4
4
 
5
5
  const index = require('./index-ecec64a0.js');
6
6
 
7
- const progressBarCss = ":host{display:block}*,*::after,*::before{box-sizing:border-box}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);border:0}.progress{margin-bottom:8px}.progress #progress-bar-label{font-size:14px;margin-top:8px}.progress .progress-bar{background-color:#fff;border:1px solid #39870c;display:block;height:16px}.progress .progress-bar>span{background-color:#39870c;float:left;height:100%;width:0%}";
7
+ const progressBarCss = ":host{display:block}*,*::after,*::before{box-sizing:border-box}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);border:0}.progress{margin-bottom:8px}.progress .progress-bar{background-color:#fff;border:1px solid #39870c;display:block;height:16px}.progress .progress-bar>span{background-color:#39870c;float:left;height:100%;width:0%}.progress .progress-bar+span{font-size:14px;margin-top:8px}";
8
8
 
9
9
  const ProgressBar = class {
10
10
  constructor(hostRef) {
package/dist/cjs/dso-viewer-grid.cjs.entry.js CHANGED
@@ -13,7 +13,7 @@ const ViewerGridFilterpanelButtons = ({ onApply, onCancel, }) => (index.h("div",
13
13
  index.h("span", null, "Toepassen"),
14
14
  index.h("dso-icon", { icon: "chevron-right" }))));
15
15
 
16
- const viewerGridCss = "*,\n*::after,\n*::before {\n box-sizing: border-box;\n}\n\n:host {\n display: flex;\n height: 100vh;\n overflow: hidden;\n position: relative;\n}\n\n:host([small]) .dso-map-panel {\n flex-basis: 375px;\n min-width: 0;\n max-width: 375px;\n}\n@media screen and (max-width: 375px) {\n :host([small]) .dso-map-panel {\n flex-basis: 100vw;\n max-width: 100vw;\n min-width: 0;\n transition: none;\n }\n}\n\n:host([medium]) .dso-map-panel {\n flex-basis: 624px;\n min-width: 375px;\n max-width: 624px;\n}\n@media screen and (max-width: 624px) {\n :host([medium]) .dso-map-panel {\n flex-basis: 100vw;\n max-width: 100vw;\n min-width: 375px;\n transition: none;\n }\n}\n\n:host([large]) .dso-map-panel {\n flex-basis: 60%;\n min-width: 768px;\n max-width: 1024px;\n}\n@media screen and (max-width: 768px) {\n :host([large]) .dso-map-panel {\n flex-basis: 100vw;\n max-width: 100vw;\n min-width: 768px;\n transition: none;\n }\n}\n\nbutton {\n -webkit-appearance: button;\n color: inherit;\n cursor: pointer;\n font: inherit;\n font-family: inherit;\n font-size: inherit;\n line-height: inherit;\n margin: 0;\n overflow: visible;\n text-transform: none;\n}\nbutton[disabled] {\n cursor: default;\n}\nbutton::-moz-focus-inner {\n border: 0;\n padding: 0;\n}\n\n.sr-only {\n position: absolute;\n width: 1px;\n height: 1px;\n padding: 0;\n margin: -1px;\n overflow: hidden;\n clip: rect(0, 0, 0, 0);\n border: 0;\n}\n\n.shrink,\n.expand,\n.overlay-close-button {\n display: inline-block;\n font-size: 1em;\n font-weight: 500;\n margin-bottom: 0;\n text-decoration: none;\n touch-action: manipulation;\n text-align: left;\n user-select: none;\n vertical-align: middle;\n border: 0;\n color: #39870c;\n line-height: 1;\n padding: 0;\n background-color: transparent;\n}\n.shrink:focus, .shrink:focus-visible,\n.expand:focus,\n.expand:focus-visible,\n.overlay-close-button:focus,\n.overlay-close-button:focus-visible {\n outline-offset: 2px;\n}\n.shrink:active,\n.expand:active,\n.overlay-close-button:active {\n outline: 0;\n}\n.shrink[disabled],\n.expand[disabled],\n.overlay-close-button[disabled] {\n color: #afcf9d;\n}\n.shrink[disabled].dso-spinner-left, .shrink[disabled].dso-spinner-right,\n.expand[disabled].dso-spinner-left,\n.expand[disabled].dso-spinner-right,\n.overlay-close-button[disabled].dso-spinner-left,\n.overlay-close-button[disabled].dso-spinner-right {\n color: #39870c;\n}\n.shrink:not([disabled]):hover,\n.expand:not([disabled]):hover,\n.overlay-close-button:not([disabled]):hover {\n color: #676cb0;\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: #676cb0;\n}\n.shrink.btn-align,\n.expand.btn-align,\n.overlay-close-button.btn-align {\n line-height: calc(1.5em - 1px);\n padding: 11px 0;\n position: relative;\n}\n.shrink.dso-spinner-left::before,\n.expand.dso-spinner-left::before,\n.overlay-close-button.dso-spinner-left::before {\n background-image: url(\"data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E .spinner %7B animation: rotator 8s linear infinite; transform-origin: center; %7D @keyframes rotator %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D .path %7B stroke-dasharray: 265; stroke-dashoffset: 0; transform-origin: center; stroke: %2339870c; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 265; %7D 50%25 %7B stroke-dashoffset: 65; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 265; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='10' stroke-linecap='butt' cx='50' cy='50' r='45'%3E%3C/circle%3E%3C/svg%3E\");\n background-repeat: no-repeat;\n content: \"\";\n display: inline-block;\n height: 24px;\n vertical-align: middle;\n width: 24px;\n margin-right: 8px;\n}\n.shrink.dso-spinner-right::after,\n.expand.dso-spinner-right::after,\n.overlay-close-button.dso-spinner-right::after {\n background-image: url(\"data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E .spinner %7B animation: rotator 8s linear infinite; transform-origin: center; %7D @keyframes rotator %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D .path %7B stroke-dasharray: 265; stroke-dashoffset: 0; transform-origin: center; stroke: %2339870c; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 265; %7D 50%25 %7B stroke-dashoffset: 65; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 265; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='10' stroke-linecap='butt' cx='50' cy='50' r='45'%3E%3C/circle%3E%3C/svg%3E\");\n background-repeat: no-repeat;\n content: \"\";\n display: inline-block;\n height: 24px;\n vertical-align: middle;\n width: 24px;\n margin-left: 8px;\n}\n.shrink dso-icon + span:not(.sr-only),\n.shrink svg.di + span:not(.sr-only),\n.shrink span:not(.sr-only) + dso-icon,\n.shrink span:not(.sr-only) + svg.di,\n.expand dso-icon + span:not(.sr-only),\n.expand svg.di + span:not(.sr-only),\n.expand span:not(.sr-only) + dso-icon,\n.expand span:not(.sr-only) + svg.di,\n.overlay-close-button dso-icon + span:not(.sr-only),\n.overlay-close-button svg.di + span:not(.sr-only),\n.overlay-close-button span:not(.sr-only) + dso-icon,\n.overlay-close-button span:not(.sr-only) + svg.di {\n margin-left: 8px;\n}\n.shrink svg.di.di-chevron-down + span:not(.sr-only),\n.shrink svg.di.di-chevron-up + span:not(.sr-only),\n.shrink span:not(.sr-only) + svg.di.di-chevron-down,\n.shrink span:not(.sr-only) + svg.di.di-chevron-up,\n.expand svg.di.di-chevron-down + span:not(.sr-only),\n.expand svg.di.di-chevron-up + span:not(.sr-only),\n.expand span:not(.sr-only) + svg.di.di-chevron-down,\n.expand span:not(.sr-only) + svg.di.di-chevron-up,\n.overlay-close-button svg.di.di-chevron-down + span:not(.sr-only),\n.overlay-close-button svg.di.di-chevron-up + span:not(.sr-only),\n.overlay-close-button span:not(.sr-only) + svg.di.di-chevron-down,\n.overlay-close-button span:not(.sr-only) + svg.di.di-chevron-up {\n margin-left: 4px;\n}\n.shrink dso-icon[icon=chevron-left] + span:not(.sr-only),\n.shrink dso-icon[icon=chevron-right] + span:not(.sr-only),\n.shrink svg.di.di-angle-down + span:not(.sr-only),\n.shrink svg.di.di-angle-up + span:not(.sr-only),\n.shrink span:not(.sr-only) + svg.di.di-angle-down,\n.shrink span:not(.sr-only) + svg.di.di-angle-up,\n.shrink span:not(.sr-only) + dso-icon[icon=chevron-left],\n.shrink span:not(.sr-only) + dso-icon[icon=chevron-right],\n.expand dso-icon[icon=chevron-left] + span:not(.sr-only),\n.expand dso-icon[icon=chevron-right] + span:not(.sr-only),\n.expand svg.di.di-angle-down + span:not(.sr-only),\n.expand svg.di.di-angle-up + span:not(.sr-only),\n.expand span:not(.sr-only) + svg.di.di-angle-down,\n.expand span:not(.sr-only) + svg.di.di-angle-up,\n.expand span:not(.sr-only) + dso-icon[icon=chevron-left],\n.expand span:not(.sr-only) + dso-icon[icon=chevron-right],\n.overlay-close-button dso-icon[icon=chevron-left] + span:not(.sr-only),\n.overlay-close-button dso-icon[icon=chevron-right] + span:not(.sr-only),\n.overlay-close-button svg.di.di-angle-down + span:not(.sr-only),\n.overlay-close-button svg.di.di-angle-up + span:not(.sr-only),\n.overlay-close-button span:not(.sr-only) + svg.di.di-angle-down,\n.overlay-close-button span:not(.sr-only) + svg.di.di-angle-up,\n.overlay-close-button span:not(.sr-only) + dso-icon[icon=chevron-left],\n.overlay-close-button span:not(.sr-only) + dso-icon[icon=chevron-right] {\n margin-left: 0;\n}\n.shrink dso-icon,\n.shrink svg.di,\n.shrink span,\n.expand dso-icon,\n.expand svg.di,\n.expand span,\n.overlay-close-button dso-icon,\n.overlay-close-button svg.di,\n.overlay-close-button span {\n vertical-align: middle;\n}\n.shrink:hover,\n.expand:hover,\n.overlay-close-button:hover {\n cursor: pointer;\n}\n.shrink[disabled],\n.expand[disabled],\n.overlay-close-button[disabled] {\n display: none;\n}\n\n.overlay-close-button {\n position: absolute;\n top: 8px;\n right: 16px;\n}\n\n.dso-map-panel {\n background-color: #fff;\n box-shadow: 2px 0 8px 0 rgba(0, 0, 0, 0.4);\n flex-shrink: 0;\n flex-grow: 0;\n padding-right: 8px;\n position: relative;\n transition: flex-basis 200ms ease-in, max-width 200ms ease-in, min-width 200ms ease-in;\n z-index: 100;\n}\n.dso-map-panel .dso-filterblok-address {\n font-weight: bold;\n margin: 8px 0;\n}\n.dso-map-panel .main {\n height: 100%;\n overflow-y: scroll;\n padding: 0 16px 8px;\n}\n\n.sizing-buttons {\n left: calc(100% + 1px);\n overflow-x: hidden;\n padding: 0 4px 4px 0;\n position: absolute;\n top: 16px;\n transition: left 200ms ease-in;\n width: 44px;\n z-index: -1;\n}\n.sizing-buttons button {\n display: inline-block;\n font-size: 1em;\n font-weight: 500;\n margin-bottom: 0;\n text-decoration: none;\n touch-action: manipulation;\n text-align: left;\n user-select: none;\n vertical-align: middle;\n background-color: #fff;\n border-color: #39870c;\n color: #39870c;\n border-width: 1px;\n border-style: solid;\n border-radius: 4px;\n line-height: 1.5;\n min-width: 56px;\n padding: 11px 15px;\n border: 0;\n padding: 8px;\n border-radius: 0;\n border-bottom-right-radius: 4px;\n border-top-right-radius: 4px;\n box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.4);\n flex: 0 0 100%;\n height: 40px;\n min-width: auto;\n width: 40px;\n}\n.sizing-buttons button:focus, .sizing-buttons button:focus-visible {\n outline-offset: 2px;\n}\n.sizing-buttons button:active {\n outline: 0;\n}\n.sizing-buttons button:hover {\n background-color: #39870c;\n border-color: #39870c;\n color: #fff;\n}\n.sizing-buttons button:active {\n background-color: #275937;\n border-color: #275937;\n color: #fff;\n}\n.sizing-buttons button[disabled], .sizing-buttons button[disabled]:hover {\n background-color: #fff;\n border-color: #afcf9d;\n color: #afcf9d;\n}\n.sizing-buttons button.btn-sm {\n line-height: 1rem;\n}\n.sizing-buttons button.btn-sm dso-icon,\n.sizing-buttons button.btn-sm svg.di, .sizing-buttons button.btn-sm.extern::after, .sizing-buttons button.btn-sm.download::after, .sizing-buttons button.btn-sm.dso-spinner::before {\n margin-bottom: -4px;\n margin-top: -4px;\n}\n.sizing-buttons button.btn-sm.dso-spinner-left::before {\n height: 16px;\n width: 16px;\n}\n.sizing-buttons button.btn-sm.dso-spinner-right::after {\n height: 16px;\n width: 16px;\n}\n.sizing-buttons button > span {\n position: absolute;\n width: 1px;\n height: 1px;\n padding: 0;\n margin: -1px;\n overflow: hidden;\n clip: rect(0, 0, 0, 0);\n border: 0;\n}\n.sizing-buttons button.dso-spinner-left[disabled], .sizing-buttons button.dso-spinner-right[disabled] {\n background-color: #fff;\n border-color: #39870c;\n color: #39870c;\n}\n.sizing-buttons button.dso-spinner-left::before {\n background-image: url(\"data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E .spinner %7B animation: rotator 8s linear infinite; transform-origin: center; %7D @keyframes rotator %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D .path %7B stroke-dasharray: 265; stroke-dashoffset: 0; transform-origin: center; stroke: %2339870c; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 265; %7D 50%25 %7B stroke-dashoffset: 65; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 265; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='10' stroke-linecap='butt' cx='50' cy='50' r='45'%3E%3C/circle%3E%3C/svg%3E\");\n background-repeat: no-repeat;\n content: \"\";\n display: inline-block;\n height: 24px;\n vertical-align: top;\n width: 24px;\n margin-right: 8px;\n}\n.sizing-buttons button.dso-spinner-left:not([disabled]):hover::before {\n background-image: url(\"data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E .spinner %7B animation: rotator 8s linear infinite; transform-origin: center; %7D @keyframes rotator %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D .path %7B stroke-dasharray: 265; stroke-dashoffset: 0; transform-origin: center; stroke: %23fff; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 265; %7D 50%25 %7B stroke-dashoffset: 65; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 265; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='10' stroke-linecap='butt' cx='50' cy='50' r='45'%3E%3C/circle%3E%3C/svg%3E\");\n background-repeat: no-repeat;\n content: \"\";\n display: inline-block;\n height: 24px;\n vertical-align: top;\n width: 24px;\n margin-right: 8px;\n}\n.sizing-buttons button.dso-spinner-left:not([disabled]).btn-sm:hover::before {\n height: 16px;\n width: 16px;\n}\n.sizing-buttons button.dso-spinner-right::after {\n background-image: url(\"data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E .spinner %7B animation: rotator 8s linear infinite; transform-origin: center; %7D @keyframes rotator %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D .path %7B stroke-dasharray: 265; stroke-dashoffset: 0; transform-origin: center; stroke: %2339870c; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 265; %7D 50%25 %7B stroke-dashoffset: 65; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 265; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='10' stroke-linecap='butt' cx='50' cy='50' r='45'%3E%3C/circle%3E%3C/svg%3E\");\n background-repeat: no-repeat;\n content: \"\";\n display: inline-block;\n height: 24px;\n vertical-align: top;\n width: 24px;\n margin-left: 8px;\n}\n.sizing-buttons button.dso-spinner-right:not([disabled]):hover::after {\n background-image: url(\"data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E .spinner %7B animation: rotator 8s linear infinite; transform-origin: center; %7D @keyframes rotator %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D .path %7B stroke-dasharray: 265; stroke-dashoffset: 0; transform-origin: center; stroke: %23fff; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 265; %7D 50%25 %7B stroke-dashoffset: 65; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 265; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='10' stroke-linecap='butt' cx='50' cy='50' r='45'%3E%3C/circle%3E%3C/svg%3E\");\n background-repeat: no-repeat;\n content: \"\";\n display: inline-block;\n height: 24px;\n vertical-align: top;\n width: 24px;\n margin-left: 8px;\n}\n.sizing-buttons button.dso-spinner-right:not([disabled]).btn-sm:hover::after {\n height: 16px;\n width: 16px;\n}\n.sizing-buttons button:focus-visible {\n background-color: #39870c;\n border-color: #39870c;\n color: #fff;\n outline: none;\n}\n.sizing-buttons button:hover dso-icon {\n color: #fff;\n}\n\n.map {\n height: 100%;\n width: 100%;\n overflow: hidden;\n}\n\n#filterpanel,\n.overlay {\n background-color: #fff;\n height: 100%;\n overflow-y: auto;\n position: absolute;\n z-index: 101;\n}\n\n#filterpanel {\n box-shadow: 2px 0 5px #666;\n padding: 40px 16px 8px;\n left: 0;\n max-width: 896px;\n width: calc(100vw - 40px);\n}\n@media screen and (max-width: 768px) {\n #filterpanel {\n width: 100vw;\n }\n #filterpanel::before {\n display: none !important;\n }\n}\n#filterpanel::before {\n content: \"\";\n display: block;\n position: fixed;\n top: 0;\n bottom: 0;\n right: 0;\n left: 896px;\n background-color: rgba(0, 0, 0, 0.5);\n}\n@media screen and (max-width: 936px) {\n #filterpanel::before {\n left: auto;\n width: 40px;\n }\n}\n\n.overlay {\n box-shadow: -2px 0 5px #666;\n padding: 40px 16px 8px;\n right: 0;\n width: 624px;\n}\n@media screen and (max-width: 624px) {\n .overlay {\n width: 100vw;\n }\n}\n\n.dimscreen {\n position: fixed;\n top: 0;\n bottom: 0;\n left: 0;\n right: 624px;\n background-color: rgba(0, 0, 0, 0.5);\n z-index: 102;\n}\n\n.filterpanel-buttons {\n text-align: right;\n}\n.filterpanel-buttons .cancel-button {\n display: inline-block;\n font-size: 1em;\n font-weight: 500;\n margin-bottom: 0;\n text-decoration: none;\n touch-action: manipulation;\n text-align: left;\n user-select: none;\n vertical-align: middle;\n background-color: #fff;\n border-color: #39870c;\n color: #39870c;\n border-width: 1px;\n border-style: solid;\n border-radius: 4px;\n line-height: 1.5;\n min-width: 56px;\n padding: 11px 15px;\n line-height: 1rem;\n}\n.filterpanel-buttons .cancel-button:focus, .filterpanel-buttons .cancel-button:focus-visible {\n outline-offset: 2px;\n}\n.filterpanel-buttons .cancel-button:active {\n outline: 0;\n}\n.filterpanel-buttons .cancel-button:hover {\n background-color: #39870c;\n border-color: #39870c;\n color: #fff;\n}\n.filterpanel-buttons .cancel-button:active {\n background-color: #275937;\n border-color: #275937;\n color: #fff;\n}\n.filterpanel-buttons .cancel-button[disabled], .filterpanel-buttons .cancel-button[disabled]:hover {\n background-color: #fff;\n border-color: #afcf9d;\n color: #afcf9d;\n}\n.filterpanel-buttons .cancel-button.btn-sm {\n line-height: 1rem;\n}\n.filterpanel-buttons .cancel-button.btn-sm dso-icon,\n.filterpanel-buttons .cancel-button.btn-sm svg.di, .filterpanel-buttons .cancel-button.btn-sm.extern::after, .filterpanel-buttons .cancel-button.btn-sm.download::after, .filterpanel-buttons .cancel-button.btn-sm.dso-spinner::before {\n margin-bottom: -4px;\n margin-top: -4px;\n}\n.filterpanel-buttons .cancel-button.btn-sm.dso-spinner-left::before {\n height: 16px;\n width: 16px;\n}\n.filterpanel-buttons .cancel-button.btn-sm.dso-spinner-right::after {\n height: 16px;\n width: 16px;\n}\n.filterpanel-buttons .cancel-button dso-icon,\n.filterpanel-buttons .cancel-button svg.di {\n margin-left: -8px;\n margin-right: 8px;\n}\n.filterpanel-buttons .cancel-button span + dso-icon,\n.filterpanel-buttons .cancel-button span + svg.di {\n margin-left: 8px;\n margin-right: -8px;\n}\n.filterpanel-buttons .cancel-button.dso-spinner-left[disabled], .filterpanel-buttons .cancel-button.dso-spinner-right[disabled] {\n background-color: #fff;\n border-color: #39870c;\n color: #39870c;\n}\n.filterpanel-buttons .cancel-button.dso-spinner-left::before {\n background-image: url(\"data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E .spinner %7B animation: rotator 8s linear infinite; transform-origin: center; %7D @keyframes rotator %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D .path %7B stroke-dasharray: 265; stroke-dashoffset: 0; transform-origin: center; stroke: %2339870c; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 265; %7D 50%25 %7B stroke-dashoffset: 65; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 265; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='10' stroke-linecap='butt' cx='50' cy='50' r='45'%3E%3C/circle%3E%3C/svg%3E\");\n background-repeat: no-repeat;\n content: \"\";\n display: inline-block;\n height: 24px;\n vertical-align: top;\n width: 24px;\n margin-right: 8px;\n}\n.filterpanel-buttons .cancel-button.dso-spinner-left:not([disabled]):hover::before {\n background-image: url(\"data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E .spinner %7B animation: rotator 8s linear infinite; transform-origin: center; %7D @keyframes rotator %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D .path %7B stroke-dasharray: 265; stroke-dashoffset: 0; transform-origin: center; stroke: %23fff; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 265; %7D 50%25 %7B stroke-dashoffset: 65; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 265; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='10' stroke-linecap='butt' cx='50' cy='50' r='45'%3E%3C/circle%3E%3C/svg%3E\");\n background-repeat: no-repeat;\n content: \"\";\n display: inline-block;\n height: 24px;\n vertical-align: top;\n width: 24px;\n margin-right: 8px;\n}\n.filterpanel-buttons .cancel-button.dso-spinner-left:not([disabled]).btn-sm:hover::before {\n height: 16px;\n width: 16px;\n}\n.filterpanel-buttons .cancel-button.dso-spinner-right::after {\n background-image: url(\"data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E .spinner %7B animation: rotator 8s linear infinite; transform-origin: center; %7D @keyframes rotator %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D .path %7B stroke-dasharray: 265; stroke-dashoffset: 0; transform-origin: center; stroke: %2339870c; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 265; %7D 50%25 %7B stroke-dashoffset: 65; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 265; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='10' stroke-linecap='butt' cx='50' cy='50' r='45'%3E%3C/circle%3E%3C/svg%3E\");\n background-repeat: no-repeat;\n content: \"\";\n display: inline-block;\n height: 24px;\n vertical-align: top;\n width: 24px;\n margin-left: 8px;\n}\n.filterpanel-buttons .cancel-button.dso-spinner-right:not([disabled]):hover::after {\n background-image: url(\"data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E .spinner %7B animation: rotator 8s linear infinite; transform-origin: center; %7D @keyframes rotator %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D .path %7B stroke-dasharray: 265; stroke-dashoffset: 0; transform-origin: center; stroke: %23fff; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 265; %7D 50%25 %7B stroke-dashoffset: 65; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 265; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='10' stroke-linecap='butt' cx='50' cy='50' r='45'%3E%3C/circle%3E%3C/svg%3E\");\n background-repeat: no-repeat;\n content: \"\";\n display: inline-block;\n height: 24px;\n vertical-align: top;\n width: 24px;\n margin-left: 8px;\n}\n.filterpanel-buttons .cancel-button.dso-spinner-right:not([disabled]).btn-sm:hover::after {\n height: 16px;\n width: 16px;\n}\n.filterpanel-buttons .cancel-button dso-icon,\n.filterpanel-buttons .cancel-button svg.di, .filterpanel-buttons .cancel-button.extern::after, .filterpanel-buttons .cancel-button.download::after, .filterpanel-buttons .cancel-button.dso-spinner::before {\n margin-bottom: -4px;\n margin-top: -4px;\n}\n.filterpanel-buttons .cancel-button.dso-spinner-left::before {\n height: 16px;\n width: 16px;\n}\n.filterpanel-buttons .cancel-button.dso-spinner-right::after {\n height: 16px;\n width: 16px;\n}\n.filterpanel-buttons .apply-button {\n display: inline-block;\n font-size: 1em;\n font-weight: 500;\n margin-bottom: 0;\n text-decoration: none;\n touch-action: manipulation;\n text-align: left;\n user-select: none;\n vertical-align: middle;\n background-color: #39870c;\n border-color: #39870c;\n color: #fff;\n border-width: 1px;\n border-style: solid;\n border-radius: 4px;\n line-height: 1.5;\n min-width: 56px;\n padding: 11px 15px;\n line-height: 1rem;\n}\n.filterpanel-buttons .apply-button:focus, .filterpanel-buttons .apply-button:focus-visible {\n outline-offset: 2px;\n}\n.filterpanel-buttons .apply-button:active {\n outline: 0;\n}\n.filterpanel-buttons .apply-button:hover {\n background-color: #275937;\n border-color: #275937;\n color: #fff;\n}\n.filterpanel-buttons .apply-button:active {\n background-color: #15301e;\n border-color: #15301e;\n color: #fff;\n}\n.filterpanel-buttons .apply-button[disabled], .filterpanel-buttons .apply-button[disabled]:hover {\n background-color: #afcf9d;\n border-color: #afcf9d;\n color: #fff;\n}\n.filterpanel-buttons .apply-button.btn-sm {\n line-height: 1rem;\n}\n.filterpanel-buttons .apply-button.btn-sm dso-icon,\n.filterpanel-buttons .apply-button.btn-sm svg.di, .filterpanel-buttons .apply-button.btn-sm.extern::after, .filterpanel-buttons .apply-button.btn-sm.download::after, .filterpanel-buttons .apply-button.btn-sm.dso-spinner::before {\n margin-bottom: -4px;\n margin-top: -4px;\n}\n.filterpanel-buttons .apply-button.btn-sm.dso-spinner-left::before {\n height: 16px;\n width: 16px;\n}\n.filterpanel-buttons .apply-button.btn-sm.dso-spinner-right::after {\n height: 16px;\n width: 16px;\n}\n.filterpanel-buttons .apply-button dso-icon,\n.filterpanel-buttons .apply-button svg.di {\n margin-left: -8px;\n margin-right: 8px;\n}\n.filterpanel-buttons .apply-button span + dso-icon,\n.filterpanel-buttons .apply-button span + svg.di {\n margin-left: 8px;\n margin-right: -8px;\n}\n.filterpanel-buttons .apply-button.dso-spinner-left[disabled], .filterpanel-buttons .apply-button.dso-spinner-right[disabled] {\n background-color: #39870c;\n border-color: #39870c;\n color: #fff;\n}\n.filterpanel-buttons .apply-button.dso-spinner-left::before {\n background-image: url(\"data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E .spinner %7B animation: rotator 8s linear infinite; transform-origin: center; %7D @keyframes rotator %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D .path %7B stroke-dasharray: 265; stroke-dashoffset: 0; transform-origin: center; stroke: %23fff; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 265; %7D 50%25 %7B stroke-dashoffset: 65; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 265; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='10' stroke-linecap='butt' cx='50' cy='50' r='45'%3E%3C/circle%3E%3C/svg%3E\");\n background-repeat: no-repeat;\n content: \"\";\n display: inline-block;\n height: 24px;\n vertical-align: top;\n width: 24px;\n margin-right: 8px;\n}\n.filterpanel-buttons .apply-button.dso-spinner-right::after {\n background-image: url(\"data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E .spinner %7B animation: rotator 8s linear infinite; transform-origin: center; %7D @keyframes rotator %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D .path %7B stroke-dasharray: 265; stroke-dashoffset: 0; transform-origin: center; stroke: %23fff; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 265; %7D 50%25 %7B stroke-dashoffset: 65; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 265; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='10' stroke-linecap='butt' cx='50' cy='50' r='45'%3E%3C/circle%3E%3C/svg%3E\");\n background-repeat: no-repeat;\n content: \"\";\n display: inline-block;\n height: 24px;\n vertical-align: top;\n width: 24px;\n margin-left: 8px;\n}\n.filterpanel-buttons .apply-button dso-icon,\n.filterpanel-buttons .apply-button svg.di, .filterpanel-buttons .apply-button.extern::after, .filterpanel-buttons .apply-button.download::after, .filterpanel-buttons .apply-button.dso-spinner::before {\n margin-bottom: -4px;\n margin-top: -4px;\n}\n.filterpanel-buttons .apply-button.dso-spinner-left::before {\n height: 16px;\n width: 16px;\n}\n.filterpanel-buttons .apply-button.dso-spinner-right::after {\n height: 16px;\n width: 16px;\n}\n.filterpanel-buttons .cancel-button + .apply-button {\n margin-left: 16px;\n}";
16
+ const viewerGridCss = "*,\n*::after,\n*::before {\n box-sizing: border-box;\n}\n\n:host {\n display: flex;\n height: 100vh;\n overflow: hidden;\n position: relative;\n}\n\n:host([small]) .dso-map-panel {\n flex-basis: 375px;\n min-width: 0;\n max-width: 375px;\n}\n@media screen and (max-width: 375px) {\n :host([small]) .dso-map-panel {\n flex-basis: 100vw;\n max-width: 100vw;\n min-width: 0;\n transition: none;\n }\n}\n\n:host([medium]) .dso-map-panel {\n flex-basis: 624px;\n min-width: 375px;\n max-width: 624px;\n}\n@media screen and (max-width: 624px) {\n :host([medium]) .dso-map-panel {\n flex-basis: 100vw;\n max-width: 100vw;\n min-width: 375px;\n transition: none;\n }\n}\n\n:host([large]) .dso-map-panel {\n flex-basis: 60%;\n min-width: 768px;\n max-width: 1024px;\n}\n@media screen and (max-width: 768px) {\n :host([large]) .dso-map-panel {\n flex-basis: 100vw;\n max-width: 100vw;\n min-width: 768px;\n transition: none;\n }\n}\n\nbutton {\n -webkit-appearance: button;\n color: inherit;\n cursor: pointer;\n font: inherit;\n font-family: inherit;\n font-size: inherit;\n line-height: inherit;\n margin: 0;\n overflow: visible;\n text-transform: none;\n}\nbutton[disabled] {\n cursor: default;\n}\nbutton::-moz-focus-inner {\n border: 0;\n padding: 0;\n}\n\n.sr-only {\n position: absolute;\n width: 1px;\n height: 1px;\n padding: 0;\n margin: -1px;\n overflow: hidden;\n clip: rect(0, 0, 0, 0);\n border: 0;\n}\n\n.shrink,\n.expand,\n.overlay-close-button {\n display: inline-block;\n font-size: 1em;\n font-weight: 500;\n margin-bottom: 0;\n text-decoration: none;\n touch-action: manipulation;\n text-align: left;\n user-select: none;\n vertical-align: middle;\n border: 0;\n color: #39870c;\n line-height: 1;\n padding: 0;\n background-color: transparent;\n}\n.shrink:focus, .shrink:focus-visible,\n.expand:focus,\n.expand:focus-visible,\n.overlay-close-button:focus,\n.overlay-close-button:focus-visible {\n outline-offset: 2px;\n}\n.shrink:active,\n.expand:active,\n.overlay-close-button:active {\n outline: 0;\n}\n.shrink[disabled],\n.expand[disabled],\n.overlay-close-button[disabled] {\n color: #afcf9d;\n}\n.shrink[disabled].dso-spinner-left, .shrink[disabled].dso-spinner-right,\n.expand[disabled].dso-spinner-left,\n.expand[disabled].dso-spinner-right,\n.overlay-close-button[disabled].dso-spinner-left,\n.overlay-close-button[disabled].dso-spinner-right {\n color: #39870c;\n}\n.shrink:not([disabled]):hover,\n.expand:not([disabled]):hover,\n.overlay-close-button:not([disabled]):hover {\n color: #676cb0;\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: #676cb0;\n}\n.shrink.btn-align,\n.expand.btn-align,\n.overlay-close-button.btn-align {\n line-height: calc(1.5em - 1px);\n padding: 11px 0;\n position: relative;\n}\n.shrink.dso-spinner-left::before,\n.expand.dso-spinner-left::before,\n.overlay-close-button.dso-spinner-left::before {\n background-image: url(\"data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E .spinner %7B animation: rotator 8s linear infinite; transform-origin: center; %7D @keyframes rotator %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D .path %7B stroke-dasharray: 265; stroke-dashoffset: 0; transform-origin: center; stroke: %2339870c; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 265; %7D 50%25 %7B stroke-dashoffset: 65; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 265; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='10' stroke-linecap='butt' cx='50' cy='50' r='45'%3E%3C/circle%3E%3C/svg%3E\");\n background-repeat: no-repeat;\n content: \"\";\n display: inline-block;\n height: 24px;\n vertical-align: middle;\n width: 24px;\n margin-right: 8px;\n}\n.shrink.dso-spinner-right::after,\n.expand.dso-spinner-right::after,\n.overlay-close-button.dso-spinner-right::after {\n background-image: url(\"data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E .spinner %7B animation: rotator 8s linear infinite; transform-origin: center; %7D @keyframes rotator %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D .path %7B stroke-dasharray: 265; stroke-dashoffset: 0; transform-origin: center; stroke: %2339870c; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 265; %7D 50%25 %7B stroke-dashoffset: 65; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 265; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='10' stroke-linecap='butt' cx='50' cy='50' r='45'%3E%3C/circle%3E%3C/svg%3E\");\n background-repeat: no-repeat;\n content: \"\";\n display: inline-block;\n height: 24px;\n vertical-align: middle;\n width: 24px;\n margin-left: 8px;\n}\n.shrink dso-icon + span:not(.sr-only),\n.shrink svg.di + span:not(.sr-only),\n.shrink span:not(.sr-only) + dso-icon,\n.shrink span:not(.sr-only) + svg.di,\n.expand dso-icon + span:not(.sr-only),\n.expand svg.di + span:not(.sr-only),\n.expand span:not(.sr-only) + dso-icon,\n.expand span:not(.sr-only) + svg.di,\n.overlay-close-button dso-icon + span:not(.sr-only),\n.overlay-close-button svg.di + span:not(.sr-only),\n.overlay-close-button span:not(.sr-only) + dso-icon,\n.overlay-close-button span:not(.sr-only) + svg.di {\n margin-left: 8px;\n}\n.shrink svg.di.di-chevron-down + span:not(.sr-only),\n.shrink svg.di.di-chevron-up + span:not(.sr-only),\n.shrink span:not(.sr-only) + svg.di.di-chevron-down,\n.shrink span:not(.sr-only) + svg.di.di-chevron-up,\n.expand svg.di.di-chevron-down + span:not(.sr-only),\n.expand svg.di.di-chevron-up + span:not(.sr-only),\n.expand span:not(.sr-only) + svg.di.di-chevron-down,\n.expand span:not(.sr-only) + svg.di.di-chevron-up,\n.overlay-close-button svg.di.di-chevron-down + span:not(.sr-only),\n.overlay-close-button svg.di.di-chevron-up + span:not(.sr-only),\n.overlay-close-button span:not(.sr-only) + svg.di.di-chevron-down,\n.overlay-close-button span:not(.sr-only) + svg.di.di-chevron-up {\n margin-left: 4px;\n}\n.shrink dso-icon[icon=chevron-left] + span:not(.sr-only),\n.shrink dso-icon[icon=chevron-right] + span:not(.sr-only),\n.shrink svg.di.di-angle-down + span:not(.sr-only),\n.shrink svg.di.di-angle-up + span:not(.sr-only),\n.shrink span:not(.sr-only) + svg.di.di-angle-down,\n.shrink span:not(.sr-only) + svg.di.di-angle-up,\n.shrink span:not(.sr-only) + dso-icon[icon=chevron-left],\n.shrink span:not(.sr-only) + dso-icon[icon=chevron-right],\n.expand dso-icon[icon=chevron-left] + span:not(.sr-only),\n.expand dso-icon[icon=chevron-right] + span:not(.sr-only),\n.expand svg.di.di-angle-down + span:not(.sr-only),\n.expand svg.di.di-angle-up + span:not(.sr-only),\n.expand span:not(.sr-only) + svg.di.di-angle-down,\n.expand span:not(.sr-only) + svg.di.di-angle-up,\n.expand span:not(.sr-only) + dso-icon[icon=chevron-left],\n.expand span:not(.sr-only) + dso-icon[icon=chevron-right],\n.overlay-close-button dso-icon[icon=chevron-left] + span:not(.sr-only),\n.overlay-close-button dso-icon[icon=chevron-right] + span:not(.sr-only),\n.overlay-close-button svg.di.di-angle-down + span:not(.sr-only),\n.overlay-close-button svg.di.di-angle-up + span:not(.sr-only),\n.overlay-close-button span:not(.sr-only) + svg.di.di-angle-down,\n.overlay-close-button span:not(.sr-only) + svg.di.di-angle-up,\n.overlay-close-button span:not(.sr-only) + dso-icon[icon=chevron-left],\n.overlay-close-button span:not(.sr-only) + dso-icon[icon=chevron-right] {\n margin-left: 0;\n}\n.shrink dso-icon,\n.shrink svg.di,\n.shrink span,\n.expand dso-icon,\n.expand svg.di,\n.expand span,\n.overlay-close-button dso-icon,\n.overlay-close-button svg.di,\n.overlay-close-button span {\n vertical-align: middle;\n}\n.shrink:hover,\n.expand:hover,\n.overlay-close-button:hover {\n cursor: pointer;\n}\n.shrink[disabled],\n.expand[disabled],\n.overlay-close-button[disabled] {\n display: none;\n}\n\n.overlay-close-button {\n position: absolute;\n top: 8px;\n right: 16px;\n}\n\n.dso-map-panel {\n background-color: #fff;\n box-shadow: 2px 0 8px 0 rgba(0, 0, 0, 0.4);\n flex-shrink: 0;\n flex-grow: 0;\n padding-right: 8px;\n position: relative;\n transition: flex-basis 200ms ease-in, max-width 200ms ease-in, min-width 200ms ease-in;\n z-index: 100;\n}\n.dso-map-panel .dso-filterblok-address {\n font-weight: bold;\n margin: 8px 0;\n}\n.dso-map-panel .main {\n height: 100%;\n overflow-y: scroll;\n padding: 0 16px 8px;\n}\n\n.sizing-buttons {\n left: calc(100% + 1px);\n overflow-x: hidden;\n padding: 0 4px 4px 0;\n position: absolute;\n top: 16px;\n transition: left 200ms ease-in;\n width: 44px;\n z-index: -1;\n}\n.sizing-buttons button {\n display: inline-block;\n font-size: 1em;\n font-weight: 500;\n margin-bottom: 0;\n text-decoration: none;\n touch-action: manipulation;\n text-align: left;\n user-select: none;\n vertical-align: middle;\n background-color: #fff;\n border-color: #39870c;\n color: #39870c;\n border-width: 1px;\n border-style: solid;\n border-radius: 4px;\n line-height: 1.5;\n min-width: 56px;\n padding: 11px 15px;\n border: 0;\n padding: 8px;\n border-radius: 0;\n border-bottom-right-radius: 4px;\n border-top-right-radius: 4px;\n box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.4);\n flex: 0 0 100%;\n height: 40px;\n min-width: auto;\n width: 40px;\n}\n.sizing-buttons button:focus, .sizing-buttons button:focus-visible {\n outline-offset: 2px;\n}\n.sizing-buttons button:active {\n outline: 0;\n}\n.sizing-buttons button:hover {\n background-color: #39870c;\n border-color: #39870c;\n color: #fff;\n}\n.sizing-buttons button:active {\n background-color: #275937;\n border-color: #275937;\n color: #fff;\n}\n.sizing-buttons button[disabled], .sizing-buttons button[disabled]:hover {\n background-color: #fff;\n border-color: #afcf9d;\n color: #afcf9d;\n}\n.sizing-buttons button.btn-sm {\n line-height: 1rem;\n}\n.sizing-buttons button.btn-sm dso-icon,\n.sizing-buttons button.btn-sm svg.di, .sizing-buttons button.btn-sm.extern::after, .sizing-buttons button.btn-sm.download::after, .sizing-buttons button.btn-sm.dso-spinner::before {\n margin-bottom: -4px;\n margin-top: -4px;\n}\n.sizing-buttons button.btn-sm.dso-spinner-left::before {\n height: 16px;\n width: 16px;\n}\n.sizing-buttons button.btn-sm.dso-spinner-right::after {\n height: 16px;\n width: 16px;\n}\n.sizing-buttons button > span {\n position: absolute;\n width: 1px;\n height: 1px;\n padding: 0;\n margin: -1px;\n overflow: hidden;\n clip: rect(0, 0, 0, 0);\n border: 0;\n}\n.sizing-buttons button.dso-spinner-left[disabled], .sizing-buttons button.dso-spinner-right[disabled] {\n background-color: #fff;\n border-color: #39870c;\n color: #39870c;\n}\n.sizing-buttons button.dso-spinner-left::before {\n background-image: url(\"data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E .spinner %7B animation: rotator 8s linear infinite; transform-origin: center; %7D @keyframes rotator %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D .path %7B stroke-dasharray: 265; stroke-dashoffset: 0; transform-origin: center; stroke: %2339870c; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 265; %7D 50%25 %7B stroke-dashoffset: 65; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 265; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='10' stroke-linecap='butt' cx='50' cy='50' r='45'%3E%3C/circle%3E%3C/svg%3E\");\n background-repeat: no-repeat;\n content: \"\";\n display: inline-block;\n height: 24px;\n vertical-align: top;\n width: 24px;\n margin-right: 8px;\n}\n.sizing-buttons button.dso-spinner-left:not([disabled]):hover::before {\n background-image: url(\"data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E .spinner %7B animation: rotator 8s linear infinite; transform-origin: center; %7D @keyframes rotator %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D .path %7B stroke-dasharray: 265; stroke-dashoffset: 0; transform-origin: center; stroke: %23fff; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 265; %7D 50%25 %7B stroke-dashoffset: 65; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 265; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='10' stroke-linecap='butt' cx='50' cy='50' r='45'%3E%3C/circle%3E%3C/svg%3E\");\n background-repeat: no-repeat;\n content: \"\";\n display: inline-block;\n height: 24px;\n vertical-align: top;\n width: 24px;\n margin-right: 8px;\n}\n.sizing-buttons button.dso-spinner-left:not([disabled]).btn-sm:hover::before {\n height: 16px;\n width: 16px;\n}\n.sizing-buttons button.dso-spinner-right::after {\n background-image: url(\"data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E .spinner %7B animation: rotator 8s linear infinite; transform-origin: center; %7D @keyframes rotator %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D .path %7B stroke-dasharray: 265; stroke-dashoffset: 0; transform-origin: center; stroke: %2339870c; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 265; %7D 50%25 %7B stroke-dashoffset: 65; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 265; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='10' stroke-linecap='butt' cx='50' cy='50' r='45'%3E%3C/circle%3E%3C/svg%3E\");\n background-repeat: no-repeat;\n content: \"\";\n display: inline-block;\n height: 24px;\n vertical-align: top;\n width: 24px;\n margin-left: 8px;\n}\n.sizing-buttons button.dso-spinner-right:not([disabled]):hover::after {\n background-image: url(\"data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E .spinner %7B animation: rotator 8s linear infinite; transform-origin: center; %7D @keyframes rotator %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D .path %7B stroke-dasharray: 265; stroke-dashoffset: 0; transform-origin: center; stroke: %23fff; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 265; %7D 50%25 %7B stroke-dashoffset: 65; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 265; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='10' stroke-linecap='butt' cx='50' cy='50' r='45'%3E%3C/circle%3E%3C/svg%3E\");\n background-repeat: no-repeat;\n content: \"\";\n display: inline-block;\n height: 24px;\n vertical-align: top;\n width: 24px;\n margin-left: 8px;\n}\n.sizing-buttons button.dso-spinner-right:not([disabled]).btn-sm:hover::after {\n height: 16px;\n width: 16px;\n}\n.sizing-buttons button:focus-visible {\n background-color: #39870c;\n border-color: #39870c;\n color: #fff;\n outline: none;\n}\n.sizing-buttons button:hover dso-icon {\n color: #fff;\n}\n\n.map {\n height: 100%;\n width: 100%;\n overflow: hidden;\n}\n\n.filterpanel,\n.overlay {\n background-color: #fff;\n height: 100%;\n overflow-y: auto;\n position: absolute;\n z-index: 101;\n}\n\n.filterpanel {\n box-shadow: 2px 0 5px #666;\n padding: 40px 16px 8px;\n left: 0;\n max-width: 896px;\n width: calc(100vw - 40px);\n}\n@media screen and (max-width: 768px) {\n .filterpanel {\n width: 100vw;\n }\n .filterpanel::before {\n display: none !important;\n }\n}\n.filterpanel::before {\n content: \"\";\n display: block;\n position: fixed;\n top: 0;\n bottom: 0;\n right: 0;\n left: 896px;\n background-color: rgba(0, 0, 0, 0.5);\n}\n@media screen and (max-width: 936px) {\n .filterpanel::before {\n left: auto;\n width: 40px;\n }\n}\n\n.overlay {\n box-shadow: -2px 0 5px #666;\n padding: 40px 16px 8px;\n right: 0;\n width: 624px;\n}\n@media screen and (max-width: 624px) {\n .overlay {\n width: 100vw;\n }\n}\n\n.dimscreen {\n position: fixed;\n top: 0;\n bottom: 0;\n left: 0;\n right: 624px;\n background-color: rgba(0, 0, 0, 0.5);\n z-index: 102;\n}\n\n.filterpanel-buttons {\n text-align: right;\n}\n.filterpanel-buttons .cancel-button {\n display: inline-block;\n font-size: 1em;\n font-weight: 500;\n margin-bottom: 0;\n text-decoration: none;\n touch-action: manipulation;\n text-align: left;\n user-select: none;\n vertical-align: middle;\n background-color: #fff;\n border-color: #39870c;\n color: #39870c;\n border-width: 1px;\n border-style: solid;\n border-radius: 4px;\n line-height: 1.5;\n min-width: 56px;\n padding: 11px 15px;\n line-height: 1rem;\n}\n.filterpanel-buttons .cancel-button:focus, .filterpanel-buttons .cancel-button:focus-visible {\n outline-offset: 2px;\n}\n.filterpanel-buttons .cancel-button:active {\n outline: 0;\n}\n.filterpanel-buttons .cancel-button:hover {\n background-color: #39870c;\n border-color: #39870c;\n color: #fff;\n}\n.filterpanel-buttons .cancel-button:active {\n background-color: #275937;\n border-color: #275937;\n color: #fff;\n}\n.filterpanel-buttons .cancel-button[disabled], .filterpanel-buttons .cancel-button[disabled]:hover {\n background-color: #fff;\n border-color: #afcf9d;\n color: #afcf9d;\n}\n.filterpanel-buttons .cancel-button.btn-sm {\n line-height: 1rem;\n}\n.filterpanel-buttons .cancel-button.btn-sm dso-icon,\n.filterpanel-buttons .cancel-button.btn-sm svg.di, .filterpanel-buttons .cancel-button.btn-sm.extern::after, .filterpanel-buttons .cancel-button.btn-sm.download::after, .filterpanel-buttons .cancel-button.btn-sm.dso-spinner::before {\n margin-bottom: -4px;\n margin-top: -4px;\n}\n.filterpanel-buttons .cancel-button.btn-sm.dso-spinner-left::before {\n height: 16px;\n width: 16px;\n}\n.filterpanel-buttons .cancel-button.btn-sm.dso-spinner-right::after {\n height: 16px;\n width: 16px;\n}\n.filterpanel-buttons .cancel-button dso-icon,\n.filterpanel-buttons .cancel-button svg.di {\n margin-left: -8px;\n margin-right: 8px;\n}\n.filterpanel-buttons .cancel-button span + dso-icon,\n.filterpanel-buttons .cancel-button span + svg.di {\n margin-left: 8px;\n margin-right: -8px;\n}\n.filterpanel-buttons .cancel-button.dso-spinner-left[disabled], .filterpanel-buttons .cancel-button.dso-spinner-right[disabled] {\n background-color: #fff;\n border-color: #39870c;\n color: #39870c;\n}\n.filterpanel-buttons .cancel-button.dso-spinner-left::before {\n background-image: url(\"data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E .spinner %7B animation: rotator 8s linear infinite; transform-origin: center; %7D @keyframes rotator %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D .path %7B stroke-dasharray: 265; stroke-dashoffset: 0; transform-origin: center; stroke: %2339870c; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 265; %7D 50%25 %7B stroke-dashoffset: 65; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 265; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='10' stroke-linecap='butt' cx='50' cy='50' r='45'%3E%3C/circle%3E%3C/svg%3E\");\n background-repeat: no-repeat;\n content: \"\";\n display: inline-block;\n height: 24px;\n vertical-align: top;\n width: 24px;\n margin-right: 8px;\n}\n.filterpanel-buttons .cancel-button.dso-spinner-left:not([disabled]):hover::before {\n background-image: url(\"data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E .spinner %7B animation: rotator 8s linear infinite; transform-origin: center; %7D @keyframes rotator %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D .path %7B stroke-dasharray: 265; stroke-dashoffset: 0; transform-origin: center; stroke: %23fff; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 265; %7D 50%25 %7B stroke-dashoffset: 65; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 265; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='10' stroke-linecap='butt' cx='50' cy='50' r='45'%3E%3C/circle%3E%3C/svg%3E\");\n background-repeat: no-repeat;\n content: \"\";\n display: inline-block;\n height: 24px;\n vertical-align: top;\n width: 24px;\n margin-right: 8px;\n}\n.filterpanel-buttons .cancel-button.dso-spinner-left:not([disabled]).btn-sm:hover::before {\n height: 16px;\n width: 16px;\n}\n.filterpanel-buttons .cancel-button.dso-spinner-right::after {\n background-image: url(\"data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E .spinner %7B animation: rotator 8s linear infinite; transform-origin: center; %7D @keyframes rotator %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D .path %7B stroke-dasharray: 265; stroke-dashoffset: 0; transform-origin: center; stroke: %2339870c; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 265; %7D 50%25 %7B stroke-dashoffset: 65; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 265; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='10' stroke-linecap='butt' cx='50' cy='50' r='45'%3E%3C/circle%3E%3C/svg%3E\");\n background-repeat: no-repeat;\n content: \"\";\n display: inline-block;\n height: 24px;\n vertical-align: top;\n width: 24px;\n margin-left: 8px;\n}\n.filterpanel-buttons .cancel-button.dso-spinner-right:not([disabled]):hover::after {\n background-image: url(\"data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E .spinner %7B animation: rotator 8s linear infinite; transform-origin: center; %7D @keyframes rotator %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D .path %7B stroke-dasharray: 265; stroke-dashoffset: 0; transform-origin: center; stroke: %23fff; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 265; %7D 50%25 %7B stroke-dashoffset: 65; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 265; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='10' stroke-linecap='butt' cx='50' cy='50' r='45'%3E%3C/circle%3E%3C/svg%3E\");\n background-repeat: no-repeat;\n content: \"\";\n display: inline-block;\n height: 24px;\n vertical-align: top;\n width: 24px;\n margin-left: 8px;\n}\n.filterpanel-buttons .cancel-button.dso-spinner-right:not([disabled]).btn-sm:hover::after {\n height: 16px;\n width: 16px;\n}\n.filterpanel-buttons .cancel-button dso-icon,\n.filterpanel-buttons .cancel-button svg.di, .filterpanel-buttons .cancel-button.extern::after, .filterpanel-buttons .cancel-button.download::after, .filterpanel-buttons .cancel-button.dso-spinner::before {\n margin-bottom: -4px;\n margin-top: -4px;\n}\n.filterpanel-buttons .cancel-button.dso-spinner-left::before {\n height: 16px;\n width: 16px;\n}\n.filterpanel-buttons .cancel-button.dso-spinner-right::after {\n height: 16px;\n width: 16px;\n}\n.filterpanel-buttons .apply-button {\n display: inline-block;\n font-size: 1em;\n font-weight: 500;\n margin-bottom: 0;\n text-decoration: none;\n touch-action: manipulation;\n text-align: left;\n user-select: none;\n vertical-align: middle;\n background-color: #39870c;\n border-color: #39870c;\n color: #fff;\n border-width: 1px;\n border-style: solid;\n border-radius: 4px;\n line-height: 1.5;\n min-width: 56px;\n padding: 11px 15px;\n line-height: 1rem;\n}\n.filterpanel-buttons .apply-button:focus, .filterpanel-buttons .apply-button:focus-visible {\n outline-offset: 2px;\n}\n.filterpanel-buttons .apply-button:active {\n outline: 0;\n}\n.filterpanel-buttons .apply-button:hover {\n background-color: #275937;\n border-color: #275937;\n color: #fff;\n}\n.filterpanel-buttons .apply-button:active {\n background-color: #15301e;\n border-color: #15301e;\n color: #fff;\n}\n.filterpanel-buttons .apply-button[disabled], .filterpanel-buttons .apply-button[disabled]:hover {\n background-color: #afcf9d;\n border-color: #afcf9d;\n color: #fff;\n}\n.filterpanel-buttons .apply-button.btn-sm {\n line-height: 1rem;\n}\n.filterpanel-buttons .apply-button.btn-sm dso-icon,\n.filterpanel-buttons .apply-button.btn-sm svg.di, .filterpanel-buttons .apply-button.btn-sm.extern::after, .filterpanel-buttons .apply-button.btn-sm.download::after, .filterpanel-buttons .apply-button.btn-sm.dso-spinner::before {\n margin-bottom: -4px;\n margin-top: -4px;\n}\n.filterpanel-buttons .apply-button.btn-sm.dso-spinner-left::before {\n height: 16px;\n width: 16px;\n}\n.filterpanel-buttons .apply-button.btn-sm.dso-spinner-right::after {\n height: 16px;\n width: 16px;\n}\n.filterpanel-buttons .apply-button dso-icon,\n.filterpanel-buttons .apply-button svg.di {\n margin-left: -8px;\n margin-right: 8px;\n}\n.filterpanel-buttons .apply-button span + dso-icon,\n.filterpanel-buttons .apply-button span + svg.di {\n margin-left: 8px;\n margin-right: -8px;\n}\n.filterpanel-buttons .apply-button.dso-spinner-left[disabled], .filterpanel-buttons .apply-button.dso-spinner-right[disabled] {\n background-color: #39870c;\n border-color: #39870c;\n color: #fff;\n}\n.filterpanel-buttons .apply-button.dso-spinner-left::before {\n background-image: url(\"data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E .spinner %7B animation: rotator 8s linear infinite; transform-origin: center; %7D @keyframes rotator %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D .path %7B stroke-dasharray: 265; stroke-dashoffset: 0; transform-origin: center; stroke: %23fff; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 265; %7D 50%25 %7B stroke-dashoffset: 65; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 265; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='10' stroke-linecap='butt' cx='50' cy='50' r='45'%3E%3C/circle%3E%3C/svg%3E\");\n background-repeat: no-repeat;\n content: \"\";\n display: inline-block;\n height: 24px;\n vertical-align: top;\n width: 24px;\n margin-right: 8px;\n}\n.filterpanel-buttons .apply-button.dso-spinner-right::after {\n background-image: url(\"data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E .spinner %7B animation: rotator 8s linear infinite; transform-origin: center; %7D @keyframes rotator %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D .path %7B stroke-dasharray: 265; stroke-dashoffset: 0; transform-origin: center; stroke: %23fff; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 265; %7D 50%25 %7B stroke-dashoffset: 65; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 265; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='10' stroke-linecap='butt' cx='50' cy='50' r='45'%3E%3C/circle%3E%3C/svg%3E\");\n background-repeat: no-repeat;\n content: \"\";\n display: inline-block;\n height: 24px;\n vertical-align: top;\n width: 24px;\n margin-left: 8px;\n}\n.filterpanel-buttons .apply-button dso-icon,\n.filterpanel-buttons .apply-button svg.di, .filterpanel-buttons .apply-button.extern::after, .filterpanel-buttons .apply-button.download::after, .filterpanel-buttons .apply-button.dso-spinner::before {\n margin-bottom: -4px;\n margin-top: -4px;\n}\n.filterpanel-buttons .apply-button.dso-spinner-left::before {\n height: 16px;\n width: 16px;\n}\n.filterpanel-buttons .apply-button.dso-spinner-right::after {\n height: 16px;\n width: 16px;\n}\n.filterpanel-buttons .cancel-button + .apply-button {\n margin-left: 16px;\n}";
17
17
 
18
18
  const ViewerGrid = class {
19
19
  constructor(hostRef) {
@@ -135,7 +135,7 @@ const ViewerGrid = class {
135
135
  this.dsoFilterpanelCancel.emit({ originalEvent: mouseEvent });
136
136
  }
137
137
  render() {
138
- return (index.h(index.Host, Object.assign({}, { [this.mainSize]: true }), index.h("div", { class: "dso-map-panel", ref: (element) => (this.mapPanel = element) }, index.h("div", { class: "sizing-buttons" }, index.h("span", { class: "sr-only", "aria-live": "polite", "aria-atomic": "true" }, "breedte tekstpaneel: ", this.sizeLabelMap[this.mainSize]), index.h("button", { type: "button", class: "shrink", disabled: this.mainSize === "small", onClick: this.shrinkMain }, index.h("span", { class: "sr-only" }, "Kaartpaneel smaller maken"), index.h("dso-icon", { icon: "chevron-left" })), index.h("button", { type: "button", class: "expand", disabled: this.mainSize === "large", onClick: this.expandMain }, index.h("span", { class: "sr-only" }, "Kaartpaneel breder maken"), index.h("dso-icon", { icon: "chevron-right" }))), index.h("div", { class: "main" }, index.h("slot", { name: "main" }))), index.h("div", { id: "filterpanel", hidden: !this.filterpanelOpen || !this.filterpanelSlot, ref: (element) => (this.filterpanel = element) }, index.h("h2", null, "Uw keuzes"), index.h(ViewerGridFilterpanelButtons, { onApply: (e) => this.handleFilterpanelApply(e), onCancel: (e) => this.handleFilterpanelCancel(e) }), index.h("slot", { name: "filterpanel" }), index.h(ViewerGridFilterpanelButtons, { onApply: (e) => this.handleFilterpanelApply(e), onCancel: (e) => this.handleFilterpanelCancel(e) })), index.h("div", { class: "map" }, index.h("slot", { name: "map" })), index.h("div", { hidden: !this.overlayOpen || !this.overlaySlot, class: "dimscreen" }), index.h("div", { class: "overlay", hidden: !this.overlayOpen || !this.overlaySlot, ref: (element) => (this.overlay = element) }, index.h("button", { type: "button", class: "overlay-close-button", onClick: (e) => this.dsoCloseOverlay.emit(e) }, index.h("dso-icon", { icon: "times" }), index.h("span", { class: "sr-only" }, "sluiten")), index.h("slot", { name: "overlay" }), index.h("button", { "aria-hidden": "true", type: "button", class: "overlay-close-button", style: { zIndex: "-100" } }, index.h("dso-icon", { icon: "times" }), index.h("span", { class: "sr-only" }, "sluiten")))));
138
+ return (index.h(index.Host, Object.assign({}, { [this.mainSize]: true }), index.h("div", { class: "dso-map-panel", ref: (element) => (this.mapPanel = element) }, index.h("div", { class: "sizing-buttons" }, index.h("span", { class: "sr-only", "aria-live": "polite", "aria-atomic": "true" }, "breedte tekstpaneel: ", this.sizeLabelMap[this.mainSize]), index.h("button", { type: "button", class: "shrink", disabled: this.mainSize === "small", onClick: this.shrinkMain }, index.h("span", { class: "sr-only" }, "Kaartpaneel smaller maken"), index.h("dso-icon", { icon: "chevron-left" })), index.h("button", { type: "button", class: "expand", disabled: this.mainSize === "large", onClick: this.expandMain }, index.h("span", { class: "sr-only" }, "Kaartpaneel breder maken"), index.h("dso-icon", { icon: "chevron-right" }))), index.h("div", { class: "main" }, index.h("slot", { name: "main" }))), index.h("div", { id: "filterpanel", class: "filterpanel", hidden: !this.filterpanelOpen || !this.filterpanelSlot, ref: (element) => (this.filterpanel = element) }, index.h("h2", null, "Uw keuzes"), index.h(ViewerGridFilterpanelButtons, { onApply: (e) => this.handleFilterpanelApply(e), onCancel: (e) => this.handleFilterpanelCancel(e) }), index.h("slot", { name: "filterpanel" }), index.h(ViewerGridFilterpanelButtons, { onApply: (e) => this.handleFilterpanelApply(e), onCancel: (e) => this.handleFilterpanelCancel(e) })), index.h("div", { class: "map" }, index.h("slot", { name: "map" })), index.h("div", { hidden: !this.overlayOpen || !this.overlaySlot, class: "dimscreen" }), index.h("div", { class: "overlay", hidden: !this.overlayOpen || !this.overlaySlot, ref: (element) => (this.overlay = element) }, index.h("button", { type: "button", class: "overlay-close-button", onClick: (e) => this.dsoCloseOverlay.emit(e) }, index.h("dso-icon", { icon: "times" }), index.h("span", { class: "sr-only" }, "sluiten")), index.h("slot", { name: "overlay" }), index.h("button", { "aria-hidden": "true", type: "button", class: "overlay-close-button", style: { zIndex: "-100" } }, index.h("dso-icon", { icon: "times" }), index.h("span", { class: "sr-only" }, "sluiten")))));
139
139
  }
140
140
  get host() { return index.getElement(this); }
141
141
  static get watchers() { return {