@dso-toolkit/core 62.18.0 → 62.19.0

package/dist/esm/dso-map-controls.entry.js

@@ -1,74 +1,75 @@
-import { r as registerInstance, c as createEvent, h, H as Host } from './index-528d5213.js';
+import { r as registerInstance, c as createEvent, h, H as Host } from './index-2e1b7388.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 = class {
-  constructor(hostRef) {
-    registerInstance(this, hostRef);
-    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(hostRef) {
+        registerInstance(this, hostRef);
+        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"]
-  }; }
+    /**
+     * 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: 'd5257802545ac7c3ce214c1d777a9046e4e4ed53' }, h("button", { key: '10c981feea6e98d70038b7e41eadcfcda69e561f', 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: 'b0ad518b178e141183e940d4a93fb86cb7e669cb', icon: "layers" }), h("span", { key: '3a08741b4e7b68c1268563ab3b42437346250754' }, "Kaartlagen")), h("div", { key: 'a45cd401ca5dbaa8a1701f71020c08f9a1c12a3a', class: "zoom-buttons" }, h("button", { key: 'cffa9f861933fcca241882794bc38534255a0093', type: "button", onClick: (e) => this.dsoZoomIn.emit(e), disabled: this.disableZoom === "in" || this.disableZoom === "both" }, h("span", { key: '745758853f317c4d094a6ef0ec7548583d419075' }, "Zoom in"), h("dso-icon", { key: 'edf7d7b7cf782d192c913b03febdc1b0b7a5905b', icon: "plus" })), h("button", { key: 'a0d1b719f4811a7223d042b7c45fcc055e6a6ae0', type: "button", onClick: (e) => this.dsoZoomOut.emit(e), disabled: this.disableZoom === "out" || this.disableZoom === "both" }, h("span", { key: '942d4d278889974dc336ace6f885cbf12af55bc5' }, "Zoom uit"), h("dso-icon", { key: '59c74add8be0224ff1c16bd03e3bd3697b4db484', icon: "minus" }))), h("section", { key: 'd17562e23bd26af09fe618f00974e5b1a5c4086e', hidden: this.hideContent }, h("header", { key: '16bf4efe6dfbe09fa7dd53e0156733d23fff5f43' }, h("h2", { key: '6e2913bf9c56d4b3e40c7ce7d4f3e0b4e69c9d1c' }, this.panelTitle), h("button", { key: '1e1be94fea1cd8336552d490369f9c2c28ef1d21', type: "button", class: "close-button", onClick: (e) => this.toggleVisibility(e), ref: (element) => (__classPrivateFieldSet(this, _MapControls_closeButtonElement, element, "f")) }, h("span", { key: '135b23785f61713876fa8ba41767b4f423339573' }, "Verberg paneel ", this.panelTitle), h("dso-icon", { key: '5221aa8c44ce86583c1fca8d30234df499046708', icon: "times" }))), h("dso-scrollable", { key: '9a0f92768fe2b9b55218187547757c14088da249' }, h("div", { key: 'd04dcd91a2553ce5568b2535e53206012efc7bf8', class: "content" }, h("slot", { key: 'e44aef4d314f64e66b3d192b7601eae462c7169f' }))))));
+    }
+    static get watchers() { return {
+        "open": ["watchOpen"]
+    }; }
 };
 _MapControls_closeButtonElement = new WeakMap(), _MapControls_toggleButtonElement = new WeakMap();
-MapControls.style = mapControlsCss;
+MapControls.style = DsoMapControlsStyle0;
 
 export { MapControls as dso_map_controls };
 

package/dist/esm/dso-map-controls.entry.js.map

@@ -1 +1 @@
-{"file":"dso-map-controls.entry.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.entry.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/esm/dso-map-overlays.entry.js

@@ -1,37 +1,38 @@
-import { r as registerInstance, c as createEvent, h } from './index-528d5213.js';
+import { r as registerInstance, c as createEvent, h } from './index-2e1b7388.js';
 import { v as v4 } from './v4-23648a96.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 = class {
-  constructor(hostRef) {
-    registerInstance(this, hostRef);
-    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(hostRef) {
+        registerInstance(this, hostRef);
+        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];
+        }
+        return (h("fieldset", { key: '922be44c70151498b93a9e860282660855ce6da2', class: "form-group dso-checkboxes" }, h("legend", { key: 'f76555b38b08fb94816434a298a9dc7d566722e8', class: "sr-only" }, "Kaartlagen"), h("div", { key: '13d611600240b497d9f1c0c35f2f431c64465ff4', class: "dso-label-container" }, h("span", { key: '046447606bf77abaf50f9959af64f60a028fcf34', class: "control-label", "aria-hidden": "true" }, "Kaartlagen")), h("div", { key: '47126e80ffa9af8a5e33ae5e456cc043db1dfeb4', 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))))));
     }
-    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))))));
-  }
 };
-MapOverlays.style = mapOverlaysCss;
+MapOverlays.style = DsoMapOverlaysStyle0;
 
 export { MapOverlays as dso_map_overlays };
 

package/dist/esm/dso-map-overlays.entry.js.map

@@ -1 +1 @@
-{"file":"dso-map-overlays.entry.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.entry.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/esm/dso-mark-bar.entry.js

@@ -1,59 +1,60 @@
-import { r as registerInstance, c as createEvent, h } from './index-528d5213.js';
+import { r as registerInstance, c as createEvent, h } from './index-2e1b7388.js';
 
 const markBarCss = "*,*::after,*::before{box-sizing:border-box}:host{display:block;background-color:#fff}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);border:0}.dso-mark-bar{display:flex;flex-grow:1}.dso-mark-bar .dso-mark-bar-input{display:flex;position:relative;width:100%}.dso-mark-bar .dso-mark-bar-input input{background-color:transparent;background-image:none;border:1px solid #275937;border-radius:4px;border-width:1px;box-shadow:none;display:block;font-size:1rem;height:2.5rem;line-height:2.5rem;padding-inline:2.5rem;padding-block:6px;transition:border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;width:100%;border-start-end-radius:0;border-end-end-radius:0;border-inline-end:0}.dso-mark-bar .dso-mark-bar-input input:focus{border-color:#275937;box-shadow:inset 0 0 0 1px #275937;outline:0}.dso-mark-bar .dso-mark-bar-input input::-ms-clear{display:none}.dso-mark-bar .dso-mark-bar-input input:not(:placeholder-shown)+label{width:2.5rem;padding-inline-end:8px}.dso-mark-bar .dso-mark-bar-input input:not(:placeholder-shown)+label .label-text{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);border:0}.dso-mark-bar .dso-mark-bar-input label{bottom:8px;height:2.5rem;left:0;right:40px;padding-block:8px;padding-inline-start:8px;cursor:text;position:absolute;top:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;}.dso-mark-bar .dso-mark-bar-input label dso-icon{color:#39870c;cursor:default;margin:-8px;padding:8px;width:2.5rem;height:2.5rem}.dso-mark-bar .dso-mark-bar-input label .label-text{margin-left:8px;color:#666}.dso-mark-bar .dso-mark-bar-input button{background-color:transparent;border:0;box-shadow:none;color:#39870c;font-size:0;height:2.5rem;padding:8px;position:absolute;right:0;text-align:center;top:0;width:2.5rem}.dso-button-container{position:relative;display:flex;align-items:center;gap:8px;flex-shrink:0;padding-inline:8px;border:1px solid #275937;border-inline-start:0;border-start-end-radius:4px;border-end-end-radius:4px}.dso-button-container button{appearance:none;padding:0;border:0;background-color:transparent;color:#39870c}.dso-button-container button:disabled{color:#ccc}.dso-button-container .divider{position:absolute;inset-inline-start:0;inset-block-start:8px;inset-block-end:8px;inline-size:1px;background-color:#ccc}";
+const DsoMarkBarStyle0 = markBarCss;
 
 const MarkBar = class {
-  constructor(hostRef) {
-    registerInstance(this, hostRef);
-    this.dsoInput = createEvent(this, "dsoInput", 3);
-    this.dsoNext = createEvent(this, "dsoNext", 3);
-    this.dsoPrevious = createEvent(this, "dsoPrevious", 3);
-    this.dsoClear = createEvent(this, "dsoClear", 3);
-    this.handleInput = (e) => {
-      if (!(e.target instanceof HTMLInputElement)) {
-        return;
-      }
-      this.dsoInput.emit({
-        originalEvent: e,
-        value: e.target.value,
-      });
-    };
-    this.handleNext = (e) => {
-      this.dsoNext.emit({ originalEvent: e });
-    };
-    this.handlePrevious = (e) => {
-      this.dsoPrevious.emit({ originalEvent: e });
-    };
-    this.handleClear = (e) => {
-      this.dsoClear.emit({ originalEvent: e });
-    };
-    this.handleKeyDown = (e) => {
-      if (e.key === "Enter") {
-        this.handleNext(e);
-      }
-    };
-    this.value = undefined;
-    this.label = "Zoeken in document";
-    this.current = undefined;
-    this.totalCount = undefined;
-  }
-  /**
-   * Focuses the input field.
-   */
-  async dsoFocus(options = {}) {
-    var _a, _b;
-    (_a = this.inputElement) === null || _a === void 0 ? void 0 : _a.focus();
-    if (options.select) {
-      (_b = this.inputElement) === null || _b === void 0 ? void 0 : _b.select();
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.dsoInput = createEvent(this, "dsoInput", 3);
+        this.dsoNext = createEvent(this, "dsoNext", 3);
+        this.dsoPrevious = createEvent(this, "dsoPrevious", 3);
+        this.dsoClear = createEvent(this, "dsoClear", 3);
+        this.handleInput = (e) => {
+            if (!(e.target instanceof HTMLInputElement)) {
+                return;
+            }
+            this.dsoInput.emit({
+                originalEvent: e,
+                value: e.target.value,
+            });
+        };
+        this.handleNext = (e) => {
+            this.dsoNext.emit({ originalEvent: e });
+        };
+        this.handlePrevious = (e) => {
+            this.dsoPrevious.emit({ originalEvent: e });
+        };
+        this.handleClear = (e) => {
+            this.dsoClear.emit({ originalEvent: e });
+        };
+        this.handleKeyDown = (e) => {
+            if (e.key === "Enter") {
+                this.handleNext(e);
+            }
+        };
+        this.value = undefined;
+        this.label = "Zoeken in document";
+        this.current = undefined;
+        this.totalCount = undefined;
+    }
+    /**
+     * Focuses the input field.
+     */
+    async dsoFocus(options = {}) {
+        var _a, _b;
+        (_a = this.inputElement) === null || _a === void 0 ? void 0 : _a.focus();
+        if (options.select) {
+            (_b = this.inputElement) === null || _b === void 0 ? void 0 : _b.select();
+        }
+    }
+    render() {
+        const current = this.current || 0;
+        const totalCount = this.totalCount || 0;
+        return (h("div", { key: 'efdf7f83749340df8019025992167f5d85c3b345', class: "dso-mark-bar" }, h("div", { key: '0e80bcb1859584ba0ef3a77f7c1e1154886433d6', class: "dso-mark-bar-input" }, h("input", { key: 'fa7112771eec26a46b6b3723b1fead205d364835', type: "text", id: "search-input", value: this.value, onInput: this.handleInput, onKeyDown: this.handleKeyDown, placeholder: " ", ref: (element) => (this.inputElement = element) }), h("label", { key: '91e2661d9926d1a022c199c6441f38bc51b297a9', htmlFor: "search-input" }, h("dso-icon", { key: '25d5ae45bacae6454510187fec58a4b6168bd037', class: "dso-search-icon", icon: "search" }), h("span", { key: 'd8591b4f24d9fa1f37d95b83c0d40859cb8bf4db', class: "label-text" }, this.label)), h("button", { key: 'b2cff0ce11313010ec20e16f972216901efb0c8a', type: "button", onClick: this.handleClear }, h("dso-icon", { key: '9599e5ff9225d9549c2138a788665d232c77991b', icon: "times" }), h("span", { key: '4b0aeef7c3196f8cd8d1bfa815fdc68e26fbd2c8', class: "sr-only" }, "Zoekopdracht legen"))), h("div", { key: '901be078c668f6386095df22efcd4d1760516e30', class: "dso-button-container" }, h("span", { key: '22616246e5c1e69caecc69ec5c13290fc4699835', class: "divider" }), h("button", { key: 'b8acc81707e87213fc77ca3858179ae46c939160', type: "button", onClick: this.handlePrevious, disabled: current <= 1 }, h("dso-icon", { key: 'ae6eebabf4bcd7454c81f131e13649b85f0d8a24', icon: "chevron-up", class: "hydrated" }), h("span", { key: '4d437f856a43918075e110c99381705855eba8a2', class: "sr-only" }, "Vorig zoekresultaat")), h("span", { key: 'c60458ada935126bd1908fb5b3adc616d3a86bde' }, current, "/", totalCount), h("button", { key: '212d6d2b04bf1023a6c3ce68e11e68e06e03149d', type: "button", onClick: this.handleNext, disabled: current >= totalCount }, h("dso-icon", { key: '50dc0c18de000a9b128f70815425267bd7bfad4d', icon: "chevron-down", class: "hydrated" }), h("span", { key: 'ae6835ce1e8b52d5a65e79f5711b51a4fbe08821', class: "sr-only" }, "Volgend zoekresultaat")))));
     }
-  }
-  render() {
-    const current = this.current || 0;
-    const totalCount = this.totalCount || 0;
-    return (h("div", { class: "dso-mark-bar" }, h("div", { class: "dso-mark-bar-input" }, h("input", { type: "text", id: "search-input", value: this.value, onInput: this.handleInput, onKeyDown: this.handleKeyDown, placeholder: " ", ref: (element) => (this.inputElement = element) }), h("label", { htmlFor: "search-input" }, h("dso-icon", { class: "dso-search-icon", icon: "search" }), h("span", { class: "label-text" }, this.label)), h("button", { type: "button", onClick: this.handleClear }, h("dso-icon", { icon: "times" }), h("span", { class: "sr-only" }, "Zoekopdracht legen"))), h("div", { class: "dso-button-container" }, h("span", { class: "divider" }), h("button", { type: "button", onClick: this.handlePrevious, disabled: current <= 1 }, h("dso-icon", { icon: "chevron-up", class: "hydrated" }), h("span", { class: "sr-only" }, "Vorig zoekresultaat")), h("span", null, current, "/", totalCount), h("button", { type: "button", onClick: this.handleNext, disabled: current >= totalCount }, h("dso-icon", { icon: "chevron-down", class: "hydrated" }), h("span", { class: "sr-only" }, "Volgend zoekresultaat")))));
-  }
 };
-MarkBar.style = markBarCss;
+MarkBar.style = DsoMarkBarStyle0;
 
 export { MarkBar as dso_mark_bar };
 

package/dist/esm/dso-mark-bar.entry.js.map

@@ -1 +1 @@
-{"file":"dso-mark-bar.entry.js","mappings":"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","names":[],"sources":["src/components/mark-bar/mark-bar.scss?tag=dso-mark-bar&encapsulation=shadow","src/components/mark-bar/mark-bar.tsx"],"sourcesContent":["@use \"~dso-toolkit/src/variables/units\";\r\n@use \"~dso-toolkit/src/variables/colors\";\r\n@use \"~dso-toolkit/src/variables/zindex\";\r\n@use \"~dso-toolkit/src/utilities\";\r\n@use \"~dso-toolkit/src/variables/scaffolding\";\r\n@use \"~dso-toolkit/src/variables/typography\";\r\n@use \"~dso-toolkit/src/components/form-control\";\r\n\r\n@include utilities.box-sizing();\r\n\r\n:host {\r\n  display: block;\r\n  background-color: colors.$wit;\r\n}\r\n\r\n.sr-only {\r\n  @include utilities.sr-only();\r\n}\r\n\r\n$height: units.$ru5;\r\n$focus-border-width: 1px;\r\n\r\n.dso-mark-bar {\r\n  display: flex;\r\n  flex-grow: 1;\r\n\r\n  .dso-mark-bar-input {\r\n    display: flex;\r\n    position: relative;\r\n    width: 100%;\r\n\r\n    input {\r\n      background-color: transparent;\r\n      background-image: none;\r\n      border: 1px solid form-control.$focus-border-color;\r\n      border-radius: 4px;\r\n      border-width: 1px;\r\n      box-shadow: none;\r\n      display: block;\r\n      font-size: typography.$root-font-size-base;\r\n      height: $height;\r\n      line-height: $height;\r\n      padding-inline: $height;\r\n      padding-block: 6px;\r\n      transition:\r\n        border-color ease-in-out 0.15s,\r\n        box-shadow ease-in-out 0.15s;\r\n      width: 100%;\r\n      border-start-end-radius: 0;\r\n      border-end-end-radius: 0;\r\n      border-inline-end: 0;\r\n\r\n      &:focus {\r\n        border-color: form-control.$focus-border-color;\r\n        box-shadow: inset 0 0 0 form-control.$focus-border-width form-control.$focus-border-color;\r\n        outline: 0;\r\n      }\r\n\r\n      &::-ms-clear {\r\n        display: none;\r\n      }\r\n\r\n      &:not(:placeholder-shown) + label {\r\n        width: $height;\r\n        padding-inline-end: units.$u1;\r\n\r\n        .label-text {\r\n          @include utilities.sr-only();\r\n        }\r\n      }\r\n    }\r\n\r\n    label {\r\n      bottom: units.$u1;\r\n      height: $height;\r\n      left: 0;\r\n      right: units.$u5;\r\n      padding-block: units.$u1;\r\n      padding-inline-start: units.$u1;\r\n      cursor: text;\r\n      position: absolute;\r\n      top: 0;\r\n      overflow: hidden;\r\n      /* stylelint-disable declaration-property-value-disallowed-list -- The following properties are needed to emulate the browser native placeholder attribute behavior */\r\n      white-space: nowrap;\r\n      text-overflow: ellipsis;\r\n      /* stylelint-enable-next-line declaration-property-value-disallowed-list */\r\n\r\n      dso-icon {\r\n        color: colors.$grasgroen;\r\n        cursor: default;\r\n        margin: -8px;\r\n        padding: 8px;\r\n        width: $height;\r\n        height: $height;\r\n      }\r\n\r\n      .label-text {\r\n        margin-left: units.$u1;\r\n        color: colors.$grijs-60;\r\n      }\r\n    }\r\n\r\n    button {\r\n      background-color: transparent;\r\n      border: 0;\r\n      box-shadow: none;\r\n      color: colors.$grasgroen;\r\n      font-size: 0;\r\n      height: $height;\r\n      padding: units.$u1;\r\n      position: absolute;\r\n      right: 0;\r\n      text-align: center;\r\n      top: 0;\r\n      width: $height;\r\n    }\r\n  }\r\n}\r\n\r\n.dso-button-container {\r\n  position: relative;\r\n\r\n  display: flex;\r\n  align-items: center;\r\n  gap: units.$u1;\r\n  flex-shrink: 0;\r\n\r\n  padding-inline: units.$u1;\r\n\r\n  border: 1px solid colors.$bosgroen;\r\n  border-inline-start: 0;\r\n  border-start-end-radius: scaffolding.$border-radius-base;\r\n  border-end-end-radius: scaffolding.$border-radius-base;\r\n\r\n  button {\r\n    appearance: none;\r\n    padding: 0;\r\n    border: 0;\r\n    background-color: transparent;\r\n    color: colors.$grasgroen;\r\n\r\n    &:disabled {\r\n      color: colors.$grijs-20;\r\n    }\r\n  }\r\n\r\n  .divider {\r\n    position: absolute;\r\n    inset-inline-start: 0;\r\n    inset-block-start: units.$u1;\r\n    inset-block-end: units.$u1;\r\n\r\n    inline-size: 1px;\r\n\r\n    background-color: colors.$grijs-20;\r\n  }\r\n}\r\n","import { h, Component, ComponentInterface, Prop, Event, EventEmitter, Method } from \"@stencil/core\";\r\nimport {\r\n  MarkBarInputEvent,\r\n  MarkBarClearEvent,\r\n  MarkBarPaginationEvent,\r\n  MarkBarFocusOptions,\r\n} from \"./mark-bar.interfaces\";\r\n\r\n@Component({\r\n  tag: \"dso-mark-bar\",\r\n  styleUrl: \"./mark-bar.scss\",\r\n  shadow: true,\r\n})\r\nexport class MarkBar implements ComponentInterface {\r\n  /**\r\n   * The current search value.\r\n   */\r\n  @Prop()\r\n  value?: string;\r\n\r\n  /**\r\n   * The label for the input field.\r\n   */\r\n  @Prop()\r\n  label = \"Zoeken in document\";\r\n\r\n  /**\r\n   * The current (one-based) highlighted search item.\r\n   */\r\n  @Prop()\r\n  current?: number;\r\n\r\n  /**\r\n   * Total number of search results.\r\n   */\r\n  @Prop()\r\n  totalCount?: number;\r\n\r\n  /**\r\n   * Focuses the input field.\r\n   */\r\n  @Method()\r\n  async dsoFocus(options: MarkBarFocusOptions = {}) {\r\n    this.inputElement?.focus();\r\n\r\n    if (options.select) {\r\n      this.inputElement?.select();\r\n    }\r\n  }\r\n\r\n  /**\r\n   * Emitted each time the user types in the search field.\r\n   */\r\n  @Event({ bubbles: false })\r\n  dsoInput!: EventEmitter<MarkBarInputEvent>;\r\n\r\n  /**\r\n   * Emitted when user activates \"next search result\" button.\r\n   */\r\n  @Event({ bubbles: false })\r\n  dsoNext!: EventEmitter<MarkBarPaginationEvent>;\r\n\r\n  /**\r\n   * Emitted when user activates \"previous search result\" button.\r\n   */\r\n  @Event({ bubbles: false })\r\n  dsoPrevious!: EventEmitter<MarkBarPaginationEvent>;\r\n\r\n  /**\r\n   * Emitted when user activates \"clear search result\" button.\r\n   */\r\n  @Event({ bubbles: false })\r\n  dsoClear!: EventEmitter<MarkBarClearEvent>;\r\n\r\n  private inputElement?: HTMLInputElement;\r\n\r\n  private handleInput = (e: Event) => {\r\n    if (!(e.target instanceof HTMLInputElement)) {\r\n      return;\r\n    }\r\n\r\n    this.dsoInput.emit({\r\n      originalEvent: e,\r\n      value: e.target.value,\r\n    });\r\n  };\r\n\r\n  private handleNext = (e: MouseEvent | KeyboardEvent) => {\r\n    this.dsoNext.emit({ originalEvent: e });\r\n  };\r\n\r\n  private handlePrevious = (e: MouseEvent) => {\r\n    this.dsoPrevious.emit({ originalEvent: e });\r\n  };\r\n\r\n  private handleClear = (e: MouseEvent) => {\r\n    this.dsoClear.emit({ originalEvent: e });\r\n  };\r\n\r\n  private handleKeyDown = (e: KeyboardEvent) => {\r\n    if (e.key === \"Enter\") {\r\n      this.handleNext(e);\r\n    }\r\n  };\r\n\r\n  render() {\r\n    const current = this.current || 0;\r\n    const totalCount = this.totalCount || 0;\r\n\r\n    return (\r\n      <div class=\"dso-mark-bar\">\r\n        <div class=\"dso-mark-bar-input\">\r\n          <input\r\n            type=\"text\"\r\n            id=\"search-input\"\r\n            value={this.value}\r\n            onInput={this.handleInput}\r\n            onKeyDown={this.handleKeyDown}\r\n            placeholder=\" \"\r\n            ref={(element) => (this.inputElement = element)}\r\n          />\r\n          <label htmlFor=\"search-input\">\r\n            <dso-icon class=\"dso-search-icon\" icon=\"search\"></dso-icon>\r\n            <span class=\"label-text\">{this.label}</span>\r\n          </label>\r\n          <button type=\"button\" onClick={this.handleClear}>\r\n            <dso-icon icon=\"times\"></dso-icon>\r\n            <span class=\"sr-only\">Zoekopdracht legen</span>\r\n          </button>\r\n        </div>\r\n        <div class=\"dso-button-container\">\r\n          <span class=\"divider\" />\r\n          <button type=\"button\" onClick={this.handlePrevious} disabled={current <= 1}>\r\n            <dso-icon icon=\"chevron-up\" class=\"hydrated\"></dso-icon>\r\n            <span class=\"sr-only\">Vorig zoekresultaat</span>\r\n          </button>\r\n          <span>\r\n            {current}/{totalCount}\r\n          </span>\r\n          <button type=\"button\" onClick={this.handleNext} disabled={current >= totalCount}>\r\n            <dso-icon icon=\"chevron-down\" class=\"hydrated\"></dso-icon>\r\n            <span class=\"sr-only\">Volgend zoekresultaat</span>\r\n          </button>\r\n        </div>\r\n      </div>\r\n    );\r\n  }\r\n}\r\n"],"version":3}
+{"file":"dso-mark-bar.entry.js","mappings":"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","names":[],"sources":["src/components/mark-bar/mark-bar.scss?tag=dso-mark-bar&encapsulation=shadow","src/components/mark-bar/mark-bar.tsx"],"sourcesContent":["@use \"~dso-toolkit/src/variables/units\";\r\n@use \"~dso-toolkit/src/variables/colors\";\r\n@use \"~dso-toolkit/src/variables/zindex\";\r\n@use \"~dso-toolkit/src/utilities\";\r\n@use \"~dso-toolkit/src/variables/scaffolding\";\r\n@use \"~dso-toolkit/src/variables/typography\";\r\n@use \"~dso-toolkit/src/components/form-control\";\r\n\r\n@include utilities.box-sizing();\r\n\r\n:host {\r\n  display: block;\r\n  background-color: colors.$wit;\r\n}\r\n\r\n.sr-only {\r\n  @include utilities.sr-only();\r\n}\r\n\r\n$height: units.$ru5;\r\n$focus-border-width: 1px;\r\n\r\n.dso-mark-bar {\r\n  display: flex;\r\n  flex-grow: 1;\r\n\r\n  .dso-mark-bar-input {\r\n    display: flex;\r\n    position: relative;\r\n    width: 100%;\r\n\r\n    input {\r\n      background-color: transparent;\r\n      background-image: none;\r\n      border: 1px solid form-control.$focus-border-color;\r\n      border-radius: 4px;\r\n      border-width: 1px;\r\n      box-shadow: none;\r\n      display: block;\r\n      font-size: typography.$root-font-size-base;\r\n      height: $height;\r\n      line-height: $height;\r\n      padding-inline: $height;\r\n      padding-block: 6px;\r\n      transition:\r\n        border-color ease-in-out 0.15s,\r\n        box-shadow ease-in-out 0.15s;\r\n      width: 100%;\r\n      border-start-end-radius: 0;\r\n      border-end-end-radius: 0;\r\n      border-inline-end: 0;\r\n\r\n      &:focus {\r\n        border-color: form-control.$focus-border-color;\r\n        box-shadow: inset 0 0 0 form-control.$focus-border-width form-control.$focus-border-color;\r\n        outline: 0;\r\n      }\r\n\r\n      &::-ms-clear {\r\n        display: none;\r\n      }\r\n\r\n      &:not(:placeholder-shown) + label {\r\n        width: $height;\r\n        padding-inline-end: units.$u1;\r\n\r\n        .label-text {\r\n          @include utilities.sr-only();\r\n        }\r\n      }\r\n    }\r\n\r\n    label {\r\n      bottom: units.$u1;\r\n      height: $height;\r\n      left: 0;\r\n      right: units.$u5;\r\n      padding-block: units.$u1;\r\n      padding-inline-start: units.$u1;\r\n      cursor: text;\r\n      position: absolute;\r\n      top: 0;\r\n      overflow: hidden;\r\n      /* stylelint-disable declaration-property-value-disallowed-list -- The following properties are needed to emulate the browser native placeholder attribute behavior */\r\n      white-space: nowrap;\r\n      text-overflow: ellipsis;\r\n      /* stylelint-enable-next-line declaration-property-value-disallowed-list */\r\n\r\n      dso-icon {\r\n        color: colors.$grasgroen;\r\n        cursor: default;\r\n        margin: -8px;\r\n        padding: 8px;\r\n        width: $height;\r\n        height: $height;\r\n      }\r\n\r\n      .label-text {\r\n        margin-left: units.$u1;\r\n        color: colors.$grijs-60;\r\n      }\r\n    }\r\n\r\n    button {\r\n      background-color: transparent;\r\n      border: 0;\r\n      box-shadow: none;\r\n      color: colors.$grasgroen;\r\n      font-size: 0;\r\n      height: $height;\r\n      padding: units.$u1;\r\n      position: absolute;\r\n      right: 0;\r\n      text-align: center;\r\n      top: 0;\r\n      width: $height;\r\n    }\r\n  }\r\n}\r\n\r\n.dso-button-container {\r\n  position: relative;\r\n\r\n  display: flex;\r\n  align-items: center;\r\n  gap: units.$u1;\r\n  flex-shrink: 0;\r\n\r\n  padding-inline: units.$u1;\r\n\r\n  border: 1px solid colors.$bosgroen;\r\n  border-inline-start: 0;\r\n  border-start-end-radius: scaffolding.$border-radius-base;\r\n  border-end-end-radius: scaffolding.$border-radius-base;\r\n\r\n  button {\r\n    appearance: none;\r\n    padding: 0;\r\n    border: 0;\r\n    background-color: transparent;\r\n    color: colors.$grasgroen;\r\n\r\n    &:disabled {\r\n      color: colors.$grijs-20;\r\n    }\r\n  }\r\n\r\n  .divider {\r\n    position: absolute;\r\n    inset-inline-start: 0;\r\n    inset-block-start: units.$u1;\r\n    inset-block-end: units.$u1;\r\n\r\n    inline-size: 1px;\r\n\r\n    background-color: colors.$grijs-20;\r\n  }\r\n}\r\n","import { h, Component, ComponentInterface, Prop, Event, EventEmitter, Method } from \"@stencil/core\";\r\nimport {\r\n  MarkBarInputEvent,\r\n  MarkBarClearEvent,\r\n  MarkBarPaginationEvent,\r\n  MarkBarFocusOptions,\r\n} from \"./mark-bar.interfaces\";\r\n\r\n@Component({\r\n  tag: \"dso-mark-bar\",\r\n  styleUrl: \"./mark-bar.scss\",\r\n  shadow: true,\r\n})\r\nexport class MarkBar implements ComponentInterface {\r\n  /**\r\n   * The current search value.\r\n   */\r\n  @Prop()\r\n  value?: string;\r\n\r\n  /**\r\n   * The label for the input field.\r\n   */\r\n  @Prop()\r\n  label = \"Zoeken in document\";\r\n\r\n  /**\r\n   * The current (one-based) highlighted search item.\r\n   */\r\n  @Prop()\r\n  current?: number;\r\n\r\n  /**\r\n   * Total number of search results.\r\n   */\r\n  @Prop()\r\n  totalCount?: number;\r\n\r\n  /**\r\n   * Focuses the input field.\r\n   */\r\n  @Method()\r\n  async dsoFocus(options: MarkBarFocusOptions = {}) {\r\n    this.inputElement?.focus();\r\n\r\n    if (options.select) {\r\n      this.inputElement?.select();\r\n    }\r\n  }\r\n\r\n  /**\r\n   * Emitted each time the user types in the search field.\r\n   */\r\n  @Event({ bubbles: false })\r\n  dsoInput!: EventEmitter<MarkBarInputEvent>;\r\n\r\n  /**\r\n   * Emitted when user activates \"next search result\" button.\r\n   */\r\n  @Event({ bubbles: false })\r\n  dsoNext!: EventEmitter<MarkBarPaginationEvent>;\r\n\r\n  /**\r\n   * Emitted when user activates \"previous search result\" button.\r\n   */\r\n  @Event({ bubbles: false })\r\n  dsoPrevious!: EventEmitter<MarkBarPaginationEvent>;\r\n\r\n  /**\r\n   * Emitted when user activates \"clear search result\" button.\r\n   */\r\n  @Event({ bubbles: false })\r\n  dsoClear!: EventEmitter<MarkBarClearEvent>;\r\n\r\n  private inputElement?: HTMLInputElement;\r\n\r\n  private handleInput = (e: Event) => {\r\n    if (!(e.target instanceof HTMLInputElement)) {\r\n      return;\r\n    }\r\n\r\n    this.dsoInput.emit({\r\n      originalEvent: e,\r\n      value: e.target.value,\r\n    });\r\n  };\r\n\r\n  private handleNext = (e: MouseEvent | KeyboardEvent) => {\r\n    this.dsoNext.emit({ originalEvent: e });\r\n  };\r\n\r\n  private handlePrevious = (e: MouseEvent) => {\r\n    this.dsoPrevious.emit({ originalEvent: e });\r\n  };\r\n\r\n  private handleClear = (e: MouseEvent) => {\r\n    this.dsoClear.emit({ originalEvent: e });\r\n  };\r\n\r\n  private handleKeyDown = (e: KeyboardEvent) => {\r\n    if (e.key === \"Enter\") {\r\n      this.handleNext(e);\r\n    }\r\n  };\r\n\r\n  render() {\r\n    const current = this.current || 0;\r\n    const totalCount = this.totalCount || 0;\r\n\r\n    return (\r\n      <div class=\"dso-mark-bar\">\r\n        <div class=\"dso-mark-bar-input\">\r\n          <input\r\n            type=\"text\"\r\n            id=\"search-input\"\r\n            value={this.value}\r\n            onInput={this.handleInput}\r\n            onKeyDown={this.handleKeyDown}\r\n            placeholder=\" \"\r\n            ref={(element) => (this.inputElement = element)}\r\n          />\r\n          <label htmlFor=\"search-input\">\r\n            <dso-icon class=\"dso-search-icon\" icon=\"search\"></dso-icon>\r\n            <span class=\"label-text\">{this.label}</span>\r\n          </label>\r\n          <button type=\"button\" onClick={this.handleClear}>\r\n            <dso-icon icon=\"times\"></dso-icon>\r\n            <span class=\"sr-only\">Zoekopdracht legen</span>\r\n          </button>\r\n        </div>\r\n        <div class=\"dso-button-container\">\r\n          <span class=\"divider\" />\r\n          <button type=\"button\" onClick={this.handlePrevious} disabled={current <= 1}>\r\n            <dso-icon icon=\"chevron-up\" class=\"hydrated\"></dso-icon>\r\n            <span class=\"sr-only\">Vorig zoekresultaat</span>\r\n          </button>\r\n          <span>\r\n            {current}/{totalCount}\r\n          </span>\r\n          <button type=\"button\" onClick={this.handleNext} disabled={current >= totalCount}>\r\n            <dso-icon icon=\"chevron-down\" class=\"hydrated\"></dso-icon>\r\n            <span class=\"sr-only\">Volgend zoekresultaat</span>\r\n          </button>\r\n        </div>\r\n      </div>\r\n    );\r\n  }\r\n}\r\n"],"version":3}