@dso-toolkit/core 49.0.2 → 50.0.0

package/dist/collection/components/list-button/list-button.js

@@ -0,0 +1,303 @@
+import { h } from "@stencil/core";
+import { createFocusTrap } from "focus-trap";
+import clsx from "clsx";
+export class ListButton {
+  constructor() {
+    this.manualInputWrapperElement = undefined;
+    this.manualCount = undefined;
+    this.label = undefined;
+    this.sublabel = undefined;
+    this.subcontent = undefined;
+    this.count = undefined;
+    this.min = undefined;
+    this.max = undefined;
+    this.checked = false;
+    this.disabled = false;
+  }
+  componentDidRender() {
+    var _a;
+    if (this.manualCount !== undefined && this.manualInputWrapperElement && !this.trap) {
+      this.trap = createFocusTrap(this.manualInputWrapperElement, {
+        escapeDeactivates: true,
+        setReturnFocus: false,
+        clickOutsideDeactivates: (e) => {
+          this.setCount(e);
+          return true;
+        },
+        onDeactivate: () => this.stopManualCountInput(),
+        onPostDeactivate: () => { var _a; return (_a = this.manualInputButtonElement) === null || _a === void 0 ? void 0 : _a.focus(); },
+      }).activate();
+    }
+    else if (this.manualCount === undefined && this.trap) {
+      (_a = this.trap) === null || _a === void 0 ? void 0 : _a.deactivate();
+      delete this.trap;
+    }
+  }
+  disconnectedCallback() {
+    var _a;
+    (_a = this.trap) === null || _a === void 0 ? void 0 : _a.deactivate();
+  }
+  handleOnChange({ target }) {
+    if (target instanceof HTMLInputElement) {
+      this.manualCount = target.valueAsNumber;
+    }
+  }
+  stepValue(e, direction) {
+    if (typeof this.count === "number") {
+      const newValue = direction === "increment" ? this.count + 1 : this.count - 1;
+      if (this.isNewCountValid(newValue) === false) {
+        return;
+      }
+      this.dsoCountChange.emit({
+        originalEvent: e,
+        count: newValue,
+      });
+    }
+  }
+  setCount(e) {
+    e.preventDefault();
+    if (typeof this.manualCount === "number" && this.isNewCountValid(this.manualCount)) {
+      this.dsoCountChange.emit({
+        originalEvent: e,
+        count: this.manualCount,
+      });
+      this.stopManualCountInput();
+    }
+  }
+  handleSelectClick(e) {
+    e.preventDefault();
+    if (this.count !== undefined) {
+      this.dsoCountChange.emit({
+        originalEvent: e,
+        count: this.count > 0 ? 0 : 1,
+      });
+      return;
+    }
+    this.dsoSelectedChange.emit({
+      originalEvent: e,
+      checked: !this.checked,
+    });
+  }
+  startManualCountInput() {
+    this.manualCount = this.count;
+  }
+  stopManualCountInput() {
+    this.manualCount = undefined;
+  }
+  isNewCountValid(newValue) {
+    if (this.min !== undefined &&
+      this.max !== undefined &&
+      (newValue < Number(this.min) || newValue > Number(this.max))) {
+      return false;
+    }
+    return true;
+  }
+  render() {
+    const showButtonInputs = this.manualCount === undefined;
+    const selected = this.checked || (this.count !== undefined && this.count > 0);
+    return (h("div", { class: clsx(["dso-btn-group", { "dso-disabled": this.disabled }]) }, h("div", { class: clsx(["dso-list-button", { "dso-selected": selected, "dso-single-count": this.count === 1 }]), onClick: (e) => this.handleSelectClick(e) }, h("div", { class: "dso-selectable" }, h("input", { id: "dso-list-button-checkbox", type: "checkbox", value: "list-button", name: "naam", checked: selected, disabled: this.disabled, "aria-label": this.label }), h("label", { htmlFor: "dso-list-button-checkbox" }, this.label)), this.sublabel && h("span", { class: "dso-sublabel" }, this.sublabel), this.subcontent && h("span", { class: "dso-subcontent" }, this.subcontent)), this.count !== undefined && this.count > 0 && (h("div", { class: "dso-input-number" }, this.manualCount === undefined && this.count > 1 && (h("button", { type: "button", class: "dso-tertiary", disabled: this.count === Number(this.min) || this.disabled, onClick: (e) => this.stepValue(e, "decrement") }, h("dso-icon", { icon: "minus-circle" }), h("span", { class: "sr-only" }, "Aantal verlagen"))), h("div", { class: "dso-input-wrapper" }, this.manualCount === undefined && this.count > 1 && (h("input", { class: "dso-input-step-counter", type: "number", tabIndex: -1, "aria-label": "Aantal", value: this.count, readOnly: true })), h("form", { onSubmit: (e) => this.setCount(e) }, h("div", { ref: (element) => (this.manualInputWrapperElement = element) }, h("input", { class: clsx("form-control", { hidden: showButtonInputs }), type: "number", "aria-label": "Aantal", value: this.manualCount, min: this.min, max: this.max, onInput: (e) => this.handleOnChange(e) })), h("button", { class: clsx("dso-manual-input-button", { "sr-only": !showButtonInputs }), type: !showButtonInputs ? "submit" : "button", disabled: this.disabled, onClick: () => showButtonInputs && this.startManualCountInput() }, showButtonInputs ? (h("span", { class: "sr-only" }, "Handmatig aantal invullen")) : (h("span", { class: "sr-only" }, "Zet waarde"))))), showButtonInputs && (h("button", { type: "button", class: "dso-tertiary", disabled: this.count === Number(this.max) || this.disabled, onClick: (e) => this.stepValue(e, "increment") }, h("dso-icon", { icon: "plus-circle" }), h("span", { class: "sr-only" }, "Aantal verhogen")))))));
+  }
+  static get is() { return "dso-list-button"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["list-button.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["list-button.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "label": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string | undefined",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "label",
+        "reflect": false
+      },
+      "sublabel": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string | undefined",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "sublabel",
+        "reflect": false
+      },
+      "subcontent": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string | undefined",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "subcontent",
+        "reflect": false
+      },
+      "count": {
+        "type": "number",
+        "mutable": false,
+        "complexType": {
+          "original": "number",
+          "resolved": "number | undefined",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "When defined the count can show on the list-button."
+        },
+        "attribute": "count",
+        "reflect": false
+      },
+      "min": {
+        "type": "any",
+        "mutable": false,
+        "complexType": {
+          "original": "string | number",
+          "resolved": "number | string | undefined",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "min",
+        "reflect": false
+      },
+      "max": {
+        "type": "any",
+        "mutable": false,
+        "complexType": {
+          "original": "string | number",
+          "resolved": "number | string | undefined",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "max",
+        "reflect": false
+      },
+      "checked": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "checked",
+        "reflect": true,
+        "defaultValue": "false"
+      },
+      "disabled": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "disabled",
+        "reflect": true,
+        "defaultValue": "false"
+      }
+    };
+  }
+  static get states() {
+    return {
+      "manualInputWrapperElement": {},
+      "manualCount": {}
+    };
+  }
+  static get events() {
+    return [{
+        "method": "dsoCountChange",
+        "name": "dsoCountChange",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "complexType": {
+          "original": "ListButtonChangeEvent",
+          "resolved": "ListButtonChangeEvent",
+          "references": {
+            "ListButtonChangeEvent": {
+              "location": "import",
+              "path": "./list-button.interfaces"
+            }
+          }
+        }
+      }, {
+        "method": "dsoSelectedChange",
+        "name": "dsoSelectedChange",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "complexType": {
+          "original": "ListButtonSelectedEvent",
+          "resolved": "ListButtonSelectedEvent",
+          "references": {
+            "ListButtonSelectedEvent": {
+              "location": "import",
+              "path": "./list-button.interfaces"
+            }
+          }
+        }
+      }];
+  }
+}

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

@@ -21,7 +21,7 @@
   box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.3);
   transform: translateX(-100%);
 }
-:host([open]) #toggle-visibility-button {
+:host([open]) .toggle-visibility-button {
   display: none;
 }
 
@@ -45,7 +45,7 @@ button::-moz-focus-inner {
   padding: 0;
 }
 
-#toggle-visibility-button {
+.toggle-visibility-button {
   display: inline-block;
   font-size: 1em;
   font-weight: 500;
@@ -74,59 +74,59 @@ button::-moz-focus-inner {
   right: calc(100% + 56px);
   top: 16px;
 }
-#toggle-visibility-button:focus, #toggle-visibility-button:focus-visible {
+.toggle-visibility-button:focus, .toggle-visibility-button:focus-visible {
   outline-offset: 2px;
 }
-#toggle-visibility-button:active {
+.toggle-visibility-button:active {
   outline: 0;
 }
-#toggle-visibility-button:hover {
+.toggle-visibility-button:hover {
   background-color: #39870c;
   border-color: #39870c;
   color: #fff;
 }
-#toggle-visibility-button:active {
+.toggle-visibility-button:active {
   background-color: #275937;
   border-color: #275937;
   color: #fff;
 }
-#toggle-visibility-button[disabled], #toggle-visibility-button[disabled]:hover {
+.toggle-visibility-button[disabled], .toggle-visibility-button[disabled]:hover {
   background-color: #fff;
   border-color: #afcf9d;
   color: #afcf9d;
 }
-#toggle-visibility-button.btn-sm {
+.toggle-visibility-button.btn-sm {
   line-height: 1rem;
 }
-#toggle-visibility-button.btn-sm dso-icon,
-#toggle-visibility-button.btn-sm svg.di, #toggle-visibility-button.btn-sm.extern::after, #toggle-visibility-button.btn-sm.download::after, #toggle-visibility-button.btn-sm.dso-spinner::before {
+.toggle-visibility-button.btn-sm dso-icon,
+.toggle-visibility-button.btn-sm svg.di, .toggle-visibility-button.btn-sm.extern::after, .toggle-visibility-button.btn-sm.download::after, .toggle-visibility-button.btn-sm.dso-spinner::before {
   margin-bottom: -4px;
   margin-top: -4px;
 }
-#toggle-visibility-button.btn-sm.dso-spinner-left::before {
+.toggle-visibility-button.btn-sm.dso-spinner-left::before {
   height: 16px;
   width: 16px;
 }
-#toggle-visibility-button.btn-sm.dso-spinner-right::after {
+.toggle-visibility-button.btn-sm.dso-spinner-right::after {
   height: 16px;
   width: 16px;
 }
-#toggle-visibility-button dso-icon,
-#toggle-visibility-button svg.di {
+.toggle-visibility-button dso-icon,
+.toggle-visibility-button svg.di {
   margin-left: -8px;
   margin-right: 8px;
 }
-#toggle-visibility-button span + dso-icon,
-#toggle-visibility-button span + svg.di {
+.toggle-visibility-button span + dso-icon,
+.toggle-visibility-button span + svg.di {
   margin-left: 8px;
   margin-right: -8px;
 }
-#toggle-visibility-button.dso-spinner-left[disabled], #toggle-visibility-button.dso-spinner-right[disabled] {
+.toggle-visibility-button.dso-spinner-left[disabled], .toggle-visibility-button.dso-spinner-right[disabled] {
   background-color: #fff;
   border-color: #39870c;
   color: #39870c;
 }
-#toggle-visibility-button.dso-spinner-left::before {
+.toggle-visibility-button.dso-spinner-left::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: %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: "";
@@ -136,7 +136,7 @@ button::-moz-focus-inner {
   width: 24px;
   margin-right: 8px;
 }
-#toggle-visibility-button.dso-spinner-left:not([disabled]):hover::before {
+.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: "";
@@ -146,11 +146,11 @@ button::-moz-focus-inner {
   width: 24px;
   margin-right: 8px;
 }
-#toggle-visibility-button.dso-spinner-left:not([disabled]).btn-sm:hover::before {
+.toggle-visibility-button.dso-spinner-left:not([disabled]).btn-sm:hover::before {
   height: 16px;
   width: 16px;
 }
-#toggle-visibility-button.dso-spinner-right::after {
+.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: "";
@@ -160,7 +160,7 @@ button::-moz-focus-inner {
   width: 24px;
   margin-left: 8px;
 }
-#toggle-visibility-button.dso-spinner-right:not([disabled]):hover::after {
+.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: "";
@@ -170,18 +170,18 @@ button::-moz-focus-inner {
   width: 24px;
   margin-left: 8px;
 }
-#toggle-visibility-button.dso-spinner-right:not([disabled]).btn-sm:hover::after {
+.toggle-visibility-button.dso-spinner-right:not([disabled]).btn-sm:hover::after {
   height: 16px;
   width: 16px;
 }
-#toggle-visibility-button:focus-visible {
+.toggle-visibility-button:focus-visible {
   background-color: #39870c;
   border-color: #39870c;
   color: #fff;
   outline: none;
 }
 
-#zoom-buttons {
+.zoom-buttons {
   border-radius: 4px;
   box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.5);
   display: flex;
@@ -191,7 +191,7 @@ button::-moz-focus-inner {
   right: calc(100% + 16px);
   top: 16px;
 }
-#zoom-buttons button {
+.zoom-buttons button {
   display: inline-block;
   font-size: 1em;
   font-weight: 500;
@@ -220,44 +220,44 @@ button::-moz-focus-inner {
   min-width: auto;
   width: 40px;
 }
-#zoom-buttons button:focus, #zoom-buttons button:focus-visible {
+.zoom-buttons button:focus, .zoom-buttons button:focus-visible {
   outline-offset: 2px;
 }
-#zoom-buttons button:active {
+.zoom-buttons button:active {
   outline: 0;
 }
-#zoom-buttons button:hover {
+.zoom-buttons button:hover {
   background-color: #39870c;
   border-color: #39870c;
   color: #fff;
 }
-#zoom-buttons button:active {
+.zoom-buttons button:active {
   background-color: #275937;
   border-color: #275937;
   color: #fff;
 }
-#zoom-buttons button[disabled], #zoom-buttons button[disabled]:hover {
+.zoom-buttons button[disabled], .zoom-buttons button[disabled]:hover {
   background-color: #fff;
   border-color: #afcf9d;
   color: #afcf9d;
 }
-#zoom-buttons button.btn-sm {
+.zoom-buttons button.btn-sm {
   line-height: 1rem;
 }
-#zoom-buttons button.btn-sm dso-icon,
-#zoom-buttons button.btn-sm svg.di, #zoom-buttons button.btn-sm.extern::after, #zoom-buttons button.btn-sm.download::after, #zoom-buttons button.btn-sm.dso-spinner::before {
+.zoom-buttons button.btn-sm dso-icon,
+.zoom-buttons button.btn-sm svg.di, .zoom-buttons button.btn-sm.extern::after, .zoom-buttons button.btn-sm.download::after, .zoom-buttons button.btn-sm.dso-spinner::before {
   margin-bottom: -4px;
   margin-top: -4px;
 }
-#zoom-buttons button.btn-sm.dso-spinner-left::before {
+.zoom-buttons button.btn-sm.dso-spinner-left::before {
   height: 16px;
   width: 16px;
 }
-#zoom-buttons button.btn-sm.dso-spinner-right::after {
+.zoom-buttons button.btn-sm.dso-spinner-right::after {
   height: 16px;
   width: 16px;
 }
-#zoom-buttons button > span {
+.zoom-buttons button > span {
   position: absolute;
   width: 1px;
   height: 1px;
@@ -267,12 +267,12 @@ button::-moz-focus-inner {
   clip: rect(0, 0, 0, 0);
   border: 0;
 }
-#zoom-buttons button.dso-spinner-left[disabled], #zoom-buttons button.dso-spinner-right[disabled] {
+.zoom-buttons button.dso-spinner-left[disabled], .zoom-buttons button.dso-spinner-right[disabled] {
   background-color: #fff;
   border-color: #39870c;
   color: #39870c;
 }
-#zoom-buttons button.dso-spinner-left::before {
+.zoom-buttons button.dso-spinner-left::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: %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: "";
@@ -282,7 +282,7 @@ button::-moz-focus-inner {
   width: 24px;
   margin-right: 8px;
 }
-#zoom-buttons button.dso-spinner-left:not([disabled]):hover::before {
+.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: "";
@@ -292,11 +292,11 @@ button::-moz-focus-inner {
   width: 24px;
   margin-right: 8px;
 }
-#zoom-buttons button.dso-spinner-left:not([disabled]).btn-sm:hover::before {
+.zoom-buttons button.dso-spinner-left:not([disabled]).btn-sm:hover::before {
   height: 16px;
   width: 16px;
 }
-#zoom-buttons button.dso-spinner-right::after {
+.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: "";
@@ -306,7 +306,7 @@ button::-moz-focus-inner {
   width: 24px;
   margin-left: 8px;
 }
-#zoom-buttons button.dso-spinner-right:not([disabled]):hover::after {
+.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: "";
@@ -316,24 +316,24 @@ button::-moz-focus-inner {
   width: 24px;
   margin-left: 8px;
 }
-#zoom-buttons button.dso-spinner-right:not([disabled]).btn-sm:hover::after {
+.zoom-buttons button.dso-spinner-right:not([disabled]).btn-sm:hover::after {
   height: 16px;
   width: 16px;
 }
-#zoom-buttons button:focus-visible {
+.zoom-buttons button:focus-visible {
   background-color: #39870c;
   border-color: #39870c;
   color: #fff;
   outline: none;
 }
-#zoom-buttons button + button {
+.zoom-buttons button + button {
   border-radius: 0;
   border-bottom-left-radius: 4px;
   border-bottom-right-radius: 4px;
   border-top: 1px solid #ccc;
 }
 
-#close-button {
+.close-button {
   display: inline-block;
   font-size: 1em;
   font-weight: 500;
@@ -353,32 +353,32 @@ button::-moz-focus-inner {
   right: 16px;
   top: 16px;
 }
-#close-button:focus, #close-button:focus-visible {
+.close-button:focus, .close-button:focus-visible {
   outline-offset: 2px;
 }
-#close-button:active {
+.close-button:active {
   outline: 0;
 }
-#close-button[disabled] {
+.close-button[disabled] {
   color: #afcf9d;
 }
-#close-button[disabled].dso-spinner-left, #close-button[disabled].dso-spinner-right {
+.close-button[disabled].dso-spinner-left, .close-button[disabled].dso-spinner-right {
   color: #39870c;
 }
-#close-button:not([disabled]):hover {
+.close-button:not([disabled]):hover {
   color: #676cb0;
   text-decoration: underline;
   text-underline-position: under;
 }
-#close-button:not([disabled]):active {
+.close-button:not([disabled]):active {
   color: #676cb0;
 }
-#close-button.btn-align {
+.close-button.btn-align {
   line-height: calc(1.5em - 1px);
   padding: 11px 0;
   position: relative;
 }
-#close-button.dso-spinner-left::before {
+.close-button.dso-spinner-left::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: %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: "";
@@ -388,7 +388,7 @@ button::-moz-focus-inner {
   width: 24px;
   margin-right: 8px;
 }
-#close-button.dso-spinner-right::after {
+.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: "";
@@ -398,7 +398,7 @@ button::-moz-focus-inner {
   width: 24px;
   margin-left: 8px;
 }
-#close-button > span {
+.close-button > span {
   position: absolute;
   width: 1px;
   height: 1px;

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

@@ -40,7 +40,7 @@ export class MapControls {
     }
   }
   render() {
-    return (h(Host, null, h("button", { type: "button", id: "toggle-visibility-button", onClick: () => (this.open = !this.open), ref: (element) => (__classPrivateFieldSet(this, _MapControls_toggleButtonElement, element, "f")) }, h("dso-icon", { icon: "layers" }), h("span", null, "Kaartlagen")), h("div", { id: "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", id: "close-button", onClick: () => (this.open = false), ref: (element) => (__classPrivateFieldSet(this, _MapControls_closeButtonElement, element, "f")) }, h("span", null, "Verberg paneel ", this.panelTitle), h("dso-icon", { icon: "times" }))), h("div", { class: "content" }, h("slot", null)))));
+    return (h(Host, null, h("button", { type: "button", id: "toggle-visibility-button", class: "toggle-visibility-button", onClick: () => (this.open = !this.open), ref: (element) => (__classPrivateFieldSet(this, _MapControls_toggleButtonElement, element, "f")) }, 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: () => (this.open = false), ref: (element) => (__classPrivateFieldSet(this, _MapControls_closeButtonElement, element, "f")) }, h("span", null, "Verberg paneel ", this.panelTitle), h("dso-icon", { icon: "times" }))), h("div", { class: "content" }, h("slot", null)))));
   }
   static get is() { return "dso-map-controls"; }
   static get encapsulation() { return "shadow"; }