@dso-toolkit/core 62.18.0 → 62.20.0

package/dist/components/dso-map-controls.js

@@ -3,105 +3,106 @@ import { d as defineCustomElement$3 } from './icon.js';
 import { d as defineCustomElement$2 } from './scrollable.js';
 
 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:host([open]) .zoom-buttons {\n  top: 16px;\n}\n\nbutton {\n  -webkit-appearance: button;\n  color: inherit;\n  cursor: pointer;\n  font: inherit;\n  font-family: inherit;\n  font-size: inherit;\n  line-height: inherit;\n  margin: 0;\n  overflow: visible;\n  text-transform: none;\n}\nbutton[disabled] {\n  cursor: default;\n}\nbutton::-moz-focus-inner {\n  border: 0;\n  padding: 0;\n}\n\n.toggle-visibility-button {\n  display: inline-block;\n  font-size: 1em;\n  font-weight: 500;\n  margin-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.dso-small {\n  line-height: 1rem;\n}\n.toggle-visibility-button.dso-small dso-icon,\n.toggle-visibility-button.dso-small svg.di, .toggle-visibility-button.dso-small.extern::after, .toggle-visibility-button.dso-small.download::after, .toggle-visibility-button.dso-small.dso-spinner::before {\n  margin-bottom: -4px;\n  margin-top: -4px;\n}\n.toggle-visibility-button.dso-small.dso-spinner-left::before {\n  height: 16px;\n  width: 16px;\n}\n.toggle-visibility-button.dso-small.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]).dso-small: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]).dso-small: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.dso-small {\n  line-height: 1rem;\n}\n.zoom-buttons button.dso-small dso-icon,\n.zoom-buttons button.dso-small svg.di, .zoom-buttons button.dso-small.extern::after, .zoom-buttons button.dso-small.download::after, .zoom-buttons button.dso-small.dso-spinner::before {\n  margin-bottom: -4px;\n  margin-top: -4px;\n}\n.zoom-buttons button.dso-small.dso-spinner-left::before {\n  height: 16px;\n  width: 16px;\n}\n.zoom-buttons button.dso-small.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]).dso-small: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]).dso-small: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: #275937;\n  text-decoration: underline;\n  text-underline-position: under;\n}\n.close-button:not([disabled]):active {\n  color: #173521;\n}\n.close-button.dso-align {\n  line-height: calc(1.5em - 1px);\n  padding: 11px 0;\n  position: relative;\n}\n.close-button.dso-truncate {\n  max-width: 100%;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n.close-button.dso-spinner-left::before {\n  background-image: url(\"data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E .spinner %7B animation: rotator 8s linear infinite; transform-origin: center; %7D @keyframes rotator %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D .path %7B stroke-dasharray: 265; stroke-dashoffset: 0; transform-origin: center; stroke: %2339870c; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 265; %7D 50%25 %7B stroke-dashoffset: 65; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 265; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='10' stroke-linecap='butt' cx='50' cy='50' r='45'%3E%3C/circle%3E%3C/svg%3E\");\n  background-repeat: no-repeat;\n  content: \"\";\n  display: inline-block;\n  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@media screen and (max-width: 767px) {\n  .toggle-visibility-button {\n    height: 40px;\n    margin-right: 0;\n    min-width: auto;\n    right: calc(100% + 16px);\n    width: 40px;\n  }\n  .toggle-visibility-button dso-icon {\n    margin-right: 0;\n  }\n  .toggle-visibility-button span {\n    visibility: hidden;\n  }\n  .zoom-buttons {\n    top: 72px;\n  }\n}";
+const DsoMapControlsStyle0 = mapControlsCss;
 
 var __classPrivateFieldGet = (undefined && undefined.__classPrivateFieldGet) || function (receiver, state, kind, f) {
-  if (kind === "a" && !f)
-    throw new TypeError("Private accessor was defined without a getter");
-  if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver))
-    throw new TypeError("Cannot read private member from an object whose class did not declare it");
-  return kind === "m" ? f : kind === "a" ? f.call(receiver) : f ? f.value : state.get(receiver);
+    if (kind === "a" && !f)
+        throw new TypeError("Private accessor was defined without a getter");
+    if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver))
+        throw new TypeError("Cannot read private member from an object whose class did not declare it");
+    return kind === "m" ? f : kind === "a" ? f.call(receiver) : f ? f.value : state.get(receiver);
 };
 var __classPrivateFieldSet = (undefined && undefined.__classPrivateFieldSet) || function (receiver, state, value, kind, f) {
-  if (kind === "m")
-    throw new TypeError("Private method is not writable");
-  if (kind === "a" && !f)
-    throw new TypeError("Private accessor was defined without a setter");
-  if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver))
-    throw new TypeError("Cannot write private member to an object whose class did not declare it");
-  return (kind === "a" ? f.call(receiver, value) : f ? f.value = value : state.set(receiver, value)), value;
+    if (kind === "m")
+        throw new TypeError("Private method is not writable");
+    if (kind === "a" && !f)
+        throw new TypeError("Private accessor was defined without a setter");
+    if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver))
+        throw new TypeError("Cannot write private member to an object whose class did not declare it");
+    return (kind === "a" ? f.call(receiver, value) : f ? f.value = value : state.set(receiver, value)), value;
 };
 var _MapControls_closeButtonElement, _MapControls_toggleButtonElement;
 // Sync with $transition-duration in ./map-controls.scss
 const transitionDuration = 300;
 const MapControls = /*@__PURE__*/ proxyCustomElement(class MapControls extends HTMLElement {
-  constructor() {
-    super();
-    this.__registerHost();
-    this.__attachShadow();
-    this.dsoZoomIn = createEvent(this, "dsoZoomIn", 7);
-    this.dsoZoomOut = createEvent(this, "dsoZoomOut", 7);
-    this.dsoToggle = createEvent(this, "dsoToggle", 7);
-    this.panelTitle = "Kaartlagen";
-    _MapControls_closeButtonElement.set(this, void 0);
-    _MapControls_toggleButtonElement.set(this, void 0);
-    this.open = false;
-    this.disableZoom = undefined;
-    this.hideContent = !this.open;
-  }
-  watchOpen(open) {
-    if (open) {
-      this.hideContent = false;
-      setTimeout(() => { var _a; return (_a = __classPrivateFieldGet(this, _MapControls_closeButtonElement, "f")) === null || _a === void 0 ? void 0 : _a.focus(); }, transitionDuration);
+    constructor() {
+        super();
+        this.__registerHost();
+        this.__attachShadow();
+        this.dsoZoomIn = createEvent(this, "dsoZoomIn", 7);
+        this.dsoZoomOut = createEvent(this, "dsoZoomOut", 7);
+        this.dsoToggle = createEvent(this, "dsoToggle", 7);
+        this.panelTitle = "Kaartlagen";
+        _MapControls_closeButtonElement.set(this, void 0);
+        _MapControls_toggleButtonElement.set(this, void 0);
+        this.open = false;
+        this.disableZoom = undefined;
+        this.hideContent = !this.open;
     }
-    else {
-      setTimeout(() => {
-        var _a;
-        this.hideContent = true;
-        (_a = __classPrivateFieldGet(this, _MapControls_toggleButtonElement, "f")) === null || _a === void 0 ? void 0 : _a.focus();
-      }, transitionDuration);
+    watchOpen(open) {
+        if (open) {
+            this.hideContent = false;
+            setTimeout(() => { var _a; return (_a = __classPrivateFieldGet(this, _MapControls_closeButtonElement, "f")) === null || _a === void 0 ? void 0 : _a.focus(); }, transitionDuration);
+        }
+        else {
+            setTimeout(() => {
+                var _a;
+                this.hideContent = true;
+                (_a = __classPrivateFieldGet(this, _MapControls_toggleButtonElement, "f")) === null || _a === void 0 ? void 0 : _a.focus();
+            }, transitionDuration);
+        }
     }
-  }
-  /**
-   * Emitted when the visibility is toggled.
-   *
-   * Can be used to recalculate map widths or reposition center when the Map Controls opens or closes.
-   * @param e
-   */
-  async toggleVisibility(e) {
-    this.open = !this.open;
-    this.dsoToggle.emit({
-      originalEvent: e,
-      open: this.open,
-    });
-  }
-  render() {
-    return (h(Host, null, h("button", { type: "button", id: "toggle-visibility-button", class: "toggle-visibility-button", onClick: (e) => this.toggleVisibility(e), ref: (element) => (__classPrivateFieldSet(this, _MapControls_toggleButtonElement, element, "f")) }, h("dso-icon", { icon: "layers" }), h("span", null, "Kaartlagen")), h("div", { class: "zoom-buttons" }, h("button", { type: "button", onClick: (e) => this.dsoZoomIn.emit(e), disabled: this.disableZoom === "in" || this.disableZoom === "both" }, h("span", null, "Zoom in"), h("dso-icon", { icon: "plus" })), h("button", { type: "button", onClick: (e) => this.dsoZoomOut.emit(e), disabled: this.disableZoom === "out" || this.disableZoom === "both" }, h("span", null, "Zoom uit"), h("dso-icon", { icon: "minus" }))), h("section", { hidden: this.hideContent }, h("header", null, h("h2", null, this.panelTitle), h("button", { type: "button", class: "close-button", onClick: (e) => this.toggleVisibility(e), ref: (element) => (__classPrivateFieldSet(this, _MapControls_closeButtonElement, element, "f")) }, h("span", null, "Verberg paneel ", this.panelTitle), h("dso-icon", { icon: "times" }))), h("dso-scrollable", null, h("div", { class: "content" }, h("slot", null))))));
-  }
-  static get watchers() { return {
-    "open": ["watchOpen"]
-  }; }
-  static get style() { return mapControlsCss; }
+    /**
+     * Emitted when the visibility is toggled.
+     *
+     * Can be used to recalculate map widths or reposition center when the Map Controls opens or closes.
+     * @param e
+     */
+    async toggleVisibility(e) {
+        this.open = !this.open;
+        this.dsoToggle.emit({
+            originalEvent: e,
+            open: this.open,
+        });
+    }
+    render() {
+        return (h(Host, { key: '6950f24986448fe7b9ad55e63a27c3435582078f' }, h("button", { key: '5b1fd3a10690d47db03b4e80fe30beffc4ab9658', type: "button", id: "toggle-visibility-button", class: "toggle-visibility-button", onClick: (e) => this.toggleVisibility(e), ref: (element) => (__classPrivateFieldSet(this, _MapControls_toggleButtonElement, element, "f")) }, h("dso-icon", { key: '364f0679306f247a5c6a589ad0885b014e0be5f5', icon: "layers" }), h("span", { key: '5409d0555edd3e7406b215fb430c9a4d71943460' }, "Kaartlagen")), h("div", { key: '0e9db2dca0b5065f86926232138933b402eb73df', class: "zoom-buttons" }, h("button", { key: 'd8bb302ba4d9a3719c6525cea58da8cc98620e34', type: "button", onClick: (e) => this.dsoZoomIn.emit(e), disabled: this.disableZoom === "in" || this.disableZoom === "both" }, h("span", { key: '3bdb813abd79cd05a2290068d0bd76410679f293' }, "Zoom in"), h("dso-icon", { key: '853a2cf598baf24e6d152611fe9b663a674db6e8', icon: "plus" })), h("button", { key: '909320d8ecd4edb12d0bb33e90300f36a2e49c6c', type: "button", onClick: (e) => this.dsoZoomOut.emit(e), disabled: this.disableZoom === "out" || this.disableZoom === "both" }, h("span", { key: '2b83cf1a9c8c869684c166f2faa5eaebaef965e4' }, "Zoom uit"), h("dso-icon", { key: '03145fbd10e9fa812984e0ec30bc36e015df61d7', icon: "minus" }))), h("section", { key: '3c2ade46c0f4d60f2e8cd983e549206ea8f71a62', hidden: this.hideContent }, h("header", { key: '80e7a2df9559af79525e8d5feb128a906c44c102' }, h("h2", { key: '1b68c5f1edc27316bd88aecdfb087f4b3d20ef94' }, this.panelTitle), h("button", { key: '9b99c5cd792825d6fcf1612394a762a4bb5780d3', type: "button", class: "close-button", onClick: (e) => this.toggleVisibility(e), ref: (element) => (__classPrivateFieldSet(this, _MapControls_closeButtonElement, element, "f")) }, h("span", { key: '218e01f23755c5ced6fc97fdbee6f4c5e53fb993' }, "Verberg paneel ", this.panelTitle), h("dso-icon", { key: '9c296759f7088b175c64883fa6dfc489d66b4392', icon: "times" }))), h("dso-scrollable", { key: '9f1426e147a8a9904e55d4280194ae256c842d5d' }, h("div", { key: '2f9d201a4e1d20265297de0c7b9431ba368fff0a', class: "content" }, h("slot", { key: '6ad26388a3c216ff78395567597ddb93320f1223' }))))));
+    }
+    static get watchers() { return {
+        "open": ["watchOpen"]
+    }; }
+    static get style() { return DsoMapControlsStyle0; }
 }, [1, "dso-map-controls", {
-    "open": [1540],
-    "disableZoom": [1, "disable-zoom"],
-    "hideContent": [32],
-    "toggleVisibility": [64]
-  }, undefined, {
-    "open": ["watchOpen"]
-  }]);
+        "open": [1540],
+        "disableZoom": [1, "disable-zoom"],
+        "hideContent": [32],
+        "toggleVisibility": [64]
+    }, undefined, {
+        "open": ["watchOpen"]
+    }]);
 _MapControls_closeButtonElement = new WeakMap(), _MapControls_toggleButtonElement = new WeakMap();
 function defineCustomElement$1() {
-  if (typeof customElements === "undefined") {
-    return;
-  }
-  const components = ["dso-map-controls", "dso-icon", "dso-scrollable"];
-  components.forEach(tagName => { switch (tagName) {
-    case "dso-map-controls":
-      if (!customElements.get(tagName)) {
-        customElements.define(tagName, MapControls);
-      }
-      break;
-    case "dso-icon":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$3();
-      }
-      break;
-    case "dso-scrollable":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$2();
-      }
-      break;
-  } });
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["dso-map-controls", "dso-icon", "dso-scrollable"];
+    components.forEach(tagName => { switch (tagName) {
+        case "dso-map-controls":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, MapControls);
+            }
+            break;
+        case "dso-icon":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$3();
+            }
+            break;
+        case "dso-scrollable":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$2();
+            }
+            break;
+    } });
 }
 
 const DsoMapControls = MapControls;

package/dist/components/dso-map-controls.js.map

@@ -1 +1 @@
-{"file":"dso-map-controls.js","mappings":";;;;AAAA,MAAM,cAAc,GAAG,s5jBAAs5jB;;;;;;;;;;;;;;;;;;;ACG76jB;AACA,MAAM,kBAAkB,GAAG,GAAG,CAAC;MAOlB,WAAW;;;;;;;;IACd,eAAU,GAAG,YAAY,CAAC;IAyElC,kDAAmD;IACnD,mDAAoD;gBApE7C,KAAK;;uBAkCE,CAAC,IAAI,CAAC,IAAI;;EAGxB,SAAS,CAAC,IAAa;IACrB,IAAI,IAAI,EAAE;MACR,IAAI,CAAC,WAAW,GAAG,KAAK,CAAC;MAEzB,UAAU,CAAC,gBAAM,OAAA,MAAA,uBAAA,IAAI,uCAAoB,0CAAE,KAAK,EAAE,CAAA,EAAA,EAAE,kBAAkB,CAAC,CAAC;KACzE;SAAM;MACL,UAAU,CAAC;;QACT,IAAI,CAAC,WAAW,GAAG,IAAI,CAAC;QAExB,MAAA,uBAAA,IAAI,wCAAqB,0CAAE,KAAK,EAAE,CAAC;OACpC,EAAE,kBAAkB,CAAC,CAAC;KACxB;GACF;;;;;;;EASD,MAAM,gBAAgB,CAAC,CAA6B;IAClD,IAAI,CAAC,IAAI,GAAG,CAAC,IAAI,CAAC,IAAI,CAAC;IAEvB,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC;MAClB,aAAa,EAAE,CAAC;MAChB,IAAI,EAAE,IAAI,CAAC,IAAI;KAChB,CAAC,CAAC;GACJ;EAKD,MAAM;IACJ,QACE,EAAC,IAAI,QACH,cACE,IAAI,EAAC,QAAQ,EACb,EAAE,EAAC,0BAA0B,EAC7B,KAAK,EAAC,0BAA0B,EAChC,OAAO,EAAE,CAAC,CAAC,KAAK,IAAI,CAAC,gBAAgB,CAAC,CAAC,CAAC,EACxC,GAAG,EAAE,CAAC,OAAO,MAAM,uBAAA,IAAI,oCAAwB,OAAO,MAAA,CAAC,IAEvD,gBAAU,IAAI,EAAC,QAAQ,GAAY,EACnC,6BAAuB,CAChB,EACT,WAAK,KAAK,EAAC,cAAc,IACvB,cACE,IAAI,EAAC,QAAQ,EACb,OAAO,EAAE,CAAC,CAAC,KAAK,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,CAAC,CAAC,EACtC,QAAQ,EAAE,IAAI,CAAC,WAAW,KAAK,IAAI,IAAI,IAAI,CAAC,WAAW,KAAK,MAAM,IAElE,0BAAoB,EACpB,gBAAU,IAAI,EAAC,MAAM,GAAY,CAC1B,EACT,cACE,IAAI,EAAC,QAAQ,EACb,OAAO,EAAE,CAAC,CAAC,KAAK,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,CAAC,CAAC,EACvC,QAAQ,EAAE,IAAI,CAAC,WAAW,KAAK,KAAK,IAAI,IAAI,CAAC,WAAW,KAAK,MAAM,IAEnE,2BAAqB,EACrB,gBAAU,IAAI,EAAC,OAAO,GAAY,CAC3B,CACL,EACN,eAAS,MAAM,EAAE,IAAI,CAAC,WAAW,IAC/B,kBACE,cAAK,IAAI,CAAC,UAAU,CAAM,EAC1B,cACE,IAAI,EAAC,QAAQ,EACb,KAAK,EAAC,cAAc,EACpB,OAAO,EAAE,CAAC,CAAC,KAAK,IAAI,CAAC,gBAAgB,CAAC,CAAC,CAAC,EACxC,GAAG,EAAE,CAAC,OAAO,MAAM,uBAAA,IAAI,mCAAuB,OAAO,MAAA,CAAC,IAEtD,mCAAsB,IAAI,CAAC,UAAU,CAAQ,EAC7C,gBAAU,IAAI,EAAC,OAAO,GAAY,CAC3B,CACF,EACT,0BACE,WAAK,KAAK,EAAC,SAAS,IAClB,eAAa,CACT,CACS,CACT,CACL,EACP;GACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/map-controls/map-controls.scss?tag=dso-map-controls&encapsulation=shadow","src/components/map-controls/map-controls.tsx"],"sourcesContent":["@use \"~dso-toolkit/src/utilities\";\r\n@use \"~dso-toolkit/src/variables/colors\";\r\n@use \"~dso-toolkit/src/variables/media-query-breakpoints\";\r\n@use \"~dso-toolkit/src/variables/typography\";\r\n@use \"~dso-toolkit/src/variables/units\";\r\n@use \"~dso-toolkit/src/components/button\";\r\n\r\n@use \"map-controls.variables\" as core-map-controls-variables;\r\n\r\n:host {\r\n  background-color: colors.$wit;\r\n  border: 1px solid colors.$grijs-20;\r\n  bottom: 0;\r\n  display: block;\r\n  font-family: typography.$font-family-base;\r\n  position: absolute;\r\n  top: 0;\r\n  left: 100%;\r\n  transition: transform core-map-controls-variables.$transition-duration ease;\r\n  width: 300px;\r\n}\r\n\r\n@include utilities.box-sizing();\r\n\r\n:host([open]) {\r\n  box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.3);\r\n  transform: translateX(-100%);\r\n\r\n  .toggle-visibility-button {\r\n    display: none;\r\n  }\r\n\r\n  .zoom-buttons {\r\n    top: units.$u2;\r\n  }\r\n}\r\n\r\nbutton {\r\n  @include button.element();\r\n}\r\n\r\n.toggle-visibility-button {\r\n  @include button.map();\r\n\r\n  position: absolute;\r\n  right: calc(100% + #{core-map-controls-variables.$controls-margin + core-map-controls-variables.$zoom-button-size});\r\n  top: core-map-controls-variables.$controls-margin;\r\n}\r\n\r\n.zoom-buttons {\r\n  border-radius: 4px;\r\n  box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.5);\r\n  display: flex;\r\n  flex-wrap: wrap;\r\n  flex: 0 0;\r\n  position: absolute;\r\n  right: calc(100% + core-map-controls-variables.$controls-margin);\r\n  top: core-map-controls-variables.$controls-margin;\r\n\r\n  button {\r\n    @include button.secondary($modifiers: false, $icon-only: true);\r\n    @include button.map-focus();\r\n\r\n    border: 0;\r\n    padding: 8px;\r\n    border-radius: 0;\r\n    border-top-left-radius: 4px;\r\n    border-top-right-radius: 4px;\r\n    flex: 0 0 100%;\r\n    height: core-map-controls-variables.$zoom-button-size;\r\n    min-width: auto;\r\n    width: core-map-controls-variables.$zoom-button-size;\r\n\r\n    + button {\r\n      border-radius: 0;\r\n      border-bottom-left-radius: 4px;\r\n      border-bottom-right-radius: 4px;\r\n      border-top: 1px solid colors.$grijs-20;\r\n    }\r\n  }\r\n}\r\n\r\n.close-button {\r\n  @include button.tertiary($modifiers: false, $icon-only: true);\r\n\r\n  padding: 0;\r\n  position: absolute;\r\n  right: core-map-controls-variables.$controls-margin;\r\n  top: core-map-controls-variables.$controls-margin;\r\n}\r\n\r\nsection:not([hidden]) {\r\n  display: flex;\r\n  flex-direction: column;\r\n  height: 100%;\r\n}\r\n\r\nheader,\r\n.content {\r\n  padding: units.$u2;\r\n}\r\n\r\nheader {\r\n  border-bottom: 1px solid colors.$grijs-20;\r\n  flex-grow: 0;\r\n  position: relative;\r\n\r\n  h2 {\r\n    color: colors.$bosgroen;\r\n    font-family: typography.$headings-font-family;\r\n    line-height: 1;\r\n    margin: 0;\r\n  }\r\n}\r\n\r\n@media screen and (max-width: media-query-breakpoints.$screen-xs-max) {\r\n  .toggle-visibility-button {\r\n    height: units.$u5;\r\n    margin-right: 0;\r\n    min-width: auto;\r\n    right: calc(100% + core-map-controls-variables.$controls-margin);\r\n    width: units.$u5;\r\n\r\n    dso-icon {\r\n      margin-right: 0;\r\n    }\r\n\r\n    span {\r\n      visibility: hidden;\r\n    }\r\n  }\r\n\r\n  .zoom-buttons {\r\n    top: units.$u9;\r\n  }\r\n}\r\n","import { Component, h, Host, Prop, Event, EventEmitter, State, Watch, Method } from \"@stencil/core\";\r\nimport { MapControlsToggleEvent } from \"./map-controls.interfaces\";\r\n\r\n// Sync with $transition-duration in ./map-controls.scss\r\nconst transitionDuration = 300;\r\n\r\n@Component({\r\n  tag: \"dso-map-controls\",\r\n  styleUrl: \"./map-controls.scss\",\r\n  shadow: true,\r\n})\r\nexport class MapControls {\r\n  private panelTitle = \"Kaartlagen\";\r\n\r\n  /**\r\n   * To show and hide the Map Controls.\r\n   */\r\n  @Prop({ reflect: true, mutable: true })\r\n  open = false;\r\n\r\n  /**\r\n   * To disable the zoom controls:\r\n   *\r\n   * * `in`: Disable zoom in button.\r\n   * * `out`: Disable zoom out button.\r\n   * * `both`: Disable zoom in and zoom out.\r\n   */\r\n  @Prop()\r\n  disableZoom?: \"in\" | \"out\" | \"both\";\r\n\r\n  /**\r\n   * Emitted when the user activates the zoom in button.\r\n   */\r\n  @Event()\r\n  dsoZoomIn!: EventEmitter<MouseEvent>;\r\n\r\n  /**\r\n   * Emitted when the user activates the zoom out button.\r\n   */\r\n  @Event()\r\n  dsoZoomOut!: EventEmitter<MouseEvent>;\r\n\r\n  /**\r\n   * emits when the panel opens or closes.\r\n   *\r\n   * - `event.detail.originalEvent` contains the original `MouseEvent / KeyboardEvent` when the panel is toggled by clicking the visibility button or the close button.\r\n   * - `event.detail.open` is true when the panel opens and false when the panel closes.\r\n   */\r\n  @Event()\r\n  dsoToggle!: EventEmitter<MapControlsToggleEvent>;\r\n\r\n  @State()\r\n  hideContent = !this.open;\r\n\r\n  @Watch(\"open\")\r\n  watchOpen(open: boolean) {\r\n    if (open) {\r\n      this.hideContent = false;\r\n\r\n      setTimeout(() => this.#closeButtonElement?.focus(), transitionDuration);\r\n    } else {\r\n      setTimeout(() => {\r\n        this.hideContent = true;\r\n\r\n        this.#toggleButtonElement?.focus();\r\n      }, transitionDuration);\r\n    }\r\n  }\r\n\r\n  /**\r\n   * Emitted when the visibility is toggled.\r\n   *\r\n   * Can be used to recalculate map widths or reposition center when the Map Controls opens or closes.\r\n   * @param e\r\n   */\r\n  @Method()\r\n  async toggleVisibility(e: MouseEvent | KeyboardEvent) {\r\n    this.open = !this.open;\r\n\r\n    this.dsoToggle.emit({\r\n      originalEvent: e,\r\n      open: this.open,\r\n    });\r\n  }\r\n\r\n  #closeButtonElement: HTMLButtonElement | undefined;\r\n  #toggleButtonElement: HTMLButtonElement | undefined;\r\n\r\n  render() {\r\n    return (\r\n      <Host>\r\n        <button\r\n          type=\"button\"\r\n          id=\"toggle-visibility-button\"\r\n          class=\"toggle-visibility-button\"\r\n          onClick={(e) => this.toggleVisibility(e)}\r\n          ref={(element) => (this.#toggleButtonElement = element)}\r\n        >\r\n          <dso-icon icon=\"layers\"></dso-icon>\r\n          <span>Kaartlagen</span>\r\n        </button>\r\n        <div class=\"zoom-buttons\">\r\n          <button\r\n            type=\"button\"\r\n            onClick={(e) => this.dsoZoomIn.emit(e)}\r\n            disabled={this.disableZoom === \"in\" || this.disableZoom === \"both\"}\r\n          >\r\n            <span>Zoom in</span>\r\n            <dso-icon icon=\"plus\"></dso-icon>\r\n          </button>\r\n          <button\r\n            type=\"button\"\r\n            onClick={(e) => this.dsoZoomOut.emit(e)}\r\n            disabled={this.disableZoom === \"out\" || this.disableZoom === \"both\"}\r\n          >\r\n            <span>Zoom uit</span>\r\n            <dso-icon icon=\"minus\"></dso-icon>\r\n          </button>\r\n        </div>\r\n        <section hidden={this.hideContent}>\r\n          <header>\r\n            <h2>{this.panelTitle}</h2>\r\n            <button\r\n              type=\"button\"\r\n              class=\"close-button\"\r\n              onClick={(e) => this.toggleVisibility(e)}\r\n              ref={(element) => (this.#closeButtonElement = element)}\r\n            >\r\n              <span>Verberg paneel {this.panelTitle}</span>\r\n              <dso-icon icon=\"times\"></dso-icon>\r\n            </button>\r\n          </header>\r\n          <dso-scrollable>\r\n            <div class=\"content\">\r\n              <slot></slot>\r\n            </div>\r\n          </dso-scrollable>\r\n        </section>\r\n      </Host>\r\n    );\r\n  }\r\n}\r\n"],"version":3}
+{"file":"dso-map-controls.js","mappings":";;;;AAAA,MAAM,cAAc,GAAG,s5jBAAs5jB,CAAC;AAC96jB,6BAAe,cAAc;;;;;;;;;;;;;;;;;;;ACE7B;AACA,MAAM,kBAAkB,GAAG,GAAG,CAAC;MAOlB,WAAW;;;;;;;;QACd,eAAU,GAAG,YAAY,CAAC;QAyElC,kDAAmD;QACnD,mDAAoD;oBApE7C,KAAK;;2BAkCE,CAAC,IAAI,CAAC,IAAI;;IAGxB,SAAS,CAAC,IAAa;QACrB,IAAI,IAAI,EAAE;YACR,IAAI,CAAC,WAAW,GAAG,KAAK,CAAC;YAEzB,UAAU,CAAC,gBAAM,OAAA,MAAA,uBAAA,IAAI,uCAAoB,0CAAE,KAAK,EAAE,CAAA,EAAA,EAAE,kBAAkB,CAAC,CAAC;SACzE;aAAM;YACL,UAAU,CAAC;;gBACT,IAAI,CAAC,WAAW,GAAG,IAAI,CAAC;gBAExB,MAAA,uBAAA,IAAI,wCAAqB,0CAAE,KAAK,EAAE,CAAC;aACpC,EAAE,kBAAkB,CAAC,CAAC;SACxB;KACF;;;;;;;IASD,MAAM,gBAAgB,CAAC,CAA6B;QAClD,IAAI,CAAC,IAAI,GAAG,CAAC,IAAI,CAAC,IAAI,CAAC;QAEvB,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC;YAClB,aAAa,EAAE,CAAC;YAChB,IAAI,EAAE,IAAI,CAAC,IAAI;SAChB,CAAC,CAAC;KACJ;IAKD,MAAM;QACJ,QACE,EAAC,IAAI,uDACH,+DACE,IAAI,EAAC,QAAQ,EACb,EAAE,EAAC,0BAA0B,EAC7B,KAAK,EAAC,0BAA0B,EAChC,OAAO,EAAE,CAAC,CAAC,KAAK,IAAI,CAAC,gBAAgB,CAAC,CAAC,CAAC,EACxC,GAAG,EAAE,CAAC,OAAO,MAAM,uBAAA,IAAI,oCAAwB,OAAO,MAAA,CAAC,IAEvD,iEAAU,IAAI,EAAC,QAAQ,GAAY,EACnC,4EAAuB,CAChB,EACT,4DAAK,KAAK,EAAC,cAAc,IACvB,+DACE,IAAI,EAAC,QAAQ,EACb,OAAO,EAAE,CAAC,CAAC,KAAK,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,CAAC,CAAC,EACtC,QAAQ,EAAE,IAAI,CAAC,WAAW,KAAK,IAAI,IAAI,IAAI,CAAC,WAAW,KAAK,MAAM,IAElE,yEAAoB,EACpB,iEAAU,IAAI,EAAC,MAAM,GAAY,CAC1B,EACT,+DACE,IAAI,EAAC,QAAQ,EACb,OAAO,EAAE,CAAC,CAAC,KAAK,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,CAAC,CAAC,EACvC,QAAQ,EAAE,IAAI,CAAC,WAAW,KAAK,KAAK,IAAI,IAAI,CAAC,WAAW,KAAK,MAAM,IAEnE,0EAAqB,EACrB,iEAAU,IAAI,EAAC,OAAO,GAAY,CAC3B,CACL,EACN,gEAAS,MAAM,EAAE,IAAI,CAAC,WAAW,IAC/B,iEACE,6DAAK,IAAI,CAAC,UAAU,CAAM,EAC1B,+DACE,IAAI,EAAC,QAAQ,EACb,KAAK,EAAC,cAAc,EACpB,OAAO,EAAE,CAAC,CAAC,KAAK,IAAI,CAAC,gBAAgB,CAAC,CAAC,CAAC,EACxC,GAAG,EAAE,CAAC,OAAO,MAAM,uBAAA,IAAI,mCAAuB,OAAO,MAAA,CAAC,IAEtD,kFAAsB,IAAI,CAAC,UAAU,CAAQ,EAC7C,iEAAU,IAAI,EAAC,OAAO,GAAY,CAC3B,CACF,EACT,yEACE,4DAAK,KAAK,EAAC,SAAS,IAClB,8DAAa,CACT,CACS,CACT,CACL,EACP;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/map-controls/map-controls.scss?tag=dso-map-controls&encapsulation=shadow","src/components/map-controls/map-controls.tsx"],"sourcesContent":["@use \"~dso-toolkit/src/utilities\";\r\n@use \"~dso-toolkit/src/variables/colors\";\r\n@use \"~dso-toolkit/src/variables/media-query-breakpoints\";\r\n@use \"~dso-toolkit/src/variables/typography\";\r\n@use \"~dso-toolkit/src/variables/units\";\r\n@use \"~dso-toolkit/src/components/button\";\r\n\r\n@use \"map-controls.variables\" as core-map-controls-variables;\r\n\r\n:host {\r\n  background-color: colors.$wit;\r\n  border: 1px solid colors.$grijs-20;\r\n  bottom: 0;\r\n  display: block;\r\n  font-family: typography.$font-family-base;\r\n  position: absolute;\r\n  top: 0;\r\n  left: 100%;\r\n  transition: transform core-map-controls-variables.$transition-duration ease;\r\n  width: 300px;\r\n}\r\n\r\n@include utilities.box-sizing();\r\n\r\n:host([open]) {\r\n  box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.3);\r\n  transform: translateX(-100%);\r\n\r\n  .toggle-visibility-button {\r\n    display: none;\r\n  }\r\n\r\n  .zoom-buttons {\r\n    top: units.$u2;\r\n  }\r\n}\r\n\r\nbutton {\r\n  @include button.element();\r\n}\r\n\r\n.toggle-visibility-button {\r\n  @include button.map();\r\n\r\n  position: absolute;\r\n  right: calc(100% + #{core-map-controls-variables.$controls-margin + core-map-controls-variables.$zoom-button-size});\r\n  top: core-map-controls-variables.$controls-margin;\r\n}\r\n\r\n.zoom-buttons {\r\n  border-radius: 4px;\r\n  box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.5);\r\n  display: flex;\r\n  flex-wrap: wrap;\r\n  flex: 0 0;\r\n  position: absolute;\r\n  right: calc(100% + core-map-controls-variables.$controls-margin);\r\n  top: core-map-controls-variables.$controls-margin;\r\n\r\n  button {\r\n    @include button.secondary($modifiers: false, $icon-only: true);\r\n    @include button.map-focus();\r\n\r\n    border: 0;\r\n    padding: 8px;\r\n    border-radius: 0;\r\n    border-top-left-radius: 4px;\r\n    border-top-right-radius: 4px;\r\n    flex: 0 0 100%;\r\n    height: core-map-controls-variables.$zoom-button-size;\r\n    min-width: auto;\r\n    width: core-map-controls-variables.$zoom-button-size;\r\n\r\n    + button {\r\n      border-radius: 0;\r\n      border-bottom-left-radius: 4px;\r\n      border-bottom-right-radius: 4px;\r\n      border-top: 1px solid colors.$grijs-20;\r\n    }\r\n  }\r\n}\r\n\r\n.close-button {\r\n  @include button.tertiary($modifiers: false, $icon-only: true);\r\n\r\n  padding: 0;\r\n  position: absolute;\r\n  right: core-map-controls-variables.$controls-margin;\r\n  top: core-map-controls-variables.$controls-margin;\r\n}\r\n\r\nsection:not([hidden]) {\r\n  display: flex;\r\n  flex-direction: column;\r\n  height: 100%;\r\n}\r\n\r\nheader,\r\n.content {\r\n  padding: units.$u2;\r\n}\r\n\r\nheader {\r\n  border-bottom: 1px solid colors.$grijs-20;\r\n  flex-grow: 0;\r\n  position: relative;\r\n\r\n  h2 {\r\n    color: colors.$bosgroen;\r\n    font-family: typography.$headings-font-family;\r\n    line-height: 1;\r\n    margin: 0;\r\n  }\r\n}\r\n\r\n@media screen and (max-width: media-query-breakpoints.$screen-xs-max) {\r\n  .toggle-visibility-button {\r\n    height: units.$u5;\r\n    margin-right: 0;\r\n    min-width: auto;\r\n    right: calc(100% + core-map-controls-variables.$controls-margin);\r\n    width: units.$u5;\r\n\r\n    dso-icon {\r\n      margin-right: 0;\r\n    }\r\n\r\n    span {\r\n      visibility: hidden;\r\n    }\r\n  }\r\n\r\n  .zoom-buttons {\r\n    top: units.$u9;\r\n  }\r\n}\r\n","import { Component, h, Host, Prop, Event, EventEmitter, State, Watch, Method } from \"@stencil/core\";\r\nimport { MapControlsToggleEvent } from \"./map-controls.interfaces\";\r\n\r\n// Sync with $transition-duration in ./map-controls.scss\r\nconst transitionDuration = 300;\r\n\r\n@Component({\r\n  tag: \"dso-map-controls\",\r\n  styleUrl: \"./map-controls.scss\",\r\n  shadow: true,\r\n})\r\nexport class MapControls {\r\n  private panelTitle = \"Kaartlagen\";\r\n\r\n  /**\r\n   * To show and hide the Map Controls.\r\n   */\r\n  @Prop({ reflect: true, mutable: true })\r\n  open = false;\r\n\r\n  /**\r\n   * To disable the zoom controls:\r\n   *\r\n   * * `in`: Disable zoom in button.\r\n   * * `out`: Disable zoom out button.\r\n   * * `both`: Disable zoom in and zoom out.\r\n   */\r\n  @Prop()\r\n  disableZoom?: \"in\" | \"out\" | \"both\";\r\n\r\n  /**\r\n   * Emitted when the user activates the zoom in button.\r\n   */\r\n  @Event()\r\n  dsoZoomIn!: EventEmitter<MouseEvent>;\r\n\r\n  /**\r\n   * Emitted when the user activates the zoom out button.\r\n   */\r\n  @Event()\r\n  dsoZoomOut!: EventEmitter<MouseEvent>;\r\n\r\n  /**\r\n   * emits when the panel opens or closes.\r\n   *\r\n   * - `event.detail.originalEvent` contains the original `MouseEvent / KeyboardEvent` when the panel is toggled by clicking the visibility button or the close button.\r\n   * - `event.detail.open` is true when the panel opens and false when the panel closes.\r\n   */\r\n  @Event()\r\n  dsoToggle!: EventEmitter<MapControlsToggleEvent>;\r\n\r\n  @State()\r\n  hideContent = !this.open;\r\n\r\n  @Watch(\"open\")\r\n  watchOpen(open: boolean) {\r\n    if (open) {\r\n      this.hideContent = false;\r\n\r\n      setTimeout(() => this.#closeButtonElement?.focus(), transitionDuration);\r\n    } else {\r\n      setTimeout(() => {\r\n        this.hideContent = true;\r\n\r\n        this.#toggleButtonElement?.focus();\r\n      }, transitionDuration);\r\n    }\r\n  }\r\n\r\n  /**\r\n   * Emitted when the visibility is toggled.\r\n   *\r\n   * Can be used to recalculate map widths or reposition center when the Map Controls opens or closes.\r\n   * @param e\r\n   */\r\n  @Method()\r\n  async toggleVisibility(e: MouseEvent | KeyboardEvent) {\r\n    this.open = !this.open;\r\n\r\n    this.dsoToggle.emit({\r\n      originalEvent: e,\r\n      open: this.open,\r\n    });\r\n  }\r\n\r\n  #closeButtonElement: HTMLButtonElement | undefined;\r\n  #toggleButtonElement: HTMLButtonElement | undefined;\r\n\r\n  render() {\r\n    return (\r\n      <Host>\r\n        <button\r\n          type=\"button\"\r\n          id=\"toggle-visibility-button\"\r\n          class=\"toggle-visibility-button\"\r\n          onClick={(e) => this.toggleVisibility(e)}\r\n          ref={(element) => (this.#toggleButtonElement = element)}\r\n        >\r\n          <dso-icon icon=\"layers\"></dso-icon>\r\n          <span>Kaartlagen</span>\r\n        </button>\r\n        <div class=\"zoom-buttons\">\r\n          <button\r\n            type=\"button\"\r\n            onClick={(e) => this.dsoZoomIn.emit(e)}\r\n            disabled={this.disableZoom === \"in\" || this.disableZoom === \"both\"}\r\n          >\r\n            <span>Zoom in</span>\r\n            <dso-icon icon=\"plus\"></dso-icon>\r\n          </button>\r\n          <button\r\n            type=\"button\"\r\n            onClick={(e) => this.dsoZoomOut.emit(e)}\r\n            disabled={this.disableZoom === \"out\" || this.disableZoom === \"both\"}\r\n          >\r\n            <span>Zoom uit</span>\r\n            <dso-icon icon=\"minus\"></dso-icon>\r\n          </button>\r\n        </div>\r\n        <section hidden={this.hideContent}>\r\n          <header>\r\n            <h2>{this.panelTitle}</h2>\r\n            <button\r\n              type=\"button\"\r\n              class=\"close-button\"\r\n              onClick={(e) => this.toggleVisibility(e)}\r\n              ref={(element) => (this.#closeButtonElement = element)}\r\n            >\r\n              <span>Verberg paneel {this.panelTitle}</span>\r\n              <dso-icon icon=\"times\"></dso-icon>\r\n            </button>\r\n          </header>\r\n          <dso-scrollable>\r\n            <div class=\"content\">\r\n              <slot></slot>\r\n            </div>\r\n          </dso-scrollable>\r\n        </section>\r\n      </Host>\r\n    );\r\n  }\r\n}\r\n"],"version":3}

package/dist/components/dso-map-overlays.d.ts

@@ -2,8 +2,8 @@ import type { Components, JSX } from "../types/components";
 
 interface DsoMapOverlays extends Components.DsoMapOverlays, HTMLElement {}
 export const DsoMapOverlays: {
-  prototype: DsoMapOverlays;
-  new (): DsoMapOverlays;
+    prototype: DsoMapOverlays;
+    new (): DsoMapOverlays;
 };
 /**
  * Used to define this component and all nested components recursively.

package/dist/components/dso-map-overlays.js

@@ -6,73 +6,74 @@ import { d as defineCustomElement$2 } from './selectable.js';
 import { v as v4 } from './v4.js';
 
 const mapOverlaysCss = ":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}fieldset{border:0;margin:0;min-width:0;padding:0}fieldset .control-label{display:inline-block;font-weight:bold;margin-bottom:8px;max-width:100%;text-align:left}p[slot=info]{margin:0}";
+const DsoMapOverlaysStyle0 = mapOverlaysCss;
 
 const MapOverlays = /*@__PURE__*/ proxyCustomElement(class MapOverlays extends HTMLElement {
-  constructor() {
-    super();
-    this.__registerHost();
-    this.__attachShadow();
-    this.dsoToggleOverlay = createEvent(this, "dsoToggleOverlay", 7);
-    this.selectableRefs = {};
-    this.group = v4();
-    this.overlays = undefined;
-  }
-  overlayChangeHandler(overlay, e) {
-    const { checked } = e.detail;
-    this.dsoToggleOverlay.emit({ overlay, checked });
-  }
-  componentDidRender() {
-    this.overlays
-      .filter((o) => { var _a, _b; return !o.disabled && ((_b = (_a = this.previousOverlays) === null || _a === void 0 ? void 0 : _a.find((p) => p.id === o.id)) === null || _b === void 0 ? void 0 : _b.disabled) === true; })
-      .forEach((o) => {
-      var _a;
-      (_a = this.selectableRefs[o.id]) === null || _a === void 0 ? void 0 : _a.toggleInfo(false);
-    });
-    this.previousOverlays = this.overlays;
-  }
-  render() {
-    for (const ref in this.selectableRefs) {
-      delete this.selectableRefs[ref];
+    constructor() {
+        super();
+        this.__registerHost();
+        this.__attachShadow();
+        this.dsoToggleOverlay = createEvent(this, "dsoToggleOverlay", 7);
+        this.selectableRefs = {};
+        this.group = v4();
+        this.overlays = undefined;
     }
-    return (h("fieldset", { class: "form-group dso-checkboxes" }, h("legend", { class: "sr-only" }, "Kaartlagen"), h("div", { class: "dso-label-container" }, h("span", { class: "control-label", "aria-hidden": "true" }, "Kaartlagen")), h("div", { class: "dso-field-container" }, this.overlays.map((overlay) => (h("dso-selectable", { key: overlay.id, type: "checkbox", value: overlay.name, checked: overlay.checked, disabled: overlay.disabled, name: this.group, ref: (ref) => ref && (this.selectableRefs[overlay.id] = ref), onDsoChange: (e) => this.overlayChangeHandler(overlay, e) }, overlay.name, overlay.info ? h("p", { slot: "info" }, overlay.info) : null))))));
-  }
-  static get style() { return mapOverlaysCss; }
+    overlayChangeHandler(overlay, e) {
+        const { checked } = e.detail;
+        this.dsoToggleOverlay.emit({ overlay, checked });
+    }
+    componentDidRender() {
+        this.overlays
+            .filter((o) => { var _a, _b; return !o.disabled && ((_b = (_a = this.previousOverlays) === null || _a === void 0 ? void 0 : _a.find((p) => p.id === o.id)) === null || _b === void 0 ? void 0 : _b.disabled) === true; })
+            .forEach((o) => {
+            var _a;
+            (_a = this.selectableRefs[o.id]) === null || _a === void 0 ? void 0 : _a.toggleInfo(false);
+        });
+        this.previousOverlays = this.overlays;
+    }
+    render() {
+        for (const ref in this.selectableRefs) {
+            delete this.selectableRefs[ref];
+        }
+        return (h("fieldset", { key: '10c6cf654992a23a91582f496988e177c552e61d', class: "form-group dso-checkboxes" }, h("legend", { key: '237e7234834b820a80caa38b47cdc33be2dc4c85', class: "sr-only" }, "Kaartlagen"), h("div", { key: '944be0a8c38661e31d5f2d190d17ea9b9367bc2d', class: "dso-label-container" }, h("span", { key: '659a031232613acaefe79d54fed0365d1b19d20f', class: "control-label", "aria-hidden": "true" }, "Kaartlagen")), h("div", { key: 'de713bcb3827c8df631e67fda81eb0b734fb8492', class: "dso-field-container" }, this.overlays.map((overlay) => (h("dso-selectable", { key: overlay.id, type: "checkbox", value: overlay.name, checked: overlay.checked, disabled: overlay.disabled, name: this.group, ref: (ref) => ref && (this.selectableRefs[overlay.id] = ref), onDsoChange: (e) => this.overlayChangeHandler(overlay, e) }, overlay.name, overlay.info ? h("p", { slot: "info" }, overlay.info) : null))))));
+    }
+    static get style() { return DsoMapOverlaysStyle0; }
 }, [1, "dso-map-overlays", {
-    "group": [1],
-    "overlays": [16]
-  }]);
+        "group": [1],
+        "overlays": [16]
+    }]);
 function defineCustomElement$1() {
-  if (typeof customElements === "undefined") {
-    return;
-  }
-  const components = ["dso-map-overlays", "dso-icon", "dso-info", "dso-info-button", "dso-selectable"];
-  components.forEach(tagName => { switch (tagName) {
-    case "dso-map-overlays":
-      if (!customElements.get(tagName)) {
-        customElements.define(tagName, MapOverlays);
-      }
-      break;
-    case "dso-icon":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$5();
-      }
-      break;
-    case "dso-info":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$4();
-      }
-      break;
-    case "dso-info-button":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$3();
-      }
-      break;
-    case "dso-selectable":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$2();
-      }
-      break;
-  } });
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["dso-map-overlays", "dso-icon", "dso-info", "dso-info-button", "dso-selectable"];
+    components.forEach(tagName => { switch (tagName) {
+        case "dso-map-overlays":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, MapOverlays);
+            }
+            break;
+        case "dso-icon":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$5();
+            }
+            break;
+        case "dso-info":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$4();
+            }
+            break;
+        case "dso-info-button":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$3();
+            }
+            break;
+        case "dso-selectable":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$2();
+            }
+            break;
+    } });
 }
 
 const DsoMapOverlays = MapOverlays;

package/dist/components/dso-map-overlays.js.map

@@ -1 +1 @@
-{"file":"dso-map-overlays.js","mappings":";;;;;;;AAAA,MAAM,cAAc,GAAG,4WAA4W;;MCYtX,WAAW;;;;;;IAEd,mBAAc,GAA+C,EAAE,CAAC;iBAMhEA,EAAM,EAAE;;;EAcR,oBAAoB,CAAC,OAAgB,EAAE,CAAqC;IAClF,MAAM,EAAE,OAAO,EAAE,GAAG,CAAC,CAAC,MAAM,CAAC;IAE7B,IAAI,CAAC,gBAAgB,CAAC,IAAI,CAAC,EAAE,OAAO,EAAE,OAAO,EAAE,CAAC,CAAC;GAClD;EAED,kBAAkB;IAChB,IAAI,CAAC,QAAQ;OACV,MAAM,CAAC,CAAC,CAAC,mBAAK,OAAA,CAAC,CAAC,CAAC,QAAQ,IAAI,CAAA,MAAA,MAAA,IAAI,CAAC,gBAAgB,0CAAE,IAAI,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,EAAE,KAAK,CAAC,CAAC,EAAE,CAAC,0CAAE,QAAQ,MAAK,IAAI,CAAA,EAAA,CAAC;OAClG,OAAO,CAAC,CAAC,CAAC;;MACT,MAAA,IAAI,CAAC,cAAc,CAAC,CAAC,CAAC,EAAE,CAAC,0CAAE,UAAU,CAAC,KAAK,CAAC,CAAC;KAC9C,CAAC,CAAC;IAEL,IAAI,CAAC,gBAAgB,GAAG,IAAI,CAAC,QAAQ,CAAC;GACvC;EAED,MAAM;IACJ,KAAK,MAAM,GAAG,IAAI,IAAI,CAAC,cAAc,EAAE;MACrC,OAAO,IAAI,CAAC,cAAc,CAAC,GAAG,CAAC,CAAC;KACjC;IAED,QACE,gBAAU,KAAK,EAAC,2BAA2B,IACzC,cAAQ,KAAK,EAAC,SAAS,iBAAoB,EAC3C,WAAK,KAAK,EAAC,qBAAqB,IAC9B,YAAM,KAAK,EAAC,eAAe,iBAAa,MAAM,iBAEvC,CACH,EACN,WAAK,KAAK,EAAC,qBAAqB,IAC7B,IAAI,CAAC,QAAQ,CAAC,GAAG,CAAC,CAAC,OAAO,MACzB,sBACE,GAAG,EAAE,OAAO,CAAC,EAAE,EACf,IAAI,EAAC,UAAU,EACf,KAAK,EAAE,OAAO,CAAC,IAAI,EACnB,OAAO,EAAE,OAAO,CAAC,OAAO,EACxB,QAAQ,EAAE,OAAO,CAAC,QAAQ,EAC1B,IAAI,EAAE,IAAI,CAAC,KAAK,EAChB,GAAG,EAAE,CAAC,GAAG,KAAK,GAAG,KAAK,IAAI,CAAC,cAAc,CAAC,OAAO,CAAC,EAAE,CAAC,GAAG,GAAG,CAAC,EAC5D,WAAW,EAAE,CAAC,CAAC,KAAK,IAAI,CAAC,oBAAoB,CAAC,OAAO,EAAE,CAAC,CAAC,IAExD,OAAO,CAAC,IAAI,EACZ,OAAO,CAAC,IAAI,GAAG,SAAG,IAAI,EAAC,MAAM,IAAE,OAAO,CAAC,IAAI,CAAK,GAAG,IAAI,CACzC,CAClB,CAAC,CACE,CACG,EACX;GACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["uuidv4"],"sources":["src/components/map-overlays/map-overlays.scss?tag=dso-map-overlays&encapsulation=shadow","src/components/map-overlays/map-overlays.tsx"],"sourcesContent":["@use \"~dso-toolkit/src/utilities\";\r\n@use \"~dso-toolkit/src/variables/units\";\r\n\r\n:host {\r\n  display: block;\r\n}\r\n\r\n@include utilities.box-sizing();\r\n\r\n.sr-only {\r\n  @include utilities.sr-only();\r\n}\r\n\r\n// Todo #1194\r\nfieldset {\r\n  border: 0;\r\n  margin: 0;\r\n  min-width: 0;\r\n  padding: 0;\r\n\r\n  .control-label {\r\n    display: inline-block;\r\n    font-weight: bold;\r\n    margin-bottom: units.$u1;\r\n    max-width: 100%;\r\n    text-align: left;\r\n  }\r\n}\r\n\r\np[slot=\"info\"] {\r\n  margin: 0;\r\n}\r\n","import { Component, Event, EventEmitter, Prop, h, ComponentInterface } from \"@stencil/core\";\r\nimport { v4 as uuidv4 } from \"uuid\";\r\n\r\nimport { Overlay, OverlayChangeEvent } from \"./map-overlays.interfaces\";\r\n\r\nimport { SelectableChangeEvent } from \"../selectable/selectable.interfaces\";\r\n\r\n@Component({\r\n  tag: \"dso-map-overlays\",\r\n  styleUrl: \"./map-overlays.scss\",\r\n  shadow: true,\r\n})\r\nexport class MapOverlays implements ComponentInterface {\r\n  private previousOverlays: Overlay[] | undefined;\r\n  private selectableRefs: { [id: number]: HTMLDsoSelectableElement } = {};\r\n\r\n  /**\r\n   * To group the overlays together. Generally the default value suffices.\r\n   */\r\n  @Prop()\r\n  group = uuidv4();\r\n\r\n  /**\r\n   * The overlays.\r\n   */\r\n  @Prop()\r\n  overlays!: Overlay[];\r\n\r\n  /**\r\n   * Emitted when the user selects a different overlay.\r\n   */\r\n  @Event()\r\n  dsoToggleOverlay!: EventEmitter<OverlayChangeEvent>;\r\n\r\n  private overlayChangeHandler(overlay: Overlay, e: CustomEvent<SelectableChangeEvent>) {\r\n    const { checked } = e.detail;\r\n\r\n    this.dsoToggleOverlay.emit({ overlay, checked });\r\n  }\r\n\r\n  componentDidRender() {\r\n    this.overlays\r\n      .filter((o) => !o.disabled && this.previousOverlays?.find((p) => p.id === o.id)?.disabled === true)\r\n      .forEach((o) => {\r\n        this.selectableRefs[o.id]?.toggleInfo(false);\r\n      });\r\n\r\n    this.previousOverlays = this.overlays;\r\n  }\r\n\r\n  render() {\r\n    for (const ref in this.selectableRefs) {\r\n      delete this.selectableRefs[ref];\r\n    }\r\n\r\n    return (\r\n      <fieldset class=\"form-group dso-checkboxes\">\r\n        <legend class=\"sr-only\">Kaartlagen</legend>\r\n        <div class=\"dso-label-container\">\r\n          <span class=\"control-label\" aria-hidden=\"true\">\r\n            Kaartlagen\r\n          </span>\r\n        </div>\r\n        <div class=\"dso-field-container\">\r\n          {this.overlays.map((overlay) => (\r\n            <dso-selectable\r\n              key={overlay.id}\r\n              type=\"checkbox\"\r\n              value={overlay.name}\r\n              checked={overlay.checked}\r\n              disabled={overlay.disabled}\r\n              name={this.group}\r\n              ref={(ref) => ref && (this.selectableRefs[overlay.id] = ref)}\r\n              onDsoChange={(e) => this.overlayChangeHandler(overlay, e)}\r\n            >\r\n              {overlay.name}\r\n              {overlay.info ? <p slot=\"info\">{overlay.info}</p> : null}\r\n            </dso-selectable>\r\n          ))}\r\n        </div>\r\n      </fieldset>\r\n    );\r\n  }\r\n}\r\n"],"version":3}
+{"file":"dso-map-overlays.js","mappings":";;;;;;;AAAA,MAAM,cAAc,GAAG,4WAA4W,CAAC;AACpY,6BAAe,cAAc;;MCWhB,WAAW;;;;;;QAEd,mBAAc,GAA+C,EAAE,CAAC;qBAMhEA,EAAM,EAAE;;;IAcR,oBAAoB,CAAC,OAAgB,EAAE,CAAqC;QAClF,MAAM,EAAE,OAAO,EAAE,GAAG,CAAC,CAAC,MAAM,CAAC;QAE7B,IAAI,CAAC,gBAAgB,CAAC,IAAI,CAAC,EAAE,OAAO,EAAE,OAAO,EAAE,CAAC,CAAC;KAClD;IAED,kBAAkB;QAChB,IAAI,CAAC,QAAQ;aACV,MAAM,CAAC,CAAC,CAAC,mBAAK,OAAA,CAAC,CAAC,CAAC,QAAQ,IAAI,CAAA,MAAA,MAAA,IAAI,CAAC,gBAAgB,0CAAE,IAAI,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,EAAE,KAAK,CAAC,CAAC,EAAE,CAAC,0CAAE,QAAQ,MAAK,IAAI,CAAA,EAAA,CAAC;aAClG,OAAO,CAAC,CAAC,CAAC;;YACT,MAAA,IAAI,CAAC,cAAc,CAAC,CAAC,CAAC,EAAE,CAAC,0CAAE,UAAU,CAAC,KAAK,CAAC,CAAC;SAC9C,CAAC,CAAC;QAEL,IAAI,CAAC,gBAAgB,GAAG,IAAI,CAAC,QAAQ,CAAC;KACvC;IAED,MAAM;QACJ,KAAK,MAAM,GAAG,IAAI,IAAI,CAAC,cAAc,EAAE;YACrC,OAAO,IAAI,CAAC,cAAc,CAAC,GAAG,CAAC,CAAC;SACjC;QAED,QACE,iEAAU,KAAK,EAAC,2BAA2B,IACzC,+DAAQ,KAAK,EAAC,SAAS,iBAAoB,EAC3C,4DAAK,KAAK,EAAC,qBAAqB,IAC9B,6DAAM,KAAK,EAAC,eAAe,iBAAa,MAAM,iBAEvC,CACH,EACN,4DAAK,KAAK,EAAC,qBAAqB,IAC7B,IAAI,CAAC,QAAQ,CAAC,GAAG,CAAC,CAAC,OAAO,MACzB,sBACE,GAAG,EAAE,OAAO,CAAC,EAAE,EACf,IAAI,EAAC,UAAU,EACf,KAAK,EAAE,OAAO,CAAC,IAAI,EACnB,OAAO,EAAE,OAAO,CAAC,OAAO,EACxB,QAAQ,EAAE,OAAO,CAAC,QAAQ,EAC1B,IAAI,EAAE,IAAI,CAAC,KAAK,EAChB,GAAG,EAAE,CAAC,GAAG,KAAK,GAAG,KAAK,IAAI,CAAC,cAAc,CAAC,OAAO,CAAC,EAAE,CAAC,GAAG,GAAG,CAAC,EAC5D,WAAW,EAAE,CAAC,CAAC,KAAK,IAAI,CAAC,oBAAoB,CAAC,OAAO,EAAE,CAAC,CAAC,IAExD,OAAO,CAAC,IAAI,EACZ,OAAO,CAAC,IAAI,GAAG,SAAG,IAAI,EAAC,MAAM,IAAE,OAAO,CAAC,IAAI,CAAK,GAAG,IAAI,CACzC,CAClB,CAAC,CACE,CACG,EACX;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["uuidv4"],"sources":["src/components/map-overlays/map-overlays.scss?tag=dso-map-overlays&encapsulation=shadow","src/components/map-overlays/map-overlays.tsx"],"sourcesContent":["@use \"~dso-toolkit/src/utilities\";\r\n@use \"~dso-toolkit/src/variables/units\";\r\n\r\n:host {\r\n  display: block;\r\n}\r\n\r\n@include utilities.box-sizing();\r\n\r\n.sr-only {\r\n  @include utilities.sr-only();\r\n}\r\n\r\n// Todo #1194\r\nfieldset {\r\n  border: 0;\r\n  margin: 0;\r\n  min-width: 0;\r\n  padding: 0;\r\n\r\n  .control-label {\r\n    display: inline-block;\r\n    font-weight: bold;\r\n    margin-bottom: units.$u1;\r\n    max-width: 100%;\r\n    text-align: left;\r\n  }\r\n}\r\n\r\np[slot=\"info\"] {\r\n  margin: 0;\r\n}\r\n","import { Component, Event, EventEmitter, Prop, h, ComponentInterface } from \"@stencil/core\";\r\nimport { v4 as uuidv4 } from \"uuid\";\r\n\r\nimport { Overlay, OverlayChangeEvent } from \"./map-overlays.interfaces\";\r\n\r\nimport { SelectableChangeEvent } from \"../selectable/selectable.interfaces\";\r\n\r\n@Component({\r\n  tag: \"dso-map-overlays\",\r\n  styleUrl: \"./map-overlays.scss\",\r\n  shadow: true,\r\n})\r\nexport class MapOverlays implements ComponentInterface {\r\n  private previousOverlays: Overlay[] | undefined;\r\n  private selectableRefs: { [id: number]: HTMLDsoSelectableElement } = {};\r\n\r\n  /**\r\n   * To group the overlays together. Generally the default value suffices.\r\n   */\r\n  @Prop()\r\n  group = uuidv4();\r\n\r\n  /**\r\n   * The overlays.\r\n   */\r\n  @Prop()\r\n  overlays!: Overlay[];\r\n\r\n  /**\r\n   * Emitted when the user selects a different overlay.\r\n   */\r\n  @Event()\r\n  dsoToggleOverlay!: EventEmitter<OverlayChangeEvent>;\r\n\r\n  private overlayChangeHandler(overlay: Overlay, e: CustomEvent<SelectableChangeEvent>) {\r\n    const { checked } = e.detail;\r\n\r\n    this.dsoToggleOverlay.emit({ overlay, checked });\r\n  }\r\n\r\n  componentDidRender() {\r\n    this.overlays\r\n      .filter((o) => !o.disabled && this.previousOverlays?.find((p) => p.id === o.id)?.disabled === true)\r\n      .forEach((o) => {\r\n        this.selectableRefs[o.id]?.toggleInfo(false);\r\n      });\r\n\r\n    this.previousOverlays = this.overlays;\r\n  }\r\n\r\n  render() {\r\n    for (const ref in this.selectableRefs) {\r\n      delete this.selectableRefs[ref];\r\n    }\r\n\r\n    return (\r\n      <fieldset class=\"form-group dso-checkboxes\">\r\n        <legend class=\"sr-only\">Kaartlagen</legend>\r\n        <div class=\"dso-label-container\">\r\n          <span class=\"control-label\" aria-hidden=\"true\">\r\n            Kaartlagen\r\n          </span>\r\n        </div>\r\n        <div class=\"dso-field-container\">\r\n          {this.overlays.map((overlay) => (\r\n            <dso-selectable\r\n              key={overlay.id}\r\n              type=\"checkbox\"\r\n              value={overlay.name}\r\n              checked={overlay.checked}\r\n              disabled={overlay.disabled}\r\n              name={this.group}\r\n              ref={(ref) => ref && (this.selectableRefs[overlay.id] = ref)}\r\n              onDsoChange={(e) => this.overlayChangeHandler(overlay, e)}\r\n            >\r\n              {overlay.name}\r\n              {overlay.info ? <p slot=\"info\">{overlay.info}</p> : null}\r\n            </dso-selectable>\r\n          ))}\r\n        </div>\r\n      </fieldset>\r\n    );\r\n  }\r\n}\r\n"],"version":3}

package/dist/components/dso-mark-bar.d.ts

@@ -2,8 +2,8 @@ import type { Components, JSX } from "../types/components";
 
 interface DsoMarkBar extends Components.DsoMarkBar, HTMLElement {}
 export const DsoMarkBar: {
-  prototype: DsoMarkBar;
-  new (): DsoMarkBar;
+    prototype: DsoMarkBar;
+    new (): DsoMarkBar;
 };
 /**
  * Used to define this component and all nested components recursively.