@dso-toolkit/core 62.18.0 → 62.20.0

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

@@ -1,225 +1,223 @@
 var __classPrivateFieldGet = (this && this.__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 = (this && this.__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;
 import { h, Host } from "@stencil/core";
 // Sync with $transition-duration in ./map-controls.scss
 const transitionDuration = 300;
 export class MapControls {
-  constructor() {
-    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() {
+        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);
-    }
-  }
-  /**
-   * 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 is() { return "dso-map-controls"; }
-  static get encapsulation() { return "shadow"; }
-  static get originalStyleUrls() {
-    return {
-      "$": ["./map-controls.scss"]
-    };
-  }
-  static get styleUrls() {
-    return {
-      "$": ["map-controls.css"]
-    };
-  }
-  static get properties() {
-    return {
-      "open": {
-        "type": "boolean",
-        "mutable": true,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "To show and hide the Map Controls."
-        },
-        "attribute": "open",
-        "reflect": true,
-        "defaultValue": "false"
-      },
-      "disableZoom": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "\"in\" | \"out\" | \"both\"",
-          "resolved": "\"both\" | \"in\" | \"out\" | undefined",
-          "references": {}
-        },
-        "required": false,
-        "optional": true,
-        "docs": {
-          "tags": [],
-          "text": "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."
-        },
-        "attribute": "disable-zoom",
-        "reflect": false
-      }
-    };
-  }
-  static get states() {
-    return {
-      "hideContent": {}
-    };
-  }
-  static get events() {
-    return [{
-        "method": "dsoZoomIn",
-        "name": "dsoZoomIn",
-        "bubbles": true,
-        "cancelable": true,
-        "composed": true,
-        "docs": {
-          "tags": [],
-          "text": "Emitted when the user activates the zoom in button."
-        },
-        "complexType": {
-          "original": "MouseEvent",
-          "resolved": "MouseEvent",
-          "references": {
-            "MouseEvent": {
-              "location": "global",
-              "id": "global::MouseEvent"
-            }
-          }
+    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);
         }
-      }, {
-        "method": "dsoZoomOut",
-        "name": "dsoZoomOut",
-        "bubbles": true,
-        "cancelable": true,
-        "composed": true,
-        "docs": {
-          "tags": [],
-          "text": "Emitted when the user activates the zoom out button."
-        },
-        "complexType": {
-          "original": "MouseEvent",
-          "resolved": "MouseEvent",
-          "references": {
-            "MouseEvent": {
-              "location": "global",
-              "id": "global::MouseEvent"
-            }
-          }
-        }
-      }, {
-        "method": "dsoToggle",
-        "name": "dsoToggle",
-        "bubbles": true,
-        "cancelable": true,
-        "composed": true,
-        "docs": {
-          "tags": [],
-          "text": "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."
-        },
-        "complexType": {
-          "original": "MapControlsToggleEvent",
-          "resolved": "MapControlsToggleEvent",
-          "references": {
-            "MapControlsToggleEvent": {
-              "location": "import",
-              "path": "./map-controls.interfaces",
-              "id": "src/components/map-controls/map-controls.interfaces.ts::MapControlsToggleEvent"
-            }
-          }
+        else {
+            setTimeout(() => {
+                var _a;
+                this.hideContent = true;
+                (_a = __classPrivateFieldGet(this, _MapControls_toggleButtonElement, "f")) === null || _a === void 0 ? void 0 : _a.focus();
+            }, transitionDuration);
         }
-      }];
-  }
-  static get methods() {
-    return {
-      "toggleVisibility": {
-        "complexType": {
-          "signature": "(e: MouseEvent | KeyboardEvent) => Promise<void>",
-          "parameters": [{
-              "tags": [{
-                  "name": "param",
-                  "text": "e"
-                }],
-              "text": ""
-            }],
-          "references": {
-            "Promise": {
-              "location": "global",
-              "id": "global::Promise"
-            },
-            "MouseEvent": {
-              "location": "global",
-              "id": "global::MouseEvent"
+    }
+    /**
+     * Emitted when the visibility is toggled.
+     *
+     * Can be used to recalculate map widths or reposition center when the Map Controls opens or closes.
+     * @param e
+     */
+    async toggleVisibility(e) {
+        this.open = !this.open;
+        this.dsoToggle.emit({
+            originalEvent: e,
+            open: this.open,
+        });
+    }
+    render() {
+        return (h(Host, { key: '6950f24986448fe7b9ad55e63a27c3435582078f' }, h("button", { key: '5b1fd3a10690d47db03b4e80fe30beffc4ab9658', type: "button", id: "toggle-visibility-button", class: "toggle-visibility-button", onClick: (e) => this.toggleVisibility(e), ref: (element) => (__classPrivateFieldSet(this, _MapControls_toggleButtonElement, element, "f")) }, h("dso-icon", { key: '364f0679306f247a5c6a589ad0885b014e0be5f5', icon: "layers" }), h("span", { key: '5409d0555edd3e7406b215fb430c9a4d71943460' }, "Kaartlagen")), h("div", { key: '0e9db2dca0b5065f86926232138933b402eb73df', class: "zoom-buttons" }, h("button", { key: 'd8bb302ba4d9a3719c6525cea58da8cc98620e34', type: "button", onClick: (e) => this.dsoZoomIn.emit(e), disabled: this.disableZoom === "in" || this.disableZoom === "both" }, h("span", { key: '3bdb813abd79cd05a2290068d0bd76410679f293' }, "Zoom in"), h("dso-icon", { key: '853a2cf598baf24e6d152611fe9b663a674db6e8', icon: "plus" })), h("button", { key: '909320d8ecd4edb12d0bb33e90300f36a2e49c6c', type: "button", onClick: (e) => this.dsoZoomOut.emit(e), disabled: this.disableZoom === "out" || this.disableZoom === "both" }, h("span", { key: '2b83cf1a9c8c869684c166f2faa5eaebaef965e4' }, "Zoom uit"), h("dso-icon", { key: '03145fbd10e9fa812984e0ec30bc36e015df61d7', icon: "minus" }))), h("section", { key: '3c2ade46c0f4d60f2e8cd983e549206ea8f71a62', hidden: this.hideContent }, h("header", { key: '80e7a2df9559af79525e8d5feb128a906c44c102' }, h("h2", { key: '1b68c5f1edc27316bd88aecdfb087f4b3d20ef94' }, this.panelTitle), h("button", { key: '9b99c5cd792825d6fcf1612394a762a4bb5780d3', type: "button", class: "close-button", onClick: (e) => this.toggleVisibility(e), ref: (element) => (__classPrivateFieldSet(this, _MapControls_closeButtonElement, element, "f")) }, h("span", { key: '218e01f23755c5ced6fc97fdbee6f4c5e53fb993' }, "Verberg paneel ", this.panelTitle), h("dso-icon", { key: '9c296759f7088b175c64883fa6dfc489d66b4392', icon: "times" }))), h("dso-scrollable", { key: '9f1426e147a8a9904e55d4280194ae256c842d5d' }, h("div", { key: '2f9d201a4e1d20265297de0c7b9431ba368fff0a', class: "content" }, h("slot", { key: '6ad26388a3c216ff78395567597ddb93320f1223' }))))));
+    }
+    static get is() { return "dso-map-controls"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["./map-controls.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["map-controls.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "open": {
+                "type": "boolean",
+                "mutable": true,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "To show and hide the Map Controls."
+                },
+                "attribute": "open",
+                "reflect": true,
+                "defaultValue": "false"
             },
-            "KeyboardEvent": {
-              "location": "global",
-              "id": "global::KeyboardEvent"
+            "disableZoom": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "\"in\" | \"out\" | \"both\"",
+                    "resolved": "\"both\" | \"in\" | \"out\" | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "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."
+                },
+                "attribute": "disable-zoom",
+                "reflect": false
             }
-          },
-          "return": "Promise<void>"
-        },
-        "docs": {
-          "text": "Emitted when the visibility is toggled.\r\n\r\nCan be used to recalculate map widths or reposition center when the Map Controls opens or closes.",
-          "tags": [{
-              "name": "param",
-              "text": "e"
-            }]
-        }
-      }
-    };
-  }
-  static get watchers() {
-    return [{
-        "propName": "open",
-        "methodName": "watchOpen"
-      }];
-  }
+        };
+    }
+    static get states() {
+        return {
+            "hideContent": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "dsoZoomIn",
+                "name": "dsoZoomIn",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when the user activates the zoom in button."
+                },
+                "complexType": {
+                    "original": "MouseEvent",
+                    "resolved": "MouseEvent",
+                    "references": {
+                        "MouseEvent": {
+                            "location": "global",
+                            "id": "global::MouseEvent"
+                        }
+                    }
+                }
+            }, {
+                "method": "dsoZoomOut",
+                "name": "dsoZoomOut",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when the user activates the zoom out button."
+                },
+                "complexType": {
+                    "original": "MouseEvent",
+                    "resolved": "MouseEvent",
+                    "references": {
+                        "MouseEvent": {
+                            "location": "global",
+                            "id": "global::MouseEvent"
+                        }
+                    }
+                }
+            }, {
+                "method": "dsoToggle",
+                "name": "dsoToggle",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "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."
+                },
+                "complexType": {
+                    "original": "MapControlsToggleEvent",
+                    "resolved": "MapControlsToggleEvent",
+                    "references": {
+                        "MapControlsToggleEvent": {
+                            "location": "import",
+                            "path": "./map-controls.interfaces",
+                            "id": "src/components/map-controls/map-controls.interfaces.ts::MapControlsToggleEvent"
+                        }
+                    }
+                }
+            }];
+    }
+    static get methods() {
+        return {
+            "toggleVisibility": {
+                "complexType": {
+                    "signature": "(e: MouseEvent | KeyboardEvent) => Promise<void>",
+                    "parameters": [{
+                            "name": "e",
+                            "type": "MouseEvent | KeyboardEvent",
+                            "docs": ""
+                        }],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        },
+                        "MouseEvent": {
+                            "location": "global",
+                            "id": "global::MouseEvent"
+                        },
+                        "KeyboardEvent": {
+                            "location": "global",
+                            "id": "global::KeyboardEvent"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Emitted when the visibility is toggled.\r\n\r\nCan be used to recalculate map widths or reposition center when the Map Controls opens or closes.",
+                    "tags": [{
+                            "name": "param",
+                            "text": "e"
+                        }]
+                }
+            }
+        };
+    }
+    static get watchers() {
+        return [{
+                "propName": "open",
+                "methodName": "watchOpen"
+            }];
+    }
 }
 _MapControls_closeButtonElement = new WeakMap(), _MapControls_toggleButtonElement = new WeakMap();
 //# sourceMappingURL=map-controls.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"map-controls.js","sourceRoot":"","sources":["../../../../src/components/map-controls/map-controls.tsx"],"names":[],"mappings":"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","sourcesContent":["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":"map-controls.js","sourceRoot":"","sources":["../../../../src/components/map-controls/map-controls.tsx"],"names":[],"mappings":"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","sourcesContent":["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"]}