@dso-toolkit/core 45.2.0 → 46.0.0

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

@@ -1,150 +1,149 @@
 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");
+  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");
+  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 { Component, h, Host, Prop, Event, State, Watch } from '@stencil/core';
+import { h, Host } from "@stencil/core";
 const transitionDuration = 300; // Sync with $transition-duration in ./map-controls.scss
 export class MapControls {
   constructor() {
-    this.panelTitle = 'Kaartlagen';
-    this.open = false;
-    this.hideContent = !this.open;
+    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(() => __classPrivateFieldGet(this, _MapControls_closeButtonElement, "f").focus(), transitionDuration);
+      setTimeout(() => { var _a; return (_a = __classPrivateFieldGet(this, _MapControls_closeButtonElement, "f")) === null || _a === void 0 ? void 0 : _a.focus(); }, transitionDuration);
     }
     else {
       setTimeout(() => {
+        var _a;
         this.hideContent = true;
-        __classPrivateFieldGet(this, _MapControls_toggleButtonElement, "f").focus();
+        (_a = __classPrivateFieldGet(this, _MapControls_toggleButtonElement, "f")) === null || _a === void 0 ? void 0 : _a.focus();
       }, transitionDuration);
     }
   }
   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", 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)))));
   }
   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": ""
-      },
-      "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": ""
-      },
-      "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": ""
+  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": ""
+        },
+        "attribute": "open",
+        "reflect": true,
+        "defaultValue": "false"
       },
-      "complexType": {
-        "original": "MouseEvent",
-        "resolved": "MouseEvent",
-        "references": {
-          "MouseEvent": {
-            "location": "global"
+      "disableZoom": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "\"in\" | \"out\" | \"both\"",
+          "resolved": "\"both\" | \"in\" | \"out\" | undefined",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "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": ""
+        },
+        "complexType": {
+          "original": "MouseEvent",
+          "resolved": "MouseEvent",
+          "references": {
+            "MouseEvent": {
+              "location": "global"
+            }
           }
         }
-      }
-    }, {
-      "method": "dsoZoomOut",
-      "name": "dsoZoomOut",
-      "bubbles": true,
-      "cancelable": true,
-      "composed": true,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "complexType": {
-        "original": "MouseEvent",
-        "resolved": "MouseEvent",
-        "references": {
-          "MouseEvent": {
-            "location": "global"
+      }, {
+        "method": "dsoZoomOut",
+        "name": "dsoZoomOut",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "complexType": {
+          "original": "MouseEvent",
+          "resolved": "MouseEvent",
+          "references": {
+            "MouseEvent": {
+              "location": "global"
+            }
           }
         }
-      }
-    }]; }
-  static get watchers() { return [{
-      "propName": "open",
-      "methodName": "watchOpen"
-    }]; }
+      }];
+  }
+  static get watchers() {
+    return [{
+        "propName": "open",
+        "methodName": "watchOpen"
+      }];
+  }
 }
 _MapControls_closeButtonElement = new WeakMap(), _MapControls_toggleButtonElement = new WeakMap();

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

@@ -1,9 +1,10 @@
-import { Component, Event, Prop, h } from '@stencil/core';
-import { v4 as uuidv4 } from 'uuid';
+import { h } from "@stencil/core";
+import { v4 as uuidv4 } from "uuid";
 export class MapOverlays {
   constructor() {
     this.selectableRefs = {};
     this.group = uuidv4();
+    this.overlays = undefined;
   }
   overlayChangeHandler(overlay, e) {
     const checked = e.detail.target instanceof HTMLInputElement ? !!e.detail.target.checked : false;
@@ -11,8 +12,8 @@ export class MapOverlays {
   }
   componentDidRender() {
     this.overlays
-      .filter(o => { var _a, _b; return !o.disabled && ((_b = (_a = this.previousOverlays) === null || _a === void 0 ? void 0 : _a.find(p => p.id === o.id)) === null || _b === void 0 ? void 0 : _b.disabled) === true; })
-      .forEach(o => {
+      .filter((o) => { var _a, _b; return !o.disabled && ((_b = (_a = this.previousOverlays) === null || _a === void 0 ? void 0 : _a.find((p) => p.id === o.id)) === null || _b === void 0 ? void 0 : _b.disabled) === true; })
+      .forEach((o) => {
       var _a;
       (_a = this.selectableRefs[o.id]) === null || _a === void 0 ? void 0 : _a.toggleInfo(false);
     });
@@ -22,83 +23,83 @@ export class MapOverlays {
     for (const ref in this.selectableRefs) {
       delete this.selectableRefs[ref];
     }
-    return (h("fieldset", { class: "form-group dso-checkboxes" },
-      h("legend", { class: "sr-only" }, "Kaartlagen"),
-      h("div", { class: "dso-label-container" },
-        h("span", { class: "control-label", "aria-hidden": "true" }, "Kaartlagen")),
-      h("div", { class: "dso-field-container" }, this.overlays.map(overlay => (h("dso-selectable", { key: overlay.id, type: "checkbox", value: overlay.name, checked: overlay.checked, disabled: overlay.disabled, name: this.group, ref: ref => this.selectableRefs[overlay.id] = ref, onDsoChange: e => this.overlayChangeHandler(overlay, e) },
-        overlay.name,
-        overlay.info
-          ? h("p", { slot: "info" }, overlay.info)
-          : null))))));
+    return (h("fieldset", { class: "form-group dso-checkboxes" }, h("legend", { class: "sr-only" }, "Kaartlagen"), h("div", { class: "dso-label-container" }, h("span", { class: "control-label", "aria-hidden": "true" }, "Kaartlagen")), h("div", { class: "dso-field-container" }, this.overlays.map((overlay) => (h("dso-selectable", { key: overlay.id, type: "checkbox", value: overlay.name, checked: overlay.checked, disabled: overlay.disabled, name: this.group, ref: (ref) => ref && (this.selectableRefs[overlay.id] = ref), onDsoChange: (e) => this.overlayChangeHandler(overlay, e) }, overlay.name, overlay.info ? h("p", { slot: "info" }, overlay.info) : null))))));
   }
   static get is() { return "dso-map-overlays"; }
   static get encapsulation() { return "shadow"; }
-  static get originalStyleUrls() { return {
-    "$": ["./map-overlays.scss"]
-  }; }
-  static get styleUrls() { return {
-    "$": ["map-overlays.css"]
-  }; }
-  static get properties() { return {
-    "group": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
+  static get originalStyleUrls() {
+    return {
+      "$": ["./map-overlays.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["map-overlays.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "group": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "group",
+        "reflect": false,
+        "defaultValue": "uuidv4()"
       },
-      "attribute": "group",
-      "reflect": false,
-      "defaultValue": "uuidv4()"
-    },
-    "overlays": {
-      "type": "unknown",
-      "mutable": false,
-      "complexType": {
-        "original": "Overlay[]",
-        "resolved": "Overlay[]",
-        "references": {
-          "Overlay": {
-            "location": "import",
-            "path": "./map-overlays.interfaces"
+      "overlays": {
+        "type": "unknown",
+        "mutable": false,
+        "complexType": {
+          "original": "Overlay[]",
+          "resolved": "Overlay[]",
+          "references": {
+            "Overlay": {
+              "location": "import",
+              "path": "./map-overlays.interfaces"
+            }
           }
+        },
+        "required": true,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
         }
-      },
-      "required": true,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
       }
-    }
-  }; }
-  static get events() { return [{
-      "method": "dsoToggleOverlay",
-      "name": "dsoToggleOverlay",
-      "bubbles": true,
-      "cancelable": true,
-      "composed": true,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "complexType": {
-        "original": "OverlayChangeEvent",
-        "resolved": "OverlayChangeEvent",
-        "references": {
-          "OverlayChangeEvent": {
-            "location": "import",
-            "path": "./map-overlays.interfaces"
+    };
+  }
+  static get events() {
+    return [{
+        "method": "dsoToggleOverlay",
+        "name": "dsoToggleOverlay",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "complexType": {
+          "original": "OverlayChangeEvent",
+          "resolved": "OverlayChangeEvent",
+          "references": {
+            "OverlayChangeEvent": {
+              "location": "import",
+              "path": "./map-overlays.interfaces"
+            }
           }
         }
-      }
-    }]; }
+      }];
+  }
 }

package/dist/collection/components/modal/modal.css

@@ -0,0 +1,155 @@
+@keyframes slideInFromTop {
+  0% {
+    opacity: 0;
+  }
+  100% {
+    opacity: 1;
+  }
+}
+:host .dso-dialog {
+  background-color: #fff;
+  box-shadow: 0 8px 24px 0 rgba(25, 25, 25, 0.4);
+}
+:host .dso-header {
+  border-bottom: 1px solid #ccc;
+  padding: 16px;
+  position: relative;
+}
+:host .dso-header h2 {
+  color: #275937;
+  margin: 0;
+  max-width: calc(100% - 24px);
+}
+:host .dso-header .dso-close {
+  background-color: transparent;
+  border: 0;
+  height: 32px;
+  padding: 0;
+  position: absolute;
+  right: 13px;
+  text-align: center;
+  top: 16px;
+  width: 32px;
+}
+:host .dso-body {
+  height: calc(100% - 96px - 1.5rem);
+  max-height: calc(70vh - 144px - 1.5em);
+  min-height: 1.5rem;
+  overflow-x: auto;
+  padding: 32px;
+}
+:host .dso-body p {
+  margin: 0 0 16px;
+}
+:host .dso-body ul,
+:host .dso-body ol {
+  margin-bottom: 16px;
+}
+:host .dso-body ul:not(.list-group):not(.dso-link-list):not(.dso-columns-list),
+:host .dso-body ol:not(.list-group):not(.dso-link-list):not(.dso-columns-list) {
+  padding-inline-start: 24px;
+}
+:host .dso-body pre {
+  margin: 0 0 16px;
+}
+:host .dso-body blockquote {
+  padding: 16px 24px;
+}
+:host .dso-body dso-highlight-box,
+:host .dso-body .dso-highlight-box {
+  margin-bottom: 24px;
+}
+:host .dso-body img {
+  height: auto;
+  max-width: 100%;
+}
+:host .dso-footer {
+  min-height: 80px;
+  padding: 0 32px 32px;
+  text-align: right;
+}
+@media screen and (min-width: 768px) {
+  :host {
+    bottom: 0;
+    height: 100%;
+    left: 0;
+    position: fixed;
+    right: 0;
+    top: 0;
+    z-index: 530;
+  }
+  :host .dso-dialog {
+    animation: 1s ease-out 0s 1 slideInFromTop;
+    margin: auto;
+    margin-top: 15vh;
+    max-width: 640px;
+    opacity: 1;
+  }
+  :host .dso-footer .btn + .dso-secondary, :host .dso-footer .btn + .btn-default, :host .dso-footer .dso-primary + .dso-secondary, :host .dso-footer .dso-primary + .btn-default, :host .dso-footer .dso-secondary + .dso-secondary, :host .dso-footer .dso-secondary + .btn-default, :host .dso-footer .dso-tertiary + .dso-secondary, :host .dso-footer .dso-tertiary + .btn-default {
+    margin-left: 16px;
+  }
+  :host .dso-footer .btn + .dso-tertiary, :host .dso-footer .btn + .btn-link, :host .dso-footer .dso-primary + .dso-tertiary, :host .dso-footer .dso-primary + .btn-link, :host .dso-footer .dso-secondary + .dso-tertiary, :host .dso-footer .dso-secondary + .btn-link, :host .dso-footer .dso-tertiary + .dso-tertiary, :host .dso-footer .dso-tertiary + .btn-link {
+    margin-left: 0;
+  }
+}
+@media screen and (max-width: 767px) {
+  :host {
+    max-width: 100%;
+  }
+  :host .dso-footer .btn + .btn, :host .dso-footer .btn + .dso-primary, :host .dso-footer .btn + .dso-secondary, :host .dso-footer .btn + .dso-tertiary, :host .dso-footer .dso-primary + .btn, :host .dso-footer .dso-primary + .dso-primary, :host .dso-footer .dso-primary + .dso-secondary, :host .dso-footer .dso-primary + .dso-tertiary, :host .dso-footer .dso-secondary + .btn, :host .dso-footer .dso-secondary + .dso-primary, :host .dso-footer .dso-secondary + .dso-secondary, :host .dso-footer .dso-secondary + .dso-tertiary, :host .dso-footer .dso-tertiary + .btn, :host .dso-footer .dso-tertiary + .dso-primary, :host .dso-footer .dso-tertiary + .dso-secondary, :host .dso-footer .dso-tertiary + .dso-tertiary {
+    margin-left: 0;
+  }
+  :host .dso-footer button {
+    text-align: center;
+    width: 100%;
+  }
+  :host .dso-footer button + button {
+    margin-top: 8px;
+  }
+  :host .dso-footer button.dso-tertiary,
+:host .dso-footer button.dso-tertiary span, :host .dso-footer button.btn-link,
+:host .dso-footer button.btn-link span {
+    float: none;
+  }
+}
+
+*,
+*::after,
+*::before {
+  box-sizing: border-box;
+}
+
+.sr-only {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  border: 0;
+}
+
+button {
+  -webkit-appearance: button;
+  color: inherit;
+  cursor: pointer;
+  font: inherit;
+  font-family: inherit;
+  font-size: inherit;
+  line-height: inherit;
+  margin: 0;
+  overflow: visible;
+  text-transform: none;
+}
+button[disabled] {
+  cursor: default;
+}
+button::-moz-focus-inner {
+  border: 0;
+  padding: 0;
+}
+
+.dso-close dso-icon {
+  color: #39870c;
+}