@dso-toolkit/core 33.1.0 → 34.0.0

package/dist/collection/components/header/header.js

@@ -0,0 +1,294 @@
+import { Component, Element, Fragment, h, Prop, State, Watch, } from "@stencil/core";
+import clsx from "clsx";
+import debounce from "debounce";
+const minDesktopViewportWidth = 992;
+export class Header {
+  constructor() {
+    this.useDropDownMenu = "auto";
+    this.showDropDown = false;
+    this.isLoggedIn = false;
+    this.hasSubLogo = false;
+    this.overflowMenuItems = 0;
+    this.onWindowResize = debounce(() => {
+      this.setDropDownMenu();
+      this.setOverflowMenu();
+    }, 100);
+  }
+  watchUseDropDownMenu(value) {
+    if (value === "auto") {
+      this.setDropDownMenu();
+      return;
+    }
+    this.showDropDown = value === "always";
+  }
+  componentWillLoad() {
+    this.hasSubLogo = this.host.querySelector("*[slot = 'sub-logo']") !== null;
+  }
+  shrinkMenuToFit() {
+    if (!this.wrapper || !this.nav) {
+      return;
+    }
+    if (this.wrapper.clientWidth >= this.nav.clientWidth) {
+      return;
+    }
+    if (this.overflowMenuItems >= this.mainMenu.length) {
+      return;
+    }
+    this.overflowMenuItems++;
+  }
+  componentDidRender() {
+    if (this.showDropDown) {
+      return;
+    }
+    window.setTimeout(() => this.shrinkMenuToFit(), 0);
+  }
+  setOverflowMenu() {
+    if (this.showDropDown) {
+      return;
+    }
+    if (this.overflowMenuItems != 0) {
+      this.overflowMenuItems = 0;
+      return;
+    }
+    this.shrinkMenuToFit();
+  }
+  setDropDownMenu() {
+    if (this.useDropDownMenu !== "auto") {
+      return;
+    }
+    this.showDropDown = window.innerWidth < minDesktopViewportWidth;
+  }
+  connectedCallback() {
+    window.addEventListener("resize", this.onWindowResize);
+  }
+  disconnectedCallback() {
+    window.removeEventListener("resize", this.onWindowResize);
+  }
+  MenuItem(item) {
+    return (h("li", { class: item.active ? "dso-active" : undefined },
+      h("a", { href: item.url, "aria-current": item.active ? "page" : undefined }, item.label)));
+  }
+  render() {
+    return (h(Fragment, null,
+      h("div", { class: clsx("dso-header", {
+          ["use-drop-down"]: this.showDropDown,
+          ["has-sub-logo"]: this.hasSubLogo,
+        }), ref: (element) => (this.wrapper = element) },
+        h("div", { class: "logo-container" },
+          h("div", { class: "logo" },
+            h("slot", { name: "logo" })),
+          h("div", { class: "sub-logo" },
+            h("slot", { name: "sub-logo" }))),
+        this.showDropDown && (h("div", { class: "dropdown" },
+          h("dso-dropdown-menu", { "dropdown-align": "right" },
+            h("button", { type: "button", class: "tertiary", slot: "toggle" },
+              h("span", null, "Menu")),
+            h("div", { class: "dso-dropdown-options" },
+              h("dso-dropdown-options", null,
+                h("ul", null,
+                  this.mainMenu.map(this.MenuItem),
+                  this.userHomeUrl && (h("li", null,
+                    h("a", { href: this.userHomeUrl }, "Mijn Omgevingsloket"))),
+                  this.loginUrl && !this.isLoggedIn && (h("li", null,
+                    h("a", { href: this.loginUrl }, "Inloggen"))),
+                  this.userProfileUrl &&
+                    this.userProfileName &&
+                    this.isLoggedIn && (h("li", null,
+                    h("a", { href: this.userProfileUrl },
+                      this.userProfileName,
+                      h("span", { class: "profile-label" }, "- Mijn profiel")))),
+                  this.logoutUrl && this.isLoggedIn && (h("li", null,
+                    h("a", { href: this.logoutUrl }, "Uitloggen"))))))))),
+        !this.showDropDown && (h(Fragment, null,
+          h("div", { class: "dso-header-session" },
+            this.userProfileUrl &&
+              this.userProfileName &&
+              this.isLoggedIn && (h("div", { class: "profile" },
+              h("span", { class: "profile-label" }, "Welkom:"),
+              h("a", { href: this.userProfileUrl }, this.userProfileName))),
+            this.loginUrl && !this.isLoggedIn && (h("div", { class: "login" },
+              h("a", { href: this.loginUrl }, "Inloggen"))),
+            this.logoutUrl && this.isLoggedIn && (h("div", { class: "logout" },
+              h("a", { href: this.logoutUrl }, "Uitloggen")))),
+          h("nav", { class: "dso-navbar" },
+            h("ul", { class: "dso-nav dso-nav-main", ref: (element) => (this.nav = element) },
+              this.mainMenu
+                .filter((_, index) => index < this.mainMenu.length - this.overflowMenuItems)
+                .map(this.MenuItem),
+              this.overflowMenuItems > 0 && (h("li", null,
+                h("dso-dropdown-menu", { "dropdown-align": "left" },
+                  h("button", { type: "button", class: "tertiary", slot: "toggle" },
+                    h("span", null, "Meer")),
+                  h("div", { class: "dso-dropdown-options" },
+                    h("dso-dropdown-options", null,
+                      h("ul", null, this.mainMenu
+                        .filter((_, index) => index >=
+                        this.mainMenu.length -
+                          this.overflowMenuItems)
+                        .map(this.MenuItem))))))),
+              this.userHomeUrl && (h("li", { class: "menu-user-home" },
+                h("a", { href: this.userHomeUrl },
+                  h("dso-icon", { icon: "user-line" }),
+                  "Mijn Omgevingsloket"))))))))));
+  }
+  static get is() { return "dso-header"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() { return {
+    "$": ["header.scss"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["header.css"]
+  }; }
+  static get properties() { return {
+    "loginUrl": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string | undefined",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "login-url",
+      "reflect": false
+    },
+    "logoutUrl": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string | undefined",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "logout-url",
+      "reflect": false
+    },
+    "mainMenu": {
+      "type": "unknown",
+      "mutable": false,
+      "complexType": {
+        "original": "HeaderMenuItem[]",
+        "resolved": "HeaderMenuItem[]",
+        "references": {
+          "HeaderMenuItem": {
+            "location": "local"
+          }
+        }
+      },
+      "required": true,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      }
+    },
+    "useDropDownMenu": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "\"always\" | \"never\" | \"auto\"",
+        "resolved": "\"always\" | \"auto\" | \"never\"",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "use-drop-down-menu",
+      "reflect": false,
+      "defaultValue": "\"auto\""
+    },
+    "isLoggedIn": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "is-logged-in",
+      "reflect": false,
+      "defaultValue": "false"
+    },
+    "userProfileName": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string | undefined",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "user-profile-name",
+      "reflect": false
+    },
+    "userProfileUrl": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string | undefined",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "user-profile-url",
+      "reflect": false
+    },
+    "userHomeUrl": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string | undefined",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "user-home-url",
+      "reflect": false
+    }
+  }; }
+  static get states() { return {
+    "showDropDown": {},
+    "hasSubLogo": {},
+    "overflowMenuItems": {}
+  }; }
+  static get elementRef() { return "host"; }
+  static get watchers() { return [{
+      "propName": "useDropDownMenu",
+      "methodName": "watchUseDropDownMenu"
+    }]; }
+}

package/dist/collection/components/header/header.template.js

@@ -0,0 +1,32 @@
+import { html } from "lit-html";
+import { ifDefined } from "lit-html/directives/if-defined";
+export function headerTemplate({ logo, subLogo, mainMenu, useDropDownMenu, showSubLogo, loginUrl, logoutUrl, isLoggedIn, showLoggedIn, userProfileUrl, userProfileName, userHomeUrl, }) {
+  const bindLoginUrl = showLoggedIn && loginUrl ? loginUrl : undefined;
+  const bindLogoutUrl = showLoggedIn && logoutUrl ? logoutUrl : undefined;
+  return showSubLogo
+    ? html `<dso-header
+        .mainMenu=${mainMenu}
+        use-drop-down-menu=${ifDefined(useDropDownMenu)}
+        is-logged-in=${ifDefined(isLoggedIn)}
+        login-url=${ifDefined(bindLoginUrl)}
+        logout-url=${ifDefined(bindLogoutUrl)}
+        user-profile-url=${ifDefined(userProfileUrl)}
+        user-profile-name=${ifDefined(userProfileName)}
+        user-home-url=${ifDefined(userHomeUrl)}
+      >
+        <div slot="logo"><img height="40" alt="Omgevingsloket" src="${logo}" /></div>
+        <div slot="sub-logo"><img alt="Regels op de kaart" src="${subLogo}" /></div></div>
+      </dso-header>`
+    : html `<dso-header
+        .mainMenu=${mainMenu}
+        use-drop-down-menu=${ifDefined(useDropDownMenu)}
+        is-logged-in=${ifDefined(isLoggedIn)}
+        login-url=${ifDefined(bindLoginUrl)}
+        logout-url=${ifDefined(bindLogoutUrl)}
+        user-profile-url=${ifDefined(userProfileUrl)}
+        user-profile-name=${ifDefined(userProfileName)}
+        user-home-url=${ifDefined(userHomeUrl)}
+      >
+        <div slot="logo"><img alt="Omgevingsloket" src="${logo}" /></div>
+      </dso-header>`;
+}

package/dist/collection/components/helpcenter-panel/helpcenter-panel.css

@@ -1,6 +1,3 @@
-/* stylelint-disable value-keyword-case */
-/* stylelint-disable string-no-newline */
-/* stylelint-enable */
 :host {
   display: block;
   --di-times: url("data:image/svg+xml,%3csvg id='times' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' style='color: %2339870c%3b'%3e %3cpath fill='currentColor' d='M13.36%2c12l3.3-3.3A1%2c1%2c0%2c1%2c0%2c15.3%2c7.34L12%2c10.64%2c8.7%2c7.34A1%2c1%2c0%2c1%2c0%2c7.34%2c8.7l3.3%2c3.3-3.3%2c3.3A1%2c1%2c0%2c1%2c0%2c8.7%2c16.66l3.3-3.3%2c3.3%2c3.3a1%2c1%2c0%2c1%2c0%2c1.36-1.36Z'/%3e %3c/svg%3e");

package/dist/collection/components/highlight-box/highlight-box.css

@@ -1,6 +1,3 @@
-/* stylelint-disable value-keyword-case */
-/* stylelint-disable string-no-newline */
-/* stylelint-enable */
 :host {
   --di-external-link-grijs90: url("data:image/svg+xml,%3csvg id='external-link' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' style='color: %23191919%3b'%3e %3cpath fill='currentColor' d='M19%2c6V9.69c0%2c.33-.2.41-.43.17L17.06%2c8.35l-3.35%2c3.36a1%2c1%2c0%2c0%2c1-1.42%2c0%2c1%2c1%2c0%2c0%2c1%2c0-1.42l3.36-3.35L14.14%2c5.43C13.9%2c5.19%2c14%2c5%2c14.31%2c5H19V6ZM18%2c17V13a1%2c1%2c0%2c0%2c0-2%2c0v4a1%2c1%2c0%2c0%2c1-1%2c1H7a1%2c1%2c0%2c0%2c1-1-1V9A1%2c1%2c0%2c0%2c1%2c7%2c8h4a1%2c1%2c0%2c0%2c0%2c0-2H7A3%2c3%2c0%2c0%2c0%2c4%2c9v8a3%2c3%2c0%2c0%2c0%2c3%2c3h8A3%2c3%2c0%2c0%2c0%2c18%2c17Z'/%3e %3c/svg%3e");
   --di-download-grijs90: url("data:image/svg+xml,%3csvg id='download' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' style='color: %23191919%3b'%3e %3cpath fill='currentColor' d='M18.72%2c10.44%2c12%2c17l-6.7-6.52C4.8%2c10%2c5%2c9.63%2c5.63%2c9.63H8.5V1.82A.8.8%2c0%2c0%2c1%2c9.28%2c1h5.44a.8.8%2c0%2c0%2c1%2c.78.82V9.61h2.87C19%2c9.6%2c19.2%2c10%2c18.72%2c10.44ZM1%2c17v6H23V17Zm16%2c3a2%2c2%2c0%2c1%2c1-2-2A2%2c2%2c0%2c0%2c1%2c17%2c20Zm5%2c0a2%2c2%2c0%2c1%2c1-2-2A2%2c2%2c0%2c0%2c1%2c22%2c20Z'/%3e %3c/svg%3e");

package/dist/collection/components/icon/icon.css

@@ -1,8 +1,4 @@
-/* stylelint-disable value-keyword-case */
-/* stylelint-disable string-no-newline */
-/* stylelint-enable */
 :host {
-  /* stylelint-disable-next-line no-invalid-position-at-import-rule */
   display: inline-block;
   height: 1.5em;
   vertical-align: top;

package/dist/collection/components/info/info.css

@@ -1,8 +1,5 @@
-/* stylelint-disable value-keyword-case */
-/* stylelint-disable string-no-newline */
-/* stylelint-enable */
 :host {
-  --di-times-bosgroen: url("data:image/svg+xml,%3csvg id='times' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' style='color: %23275937%3b'%3e %3cpath fill='currentColor' d='M13.36%2c12l3.3-3.3A1%2c1%2c0%2c1%2c0%2c15.3%2c7.34L12%2c10.64%2c8.7%2c7.34A1%2c1%2c0%2c1%2c0%2c7.34%2c8.7l3.3%2c3.3-3.3%2c3.3A1%2c1%2c0%2c1%2c0%2c8.7%2c16.66l3.3-3.3%2c3.3%2c3.3a1%2c1%2c0%2c1%2c0%2c1.36-1.36Z'/%3e %3c/svg%3e");
+  --di-times-grijs90: url("data:image/svg+xml,%3csvg id='times' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' style='color: %23191919%3b'%3e %3cpath fill='currentColor' d='M13.36%2c12l3.3-3.3A1%2c1%2c0%2c1%2c0%2c15.3%2c7.34L12%2c10.64%2c8.7%2c7.34A1%2c1%2c0%2c1%2c0%2c7.34%2c8.7l3.3%2c3.3-3.3%2c3.3A1%2c1%2c0%2c1%2c0%2c8.7%2c16.66l3.3-3.3%2c3.3%2c3.3a1%2c1%2c0%2c1%2c0%2c1.36-1.36Z'/%3e %3c/svg%3e");
   display: block;
   background-color: #f2f2f2;
   padding: 16px 32px 16px 16px;

package/dist/collection/components/info-button/info-button.css

@@ -1,6 +1,3 @@
-/* stylelint-disable value-keyword-case */
-/* stylelint-disable string-no-newline */
-/* stylelint-enable */
 :host {
   display: inline-block;
   --di-info: url("data:image/svg+xml,%3csvg id='info' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' style='color: %2339870c%3b'%3e %3cpath fill='currentColor' d='M12%2c3a9%2c9%2c0%2c1%2c1-9%2c9%2c9%2c9%2c0%2c0%2c1%2c9-9m0-2A11%2c11%2c0%2c1%2c0%2c23%2c12%2c11%2c11%2c0%2c0%2c0%2c12%2c1Zm0%2c8a1%2c1%2c0%2c1%2c0-1-1A1%2c1%2c0%2c0%2c0%2c12%2c9Zm1%2c7.79V11.21A1.12%2c1.12%2c0%2c0%2c0%2c12%2c10a1.12%2c1.12%2c0%2c0%2c0-1%2c1.21v5.58A1.12%2c1.12%2c0%2c0%2c0%2c12%2c18%2c1.12%2c1.12%2c0%2c0%2c0%2c13%2c16.79Z'/%3e %3c/svg%3e");
@@ -36,6 +33,7 @@ button {
   border: 1px solid transparent;
   margin-left: 8px;
   padding: 0;
+  cursor: pointer;
 }
 button.dso-open, button:hover, button:active {
   --dso-icon: var(--di-info-active);

package/dist/collection/components/label/label.css

@@ -1,6 +1,3 @@
-/* stylelint-disable value-keyword-case */
-/* stylelint-disable string-no-newline */
-/* stylelint-enable */
 :host {
   display: inline-block;
 }

package/dist/collection/components/label/label.js

@@ -9,7 +9,8 @@ export class Label {
         status,
         ": ")),
       h("slot", null),
-      this.removable && (h("button", { type: "button", onClick: e => this.removeClick.emit(e), title: "Verwijder", onMouseEnter: () => this.hover = true, onMouseLeave: () => this.hover = false },
+      this.removable && (h("button", { type: "button", onClick: e => this.removeClick.emit(e), onMouseEnter: () => this.hover = true, onMouseLeave: () => this.hover = false },
+        h("span", { class: "sr-only" }, "Verwijder"),
         h("dso-icon", { icon: "times" })))));
   }
   static get is() { return "dso-label"; }

package/dist/collection/components/label-group/label-group.template.js

@@ -0,0 +1,7 @@
+import { html } from 'lit-html';
+import { labelTemplate } from '../label/label.template';
+export function labelGroupTemplate({ labels }) {
+  return html `<div class="dso-label-group">
+    ${labels.map(labels => labelTemplate(labels))}
+  </div>`;
+}

package/dist/collection/components/list/list.template.js

@@ -0,0 +1,37 @@
+// Keep in sync with packages\css\src\components\list\list.template.ts (https://github.com/dso-toolkit/dso-toolkit/issues/1438)
+import { Type } from '@dso-toolkit/sources';
+import { html } from 'lit-html';
+import { classMap } from 'lit-html/directives/class-map';
+function ul(children, modifier) {
+  return html `
+    <ul class="${classMap({
+    'list-group': modifier === 'group',
+    'dso-columns-list': modifier === 'columns'
+  })}">
+      ${children}
+    </ul>
+  `;
+}
+function ol(children, modifier) {
+  return html `
+    <ol class="${classMap({
+    'list-group': modifier === 'group',
+    'dso-columns-list': modifier === 'columns'
+  })}">
+      ${children}
+    </ol>
+  `;
+}
+export function listTemplate({ type, items, modifier }) {
+  const children = html `
+    ${items.map(item => html `
+      <li class="${classMap({ 'list-group-item': modifier === 'group' })}">
+        ${item}
+      </li>
+    `)}
+  `;
+  if (type === Type.Ol) {
+    return ol(children, modifier);
+  }
+  return ul(children, modifier);
+}

package/dist/collection/components/map-base-layers/map-base-layers.css

@@ -1,6 +1,3 @@
-/* stylelint-disable value-keyword-case */
-/* stylelint-disable string-no-newline */
-/* stylelint-enable */
 :host {
   display: block;
 }
@@ -34,4 +31,8 @@ fieldset .control-label {
   margin-bottom: 8px;
   max-width: 100%;
   text-align: left;
+}
+
+p[slot=info] {
+  margin: 0;
 }

package/dist/collection/components/map-base-layers/map-base-layers.js

@@ -1,15 +1,18 @@
 import { Component, h, Prop, Event } from '@stencil/core';
 export class MapBaseLayers {
-  selectBaseLayer(baseLayer) {
-    this.selectedBaseLayer = baseLayer;
-    this.baseLayerChange.emit(baseLayer);
+  baseLayerChangeHandler(baseLayer) {
+    this.baseLayerChange.emit({ activeBaseLayer: baseLayer });
   }
   render() {
     return (h("fieldset", { class: "form-group dso-radios" },
       h("legend", { class: "sr-only" }, "Achtergrond"),
       h("div", { class: "dso-label-container" },
         h("span", { class: "control-label", "aria-hidden": "true" }, "Achtergrond")),
-      h("div", { class: "dso-field-container" }, this.baseLayers.map((baseLayer, i) => (h("dso-selectable", { key: baseLayer.id, type: "radio", value: baseLayer.name, checked: !this.selectedBaseLayer && i === 0 || this.selectedBaseLayer === baseLayer, onDsoChange: () => this.selectBaseLayer(baseLayer) }, baseLayer.name))))));
+      h("div", { class: "dso-field-container" }, this.baseLayers.map(baseLayer => (h("dso-selectable", { key: baseLayer.id, type: "radio", value: baseLayer.name, checked: baseLayer.checked, disabled: baseLayer.disabled, onDsoChange: () => this.baseLayerChangeHandler(baseLayer) },
+        baseLayer.name,
+        baseLayer.info
+          ? h("p", { slot: "info" }, baseLayer.info)
+          : null))))));
   }
   static get is() { return "dso-map-base-layers"; }
   static get encapsulation() { return "shadow"; }
@@ -39,26 +42,6 @@ export class MapBaseLayers {
         "tags": [],
         "text": ""
       }
-    },
-    "selectedBaseLayer": {
-      "type": "unknown",
-      "mutable": true,
-      "complexType": {
-        "original": "BaseLayer | undefined",
-        "resolved": "BaseLayer | undefined",
-        "references": {
-          "BaseLayer": {
-            "location": "import",
-            "path": "./map-base-layers.interfaces"
-          }
-        }
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      }
     }
   }; }
   static get events() { return [{
@@ -72,10 +55,10 @@ export class MapBaseLayers {
         "text": ""
       },
       "complexType": {
-        "original": "BaseLayer",
-        "resolved": "BaseLayer",
+        "original": "BaseLayerChangeEvent",
+        "resolved": "BaseLayerChangeEvent",
         "references": {
-          "BaseLayer": {
+          "BaseLayerChangeEvent": {
             "location": "import",
             "path": "./map-base-layers.interfaces"
           }

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

@@ -1,6 +1,3 @@
-/* stylelint-disable value-keyword-case */
-/* stylelint-disable string-no-newline */
-/* stylelint-enable */
 button {
   -webkit-appearance: button;
   color: inherit;
@@ -48,14 +45,6 @@ button::-moz-focus-inner {
   display: none;
 }
 
-#controls {
-  align-items: start;
-  display: flex;
-  position: absolute;
-  right: calc(100% + 16px);
-  top: 16px;
-}
-
 #toggle-visibility-button {
   display: inline-block;
   font-size: 1em;
@@ -81,6 +70,9 @@ button::-moz-focus-inner {
   margin-right: 16px;
   padding: 8px 16px;
   white-space: nowrap;
+  position: absolute;
+  right: calc(100% + 56px);
+  top: 16px;
 }
 #toggle-visibility-button:focus, #toggle-visibility-button:focus-visible {
   outline-offset: 2px;
@@ -157,6 +149,12 @@ button::-moz-focus-inner {
   margin-left: 8px;
   margin-right: -8px;
 }
+#toggle-visibility-button:focus-visible {
+  background-color: #39870c;
+  border-color: #39870c;
+  color: #fff;
+  outline: none;
+}
 
 #zoom-buttons {
   border-radius: 4px;
@@ -164,6 +162,9 @@ button::-moz-focus-inner {
   display: flex;
   flex-wrap: wrap;
   flex: 0 0;
+  position: absolute;
+  right: calc(100% + 16px);
+  top: 16px;
 }
 #zoom-buttons button {
   display: inline-block;
@@ -269,6 +270,12 @@ button::-moz-focus-inner {
   clip: rect(0, 0, 0, 0);
   border: 0;
 }
+#zoom-buttons button:focus-visible {
+  background-color: #39870c;
+  border-color: #39870c;
+  color: #fff;
+  outline: none;
+}
 #zoom-buttons button + button {
   border-radius: 0;
   border-bottom-left-radius: 4px;

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

@@ -35,17 +35,16 @@ export class MapControls {
   }
   render() {
     return (h(Host, null,
-      h("div", { id: "controls" },
-        h("button", { type: "button", id: "toggle-visibility-button", onClick: () => this.open = !this.open, ref: element => __classPrivateFieldSet(this, _toggleButtonElement, element) },
-          h("dso-icon", { icon: "layers" }),
-          h("span", null, "Kaartlagen")),
-        h("div", { id: "zoom-buttons" },
-          h("button", { type: "button", onClick: e => this.zoomIn.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.zoomOut.emit(e), disabled: this.disableZoom === 'out' || this.disableZoom === 'both' },
-            h("span", null, "Zoom uit"),
-            h("dso-icon", { icon: "minus" })))),
+      h("button", { type: "button", id: "toggle-visibility-button", onClick: () => this.open = !this.open, ref: element => __classPrivateFieldSet(this, _toggleButtonElement, element) },
+        h("dso-icon", { icon: "layers" }),
+        h("span", null, "Kaartlagen")),
+      h("div", { id: "zoom-buttons" },
+        h("button", { type: "button", onClick: e => this.zoomIn.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.zoomOut.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, "Kaartlagen"),

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

@@ -1,6 +1,5 @@
-import { checkFix } from '@dso-toolkit/sources';
 import { html } from 'lit-html';
-export function mapControlsTemplate({ zoomIn, zoomOut, open, baseLayers, selectedBaseLayer, baseLayerChange, overlays, checkedOverlays, checkedOverlaysChange, disableZoom }) {
+export function mapControlsTemplate({ zoomIn, zoomOut, open, baseLayers, baseLayerChange, overlays, toggleOverlay, disableZoom }) {
   return html `
     <dso-map-controls
       @zoomIn=${zoomIn}
@@ -8,24 +7,17 @@ export function mapControlsTemplate({ zoomIn, zoomOut, open, baseLayers, selecte
       .disableZoom=${disableZoom}
       ?open=${open}
     >
-      <form>
-        <div class="rich-content">
-          <p>Inhoud</p>
-        </div>
-        <dso-map-base-layers
-          .baseLayers=${baseLayers}
-          .selectedBaseLayer=${selectedBaseLayer}
-          @baseLayerChange=${(e) => baseLayerChange(e.detail)}
-        ></dso-map-base-layers>
-        <dso-map-overlays
-          .overlays=${overlays}
-          .checkedOverlays=${checkFix(checkedOverlays, overlays, o => o.name)}
-          @checkedOverlaysChange=${(e) => checkedOverlaysChange(e.detail)}
-        ></dso-map-overlays>
-        <div class="rich-content">
-          <p>Ook nog meer inhoud</p>
-        </div>
-      </form>
+      <dso-map-base-layers
+        .baseLayers=${baseLayers}
+        @baseLayerChange=${(e) => baseLayerChange(e)}
+      ></dso-map-base-layers>
+      <dso-map-overlays
+        .overlays=${overlays}
+        @toggleOverlay=${(e) => toggleOverlay(e)}
+      ></dso-map-overlays>
+      <div class="dso-rich-content">
+        <p>Dit is een Web Component wat aangesloten kan worden op Leaflet.js of OpenLayers.</p>
+      </div>
     </dso-map-controls>
   `;
 }