@dso-toolkit/core 62.25.0 → 62.26.0

package/dist/collection/components/map-controls/map-controls.css

@@ -1,14 +1,14 @@
 :host {
   background-color: #fff;
   border: 1px solid #ccc;
-  bottom: 0;
+  inset-block-end: 0;
   display: block;
   font-family: Asap, sans-serif;
   position: absolute;
-  top: 0;
-  left: 100%;
+  inset-block-start: 0;
+  inset-inline-start: 100%;
   transition: transform 300ms ease;
-  width: 300px;
+  inline-size: 300px;
 }
 
 *,
@@ -25,7 +25,7 @@
   display: none;
 }
 :host([open]) .zoom-buttons {
-  top: 16px;
+  inset-block-start: 16px;
 }
 
 button {
@@ -52,10 +52,10 @@ button::-moz-focus-inner {
   display: inline-block;
   font-size: 1em;
   font-weight: 500;
-  margin-bottom: 0;
+  margin-block-end: 0;
   text-decoration: none;
   touch-action: manipulation;
-  text-align: left;
+  text-align: start;
   user-select: none;
   vertical-align: middle;
   background-color: #fff;
@@ -65,17 +65,20 @@ button::-moz-focus-inner {
   border-style: solid;
   border-radius: 4px;
   line-height: 1.5;
-  min-width: 56px;
-  padding: 11px 15px;
+  min-inline-size: 56px;
+  padding-block: 11px;
+  padding-inline: 15px;
   border: 0;
   box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.5);
   font-weight: 600;
-  margin-right: 16px;
+  margin-inline-end: 16px;
   padding: 8px 16px;
   white-space: nowrap;
   position: absolute;
-  right: calc(100% + 56px);
-  top: 16px;
+  inset-inline-end: calc(
+    100% + 56px
+  );
+  inset-block-start: 16px;
 }
 .toggle-visibility-button:focus, .toggle-visibility-button:focus-visible {
   outline-offset: 2px;
@@ -103,26 +106,26 @@ button::-moz-focus-inner {
 }
 .toggle-visibility-button.dso-small dso-icon,
 .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 {
-  margin-bottom: -4px;
-  margin-top: -4px;
+  margin-block-end: -4px;
+  margin-block-start: -4px;
 }
 .toggle-visibility-button.dso-small.dso-spinner-left::before {
-  height: 16px;
-  width: 16px;
+  block-size: 16px;
+  inline-size: 16px;
 }
 .toggle-visibility-button.dso-small.dso-spinner-right::after {
-  height: 16px;
-  width: 16px;
+  block-size: 16px;
+  inline-size: 16px;
 }
 .toggle-visibility-button dso-icon,
 .toggle-visibility-button svg.di {
-  margin-left: -8px;
-  margin-right: 8px;
+  margin-inline-start: -8px;
+  margin-inline-end: 8px;
 }
 .toggle-visibility-button span + dso-icon,
 .toggle-visibility-button span + svg.di {
-  margin-left: 8px;
-  margin-right: -8px;
+  margin-inline-start: 8px;
+  margin-inline-end: -8px;
 }
 .toggle-visibility-button.dso-spinner-left[disabled], .toggle-visibility-button.dso-spinner-right[disabled] {
   background-color: #fff;
@@ -134,48 +137,48 @@ button::-moz-focus-inner {
   background-repeat: no-repeat;
   content: "";
   display: inline-block;
-  height: 24px;
+  block-size: 24px;
   vertical-align: top;
-  width: 24px;
-  margin-right: 8px;
+  inline-size: 24px;
+  margin-inline-end: 8px;
 }
 .toggle-visibility-button.dso-spinner-left:not([disabled]):hover::before {
   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");
   background-repeat: no-repeat;
   content: "";
   display: inline-block;
-  height: 24px;
+  block-size: 24px;
   vertical-align: top;
-  width: 24px;
-  margin-right: 8px;
+  inline-size: 24px;
+  margin-inline-end: 8px;
 }
 .toggle-visibility-button.dso-spinner-left:not([disabled]).dso-small:hover::before {
-  height: 16px;
-  width: 16px;
+  block-size: 16px;
+  inline-size: 16px;
 }
 .toggle-visibility-button.dso-spinner-right::after {
   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");
   background-repeat: no-repeat;
   content: "";
   display: inline-block;
-  height: 24px;
+  block-size: 24px;
   vertical-align: top;
-  width: 24px;
-  margin-left: 8px;
+  inline-size: 24px;
+  margin-inline-start: 8px;
 }
 .toggle-visibility-button.dso-spinner-right:not([disabled]):hover::after {
   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");
   background-repeat: no-repeat;
   content: "";
   display: inline-block;
-  height: 24px;
+  block-size: 24px;
   vertical-align: top;
-  width: 24px;
-  margin-left: 8px;
+  inline-size: 24px;
+  margin-inline-start: 8px;
 }
 .toggle-visibility-button.dso-spinner-right:not([disabled]).dso-small:hover::after {
-  height: 16px;
-  width: 16px;
+  block-size: 16px;
+  inline-size: 16px;
 }
 .toggle-visibility-button:focus-visible {
   background-color: #39870c;
@@ -191,17 +194,17 @@ button::-moz-focus-inner {
   flex-wrap: wrap;
   flex: 0 0;
   position: absolute;
-  right: calc(100% + 16px);
-  top: 16px;
+  inset-inline-end: calc(100% + 16px);
+  inset-block-start: 16px;
 }
 .zoom-buttons button {
   display: inline-block;
   font-size: 1em;
   font-weight: 500;
-  margin-bottom: 0;
+  margin-block-end: 0;
   text-decoration: none;
   touch-action: manipulation;
-  text-align: left;
+  text-align: start;
   user-select: none;
   vertical-align: middle;
   background-color: #fff;
@@ -211,17 +214,18 @@ button::-moz-focus-inner {
   border-style: solid;
   border-radius: 4px;
   line-height: 1.5;
-  min-width: 56px;
-  padding: 11px 15px;
+  min-inline-size: 56px;
+  padding-block: 11px;
+  padding-inline: 15px;
   border: 0;
   padding: 8px;
   border-radius: 0;
-  border-top-left-radius: 4px;
-  border-top-right-radius: 4px;
+  border-start-start-radius: 4px;
+  border-start-end-radius: 4px;
   flex: 0 0 100%;
-  height: 40px;
-  min-width: auto;
-  width: 40px;
+  block-size: 40px;
+  min-inline-size: auto;
+  inline-size: 40px;
 }
 .zoom-buttons button:focus, .zoom-buttons button:focus-visible {
   outline-offset: 2px;
@@ -249,21 +253,21 @@ button::-moz-focus-inner {
 }
 .zoom-buttons button.dso-small dso-icon,
 .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 {
-  margin-bottom: -4px;
-  margin-top: -4px;
+  margin-block-end: -4px;
+  margin-block-start: -4px;
 }
 .zoom-buttons button.dso-small.dso-spinner-left::before {
-  height: 16px;
-  width: 16px;
+  block-size: 16px;
+  inline-size: 16px;
 }
 .zoom-buttons button.dso-small.dso-spinner-right::after {
-  height: 16px;
-  width: 16px;
+  block-size: 16px;
+  inline-size: 16px;
 }
 .zoom-buttons button > span {
   position: absolute;
-  width: 1px;
-  height: 1px;
+  inline-size: 1px;
+  block-size: 1px;
   padding: 0;
   margin: -1px;
   overflow: hidden;
@@ -280,48 +284,48 @@ button::-moz-focus-inner {
   background-repeat: no-repeat;
   content: "";
   display: inline-block;
-  height: 24px;
+  block-size: 24px;
   vertical-align: top;
-  width: 24px;
-  margin-right: 8px;
+  inline-size: 24px;
+  margin-inline-end: 8px;
 }
 .zoom-buttons button.dso-spinner-left:not([disabled]):hover::before {
   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");
   background-repeat: no-repeat;
   content: "";
   display: inline-block;
-  height: 24px;
+  block-size: 24px;
   vertical-align: top;
-  width: 24px;
-  margin-right: 8px;
+  inline-size: 24px;
+  margin-inline-end: 8px;
 }
 .zoom-buttons button.dso-spinner-left:not([disabled]).dso-small:hover::before {
-  height: 16px;
-  width: 16px;
+  block-size: 16px;
+  inline-size: 16px;
 }
 .zoom-buttons button.dso-spinner-right::after {
   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");
   background-repeat: no-repeat;
   content: "";
   display: inline-block;
-  height: 24px;
+  block-size: 24px;
   vertical-align: top;
-  width: 24px;
-  margin-left: 8px;
+  inline-size: 24px;
+  margin-inline-start: 8px;
 }
 .zoom-buttons button.dso-spinner-right:not([disabled]):hover::after {
   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");
   background-repeat: no-repeat;
   content: "";
   display: inline-block;
-  height: 24px;
+  block-size: 24px;
   vertical-align: top;
-  width: 24px;
-  margin-left: 8px;
+  inline-size: 24px;
+  margin-inline-start: 8px;
 }
 .zoom-buttons button.dso-spinner-right:not([disabled]).dso-small:hover::after {
-  height: 16px;
-  width: 16px;
+  block-size: 16px;
+  inline-size: 16px;
 }
 .zoom-buttons button:focus-visible {
   background-color: #39870c;
@@ -331,19 +335,19 @@ button::-moz-focus-inner {
 }
 .zoom-buttons button + button {
   border-radius: 0;
-  border-bottom-left-radius: 4px;
-  border-bottom-right-radius: 4px;
-  border-top: 1px solid #ccc;
+  border-end-start-radius: 4px;
+  border-end-end-radius: 4px;
+  border-block-start: 1px solid #ccc;
 }
 
 .close-button {
   display: inline-block;
   font-size: 1em;
   font-weight: 500;
-  margin-bottom: 0;
+  margin-block-end: 0;
   text-decoration: none;
   touch-action: manipulation;
-  text-align: left;
+  text-align: start;
   user-select: none;
   vertical-align: middle;
   border: 0;
@@ -353,8 +357,8 @@ button::-moz-focus-inner {
   background-color: transparent;
   padding: 0;
   position: absolute;
-  right: 16px;
-  top: 16px;
+  inset-inline-end: 16px;
+  inset-block-start: 16px;
 }
 .close-button:focus, .close-button:focus-visible {
   outline-offset: 2px;
@@ -382,7 +386,7 @@ button::-moz-focus-inner {
   position: relative;
 }
 .close-button.dso-truncate {
-  max-width: 100%;
+  max-inline-size: 100%;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
@@ -392,25 +396,25 @@ button::-moz-focus-inner {
   background-repeat: no-repeat;
   content: "";
   display: inline-block;
-  height: 24px;
+  block-size: 24px;
   vertical-align: middle;
-  width: 24px;
-  margin-right: 8px;
+  inline-size: 24px;
+  margin-inline-end: 8px;
 }
 .close-button.dso-spinner-right::after {
   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");
   background-repeat: no-repeat;
   content: "";
   display: inline-block;
-  height: 24px;
+  block-size: 24px;
   vertical-align: middle;
-  width: 24px;
-  margin-left: 8px;
+  inline-size: 24px;
+  margin-inline-start: 8px;
 }
 .close-button > span {
   position: absolute;
-  width: 1px;
-  height: 1px;
+  inline-size: 1px;
+  block-size: 1px;
   padding: 0;
   margin: -1px;
   overflow: hidden;
@@ -421,7 +425,7 @@ button::-moz-focus-inner {
 section:not([hidden]) {
   display: flex;
   flex-direction: column;
-  height: 100%;
+  block-size: 100%;
 }
 
 header,
@@ -430,7 +434,7 @@ header,
 }
 
 header {
-  border-bottom: 1px solid #ccc;
+  border-block-end: 1px solid #ccc;
   flex-grow: 0;
   position: relative;
 }
@@ -443,19 +447,19 @@ header h2 {
 
 @media screen and (max-width: 767px) {
   .toggle-visibility-button {
-    height: 40px;
-    margin-right: 0;
-    min-width: auto;
-    right: calc(100% + 16px);
-    width: 40px;
+    block-size: 40px;
+    margin-inline-end: 0;
+    min-inline-size: auto;
+    inset-inline-end: calc(100% + 16px);
+    inline-size: 40px;
   }
   .toggle-visibility-button dso-icon {
-    margin-right: 0;
+    margin-inline-end: 0;
   }
   .toggle-visibility-button span {
     visibility: hidden;
   }
   .zoom-buttons {
-    top: 72px;
+    inset-block-start: 72px;
   }
 }

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

@@ -54,7 +54,7 @@ export class MapControls {
         });
     }
     render() {
-        return (h(Host, { key: '811ed45e16756a18deea944ab3a830de0337515c' }, h("button", { key: '5eb63aafc7e83f90fbb93a8ffef51189f86dabfd', 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: '10c61d07bdabde651a1b054bdfcffff96b09ffa6', icon: "layers" }), h("span", { key: '495d5f0f496812b699b0d73384ff7a3cf44cdf83' }, "Kaartlagen")), h("div", { key: 'f7cc57743bd35805fe1290884c42be7b9f28deec', class: "zoom-buttons" }, h("button", { key: 'dc849568c9f89a3a97e089a748e4f9cab1bb244a', type: "button", onClick: (e) => this.dsoZoomIn.emit(e), disabled: this.disableZoom === "in" || this.disableZoom === "both" }, h("span", { key: 'e2f3dc349c28b85641c31b31fb562ac3d978ad8f' }, "Zoom in"), h("dso-icon", { key: '685d9951a3f210d41c127445221fbc4202f81f8b', icon: "plus" })), h("button", { key: 'c207b3d18695514f2450e0541bd96a9959e79c41', type: "button", onClick: (e) => this.dsoZoomOut.emit(e), disabled: this.disableZoom === "out" || this.disableZoom === "both" }, h("span", { key: '5ae124eec302ed0eb4311a863724319efe11ac07' }, "Zoom uit"), h("dso-icon", { key: '0d42226e456acc25c35a27e8b2f218b22c6f4108', icon: "minus" }))), h("section", { key: 'f1c8eeaae2dc0b107abe12068ab0c1dc55a083ab', hidden: this.hideContent }, h("header", { key: '30fbc77b30f39fb09f1aaca1ccbcf9d159aec5c1' }, h("h2", { key: '4ef3fd5e1af61d3c6e904ab3185db652fdfa6bca' }, this.panelTitle), h("button", { key: 'ec6d354424c9e918ed8b548944be847697f8ff39', type: "button", class: "close-button", onClick: (e) => this.toggleVisibility(e), ref: (element) => (__classPrivateFieldSet(this, _MapControls_closeButtonElement, element, "f")) }, h("span", { key: 'ff58412ce86c3d0831acb22e82b3ff70707417c4' }, "Verberg paneel ", this.panelTitle), h("dso-icon", { key: '4dd038854693f096c3436f2a4c2a94748a9787e1', icon: "times" }))), h("dso-scrollable", { key: '645eb72dc729951ff79034339b905e36e91e4e7b' }, h("div", { key: '6df947228a9dc9bf2ed52ab9b3ce0874ed2618cb', class: "content" }, h("slot", { key: '810c62ea5de995e1423f664e11411213df18bfec' }))))));
+        return (h(Host, { key: '836e222e7b41de1b9d8a921f92fa2323db516f2d' }, h("button", { key: '72e2bb5a65c0571583f952d5ff5683adb24cc013', 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: 'efe272631cf6f21fb0644ffbecf4ecf4edd4aea6', icon: "layers" }), h("span", { key: '7e64693ba4a7f0ced1b75ec7380d7d0478bd5308' }, "Kaartlagen")), h("div", { key: '0c160bc7b5fff0e8c3a424e51f9c7377fe3dc9b1', class: "zoom-buttons" }, h("button", { key: 'c2544b74e1ac3262f2df9f0785b119e6ae0820e1', type: "button", onClick: (e) => this.dsoZoomIn.emit(e), disabled: this.disableZoom === "in" || this.disableZoom === "both" }, h("span", { key: '8294bc7dad7e57f172fe7b8bed2c4a0fe4398051' }, "Zoom in"), h("dso-icon", { key: '62620323d7f6d548ef7ee325f5625d9fa767c847', icon: "plus" })), h("button", { key: '6636635508be6177978132cbe631bd7d148701b8', type: "button", onClick: (e) => this.dsoZoomOut.emit(e), disabled: this.disableZoom === "out" || this.disableZoom === "both" }, h("span", { key: '6f428212b214543f85b69163db40cc23d9cafe18' }, "Zoom uit"), h("dso-icon", { key: '9eac9fe2b03deeb7d9bda24b23d5007e6a13a9fd', icon: "minus" }))), h("section", { key: 'cf197be64c429699554be6dbdb6219b927f4489f', hidden: this.hideContent }, h("header", { key: 'ddfefb5092d921c012230fda213ba2b6a1bebb5a' }, h("h2", { key: 'f1eedb07c84ffe7ac33efc1f568c3a79ec7662e2' }, this.panelTitle), h("button", { key: 'aeb77b9fbdda05bcf6c31f90f98f226ac46c7be9', type: "button", class: "close-button", onClick: (e) => this.toggleVisibility(e), ref: (element) => (__classPrivateFieldSet(this, _MapControls_closeButtonElement, element, "f")) }, h("span", { key: 'faec16365842e7ba006093b7ffcf869b5c2a9eaf' }, "Verberg paneel ", this.panelTitle), h("dso-icon", { key: 'de430d6e80d63a62aed08716f603a5865712e34d', icon: "times" }))), h("dso-scrollable", { key: '773b3749ae1ccdbadb7088c65bb6396b39b453cf' }, h("div", { key: 'c28101fe2efe0d5147e8042a22398d7ab09d7046', class: "content" }, h("slot", { key: '64247ff8bc30490e3ae904be24e672b20eb83c5e' }))))));
     }
     static get is() { return "dso-map-controls"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/map-overlays/map-overlays.css

@@ -10,8 +10,8 @@
 
 .sr-only {
   position: absolute;
-  width: 1px;
-  height: 1px;
+  inline-size: 1px;
+  block-size: 1px;
   padding: 0;
   margin: -1px;
   overflow: hidden;
@@ -22,15 +22,15 @@
 fieldset {
   border: 0;
   margin: 0;
-  min-width: 0;
+  min-inline-size: 0;
   padding: 0;
 }
 fieldset .control-label {
   display: inline-block;
   font-weight: bold;
-  margin-bottom: 8px;
-  max-width: 100%;
-  text-align: left;
+  margin-block-end: 8px;
+  max-inline-size: 100%;
+  text-align: start;
 }
 
 p[slot=info] {

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

@@ -23,7 +23,7 @@ export class MapOverlays {
         for (const ref in this.selectableRefs) {
             delete this.selectableRefs[ref];
         }
-        return (h("fieldset", { key: 'e064b6e3c8270a7ae1a88a75310e643184b0c871', class: "form-group dso-checkboxes" }, h("legend", { key: 'be69f5fb324f9699693c8a59e02488d1ef299f80', class: "sr-only" }, "Kaartlagen"), h("div", { key: '31c5b7a451d53c2bb88078741a6bf003a5f38171', class: "dso-label-container" }, h("span", { key: 'f923ee4a9eab8445103642d68478e76f1393fa31', class: "control-label", "aria-hidden": "true" }, "Kaartlagen")), h("div", { key: 'a3f52d6e7f87ecfdb6dd5ec354e728ec78ff392a', 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", { key: 'd4daba00ddfa6e9719a4978cdf414f8a2b4673b6', class: "form-group dso-checkboxes" }, h("legend", { key: '3d449225c4ff575a32b2b7734bbfd73ed3d3e717', class: "sr-only" }, "Kaartlagen"), h("div", { key: '5b58246094c74db536e1ffa96bfb6ad474ec6e61', class: "dso-label-container" }, h("span", { key: '738e98bf5695df4cf36b9f8877997865b5de4994', class: "control-label", "aria-hidden": "true" }, "Kaartlagen")), h("div", { key: 'd4f9547a84474f6c1aeba14fb552a55754085f18', 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 is() { return "dso-map-overlays"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/mark-bar/mark-bar.css

@@ -11,8 +11,8 @@
 
 .sr-only {
   position: absolute;
-  width: 1px;
-  height: 1px;
+  inline-size: 1px;
+  block-size: 1px;
   padding: 0;
   margin: -1px;
   overflow: hidden;
@@ -27,7 +27,7 @@
 .dso-mark-bar .dso-mark-bar-input {
   display: flex;
   position: relative;
-  width: 100%;
+  inline-size: 100%;
 }
 .dso-mark-bar .dso-mark-bar-input input {
   background-color: transparent;
@@ -38,12 +38,12 @@
   box-shadow: none;
   display: block;
   font-size: 1rem;
-  height: 2.5rem;
+  block-size: 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%;
+  inline-size: 100%;
   border-start-end-radius: 0;
   border-end-end-radius: 0;
   border-inline-end: 0;
@@ -57,13 +57,13 @@
   display: none;
 }
 .dso-mark-bar .dso-mark-bar-input input:not(:placeholder-shown) + label {
-  width: 2.5rem;
+  inline-size: 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;
+  inline-size: 1px;
+  block-size: 1px;
   padding: 0;
   margin: -1px;
   overflow: hidden;
@@ -71,15 +71,15 @@
   border: 0;
 }
 .dso-mark-bar .dso-mark-bar-input label {
-  bottom: 8px;
-  height: 2.5rem;
-  left: 0;
-  right: 40px;
+  inset-block-end: 8px;
+  block-size: 2.5rem;
+  inset-inline-start: 0;
+  inset-inline-end: 40px;
   padding-block: 8px;
   padding-inline-start: 8px;
   cursor: text;
   position: absolute;
-  top: 0;
+  inset-block-start: 0;
   overflow: hidden;
   /* stylelint-disable declaration-property-value-disallowed-list -- The following properties are needed to emulate the browser native placeholder attribute behavior */
   white-space: nowrap;
@@ -91,11 +91,11 @@
   cursor: default;
   margin: -8px;
   padding: 8px;
-  width: 2.5rem;
-  height: 2.5rem;
+  inline-size: 2.5rem;
+  block-size: 2.5rem;
 }
 .dso-mark-bar .dso-mark-bar-input label .label-text {
-  margin-left: 8px;
+  margin-inline-start: 8px;
   color: #666;
 }
 .dso-mark-bar .dso-mark-bar-input button {
@@ -104,13 +104,13 @@
   box-shadow: none;
   color: #39870c;
   font-size: 0;
-  height: 2.5rem;
+  block-size: 2.5rem;
   padding: 8px;
   position: absolute;
-  right: 0;
+  inset-inline-end: 0;
   text-align: center;
-  top: 0;
-  width: 2.5rem;
+  inset-block-start: 0;
+  inline-size: 2.5rem;
 }
 
 .dso-button-container {

package/dist/collection/components/mark-bar/mark-bar.js

@@ -42,7 +42,7 @@ export class MarkBar {
     render() {
         const current = this.current || 0;
         const totalCount = this.totalCount || 0;
-        return (h("div", { key: '86eb7b642e9767352fbc75a1daba29afcf55ce03', class: "dso-mark-bar" }, h("div", { key: '09ae8802d957d6b211c29bf63862a31c1aa73226', class: "dso-mark-bar-input" }, h("input", { key: 'aad7ce3b0fc2885f83a09763be64d83adbaf565a', type: "text", id: "search-input", value: this.value, onInput: this.handleInput, onKeyDown: this.handleKeyDown, placeholder: " ", ref: (element) => (this.inputElement = element) }), h("label", { key: 'a734d54fdde110aeb8c8cc4f01c1a0cf01c414ac', htmlFor: "search-input" }, h("dso-icon", { key: '3b608e3b58be2c1523481711906ccd6930ec3fb7', class: "dso-search-icon", icon: "search" }), h("span", { key: 'e2f2ef89c4444c90688947010f01c551a4604b2c', class: "label-text" }, this.label)), h("button", { key: '6d5ecdef20b596f3ce1c7a7a0240c11bc4f474c7', type: "button", onClick: this.handleClear }, h("dso-icon", { key: 'e28f8ff586da9c44be6dce7ebe60f0c2ab06068e', icon: "times" }), h("span", { key: 'b84ebcfa78721dfed4f195d4a684c66e2e1aca48', class: "sr-only" }, "Zoekopdracht legen"))), h("div", { key: 'ee0f15d11fc4997a51771eb13cbd75da919530ef', class: "dso-button-container" }, h("span", { key: 'c8bd69aa13ce337b8845d60bf38dee4c04cce547', class: "divider" }), h("button", { key: 'f235b21d3d068fbcef70b4d92d636ac2ffa0da39', type: "button", onClick: this.handlePrevious, disabled: current <= 1 }, h("dso-icon", { key: '587848082507cd57cd90e4c0f81be53d8e4df0b6', icon: "chevron-up", class: "hydrated" }), h("span", { key: '3f8e9c78ddc70fedc638528bfb0000b9ce4f91c9', class: "sr-only" }, "Vorig zoekresultaat")), h("span", { key: '88e285a9a36594ddfc782539fd66f566496526ed' }, current, "/", totalCount), h("button", { key: '732c37e44fb2eb9989754d606776c15d95b328c4', type: "button", onClick: this.handleNext, disabled: current >= totalCount }, h("dso-icon", { key: '72032a6914db0c1cdf967e02e470649f61056219', icon: "chevron-down", class: "hydrated" }), h("span", { key: '13cf1a7f9931e5bff22dbec53cfbf9464d8a5c72', class: "sr-only" }, "Volgend zoekresultaat")))));
+        return (h("div", { key: '82ef9a84a6953576bfebac49e0f4c7c676ec8e5e', class: "dso-mark-bar" }, h("div", { key: '7d0f787a6817767ed9ff8001eab1ef26d9a46656', class: "dso-mark-bar-input" }, h("input", { key: 'af06bc6f6003fdd707a9442f9846d2d94045a670', type: "text", id: "search-input", value: this.value, onInput: this.handleInput, onKeyDown: this.handleKeyDown, placeholder: " ", ref: (element) => (this.inputElement = element) }), h("label", { key: '061c17078705fd38c537e66a29b1b5af5bc9f0b8', htmlFor: "search-input" }, h("dso-icon", { key: '246ba69b0230946be0e4c1e3479acee36aca0872', class: "dso-search-icon", icon: "search" }), h("span", { key: '9f673502ec096039f4a24a0a37f7ce513ac08c6b', class: "label-text" }, this.label)), h("button", { key: '4df19c63c32f1b785364e75865a2eb06c0456440', type: "button", onClick: this.handleClear }, h("dso-icon", { key: '306b9291d5b803d215915368f625422092949b8c', icon: "times" }), h("span", { key: 'e0a4c7efc36bde841f25240fd613759aca5504d8', class: "sr-only" }, "Zoekopdracht legen"))), h("div", { key: '1549e84d397fe3c627d4d6920610b8071de36fb5', class: "dso-button-container" }, h("span", { key: '19cee7a0161cc9b7433390d45284cf53b634370f', class: "divider" }), h("button", { key: '57dc2293455a12ed0085ef7b69e6e49a6c10ad53', type: "button", onClick: this.handlePrevious, disabled: current <= 1 }, h("dso-icon", { key: '9926d9bfc9bd5540379dafcb2088f4f8956c988d', icon: "chevron-up", class: "hydrated" }), h("span", { key: '5439ef32cbfcce57b175840f6ad2ef414f22d638', class: "sr-only" }, "Vorig zoekresultaat")), h("span", { key: 'eff38a856dd1ad510a002c751bee2f64c8531fea' }, current, "/", totalCount), h("button", { key: '5400da71fe4feed73f533023a689ed0610ac2f70', type: "button", onClick: this.handleNext, disabled: current >= totalCount }, h("dso-icon", { key: '42123769427ee96c0259278532abe3e397e674f2', icon: "chevron-down", class: "hydrated" }), h("span", { key: '8c2d19ab4cce1faddaa70d2812ea11ea6a49a6af', class: "sr-only" }, "Volgend zoekresultaat")))));
     }
     static get is() { return "dso-mark-bar"; }
     static get encapsulation() { return "shadow"; }