@dso-toolkit/core 45.1.0 → 46.0.0

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

@@ -1,5 +1,5 @@
-import { Component, h, Prop, Event, State, Element, Watch, Host } from '@stencil/core';
-import clsx from 'clsx';
+import { h, Host, } from "@stencil/core";
+import clsx from "clsx";
 function hasEllipses(el) {
   return el.scrollWidth > el.clientWidth;
 }
@@ -14,11 +14,21 @@ export class Label {
     this.resizeObserver = new ResizeObserver(() => this.truncateLabel());
     this.keydownListenerActive = false;
     this.keyDownListener = (event) => {
-      if (event.key == 'Escape') {
+      if (event.key === "Escape") {
         this.textHover = false;
         this.textFocus = false;
       }
     };
+    this.compact = undefined;
+    this.removable = undefined;
+    this.status = undefined;
+    this.removeHover = undefined;
+    this.removeFocus = undefined;
+    this.truncate = undefined;
+    this.textHover = undefined;
+    this.textFocus = undefined;
+    this.truncatedContent = undefined;
+    this.labelText = undefined;
   }
   watchTruncate(truncate) {
     if (truncate) {
@@ -30,11 +40,11 @@ export class Label {
   }
   watchTooltipActive() {
     if (!this.keydownListenerActive && (this.textHover || this.textFocus)) {
-      document.addEventListener('keydown', this.keyDownListener);
+      document.addEventListener("keydown", this.keyDownListener);
       this.keydownListenerActive = true;
     }
     if (!this.textHover && !this.textFocus) {
-      document.removeEventListener('keydown', this.keyDownListener);
+      document.removeEventListener("keydown", this.keyDownListener);
       this.keydownListenerActive = false;
     }
   }
@@ -49,7 +59,7 @@ export class Label {
     this.labelText = this.host.innerText;
     this.mutationObserver.observe(this.host, {
       attributes: true,
-      subtree: true
+      subtree: true,
     });
     if (this.truncate) {
       this.startTruncate();
@@ -65,155 +75,156 @@ export class Label {
     this.truncateLabel();
   }
   stopTruncate() {
-    document.removeEventListener('keydown', this.keyDownListener);
+    document.removeEventListener("keydown", this.keyDownListener);
     this.resizeObserver.unobserve(this.host);
     this.truncatedContent = undefined;
     this.keydownListenerActive = false;
   }
   render() {
     const status = this.status && Label.statusMap.get(this.status);
-    return (h(Host, { "aria-roledescription": (this.truncate && this.truncatedContent) ? 'Deze tekst is visueel afgekapt en wordt volledig zichtbaar bij focus.' : undefined },
-      h("span", { id: "toggle-anchor", class: clsx('dso-label', {
-          [`dso-label-${this.status}`]: this.status,
-          'dso-compact': this.compact && !this.removable,
-          'dso-hover': this.removeHover || this.removeFocus,
-        }) },
-        h("slot", { name: "symbol" }),
-        status && (h("span", { class: "sr-only" },
-          status,
-          ": ")),
-        h("span", { class: clsx('dso-label-content', {
-            'dso-truncate': !!this.truncate,
-          }), ref: element => this.labelContent = element, tabindex: (this.truncate && this.truncatedContent) ? 0 : -1, onMouseEnter: () => this.textHover = true, onMouseLeave: () => this.textHover = false, onFocus: () => this.textFocus = true, onBlur: () => this.textFocus = false },
-          h("slot", null)),
-        this.removable && (h("button", { type: "button", onClick: e => this.dsoRemoveClick.emit(e), onMouseEnter: () => this.removeHover = true, onMouseLeave: () => this.removeHover = false, onFocus: () => this.removeFocus = true, onBlur: () => this.removeFocus = false },
-          h("span", { class: "sr-only" },
-            "Verwijder: ",
-            this.labelText),
-          h("dso-icon", { icon: "times" })))),
-      h("dso-tooltip", { stateless: true, for: "toggle-anchor", active: !!this.truncatedContent && (this.textHover || this.textFocus), position: "top", strategy: "absolute" }, this.truncatedContent)));
+    return (h(Host, { "aria-roledescription": this.truncate && this.truncatedContent
+        ? "Deze tekst is visueel afgekapt en wordt volledig zichtbaar bij focus."
+        : undefined }, h("span", { id: "toggle-anchor", class: clsx("dso-label", {
+        [`dso-label-${this.status}`]: this.status,
+        "dso-compact": this.compact && !this.removable,
+        "dso-hover": this.removeHover || this.removeFocus,
+      }) }, h("slot", { name: "symbol" }), status && h("span", { class: "sr-only" }, status, ": "), h("span", { class: clsx("dso-label-content", {
+        "dso-truncate": !!this.truncate,
+      }), ref: (element) => (this.labelContent = element), tabindex: this.truncate && this.truncatedContent ? 0 : -1, onMouseEnter: () => (this.textHover = true), onMouseLeave: () => (this.textHover = false), onFocus: () => (this.textFocus = true), onBlur: () => (this.textFocus = false) }, h("slot", null)), this.removable && (h("button", { type: "button", onClick: (e) => this.dsoRemoveClick.emit(e), onMouseEnter: () => (this.removeHover = true), onMouseLeave: () => (this.removeHover = false), onFocus: () => (this.removeFocus = true), onBlur: () => (this.removeFocus = false) }, h("span", { class: "sr-only" }, "Verwijder: ", this.labelText), h("dso-icon", { icon: "times" })))), h("dso-tooltip", { stateless: true, for: "toggle-anchor", active: !!this.truncatedContent && (this.textHover || this.textFocus), position: "top", strategy: "absolute" }, this.truncatedContent)));
   }
   static get is() { return "dso-label"; }
   static get encapsulation() { return "shadow"; }
-  static get originalStyleUrls() { return {
-    "$": ["label.scss"]
-  }; }
-  static get styleUrls() { return {
-    "$": ["label.css"]
-  }; }
-  static get properties() { return {
-    "compact": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean | undefined",
-        "references": {}
-      },
-      "required": false,
-      "optional": true,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "compact",
-      "reflect": false
-    },
-    "removable": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean | undefined",
-        "references": {}
-      },
-      "required": false,
-      "optional": true,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "removable",
-      "reflect": false
-    },
-    "status": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "'primary' | 'info' | 'success' | 'warning' | 'danger' | 'bright'",
-        "resolved": "\"bright\" | \"danger\" | \"info\" | \"primary\" | \"success\" | \"warning\" | undefined",
-        "references": {}
-      },
-      "required": false,
-      "optional": true,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "status",
-      "reflect": false
-    },
-    "truncate": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean | undefined",
-        "references": {}
+  static get originalStyleUrls() {
+    return {
+      "$": ["label.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["label.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "compact": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean | undefined",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "compact",
+        "reflect": false
       },
-      "required": false,
-      "optional": true,
-      "docs": {
-        "tags": [],
-        "text": ""
+      "removable": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean | undefined",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "removable",
+        "reflect": false
       },
-      "attribute": "truncate",
-      "reflect": false
-    }
-  }; }
-  static get states() { return {
-    "removeHover": {},
-    "removeFocus": {},
-    "textHover": {},
-    "textFocus": {},
-    "truncatedContent": {},
-    "labelText": {}
-  }; }
-  static get events() { return [{
-      "method": "dsoRemoveClick",
-      "name": "dsoRemoveClick",
-      "bubbles": true,
-      "cancelable": true,
-      "composed": true,
-      "docs": {
-        "tags": [],
-        "text": ""
+      "status": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "\"primary\" | \"info\" | \"success\" | \"warning\" | \"danger\" | \"bright\"",
+          "resolved": "\"bright\" | \"danger\" | \"info\" | \"primary\" | \"success\" | \"warning\" | undefined",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "status",
+        "reflect": false
       },
-      "complexType": {
-        "original": "MouseEvent",
-        "resolved": "MouseEvent",
-        "references": {
-          "MouseEvent": {
-            "location": "global"
+      "truncate": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean | undefined",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "truncate",
+        "reflect": false
+      }
+    };
+  }
+  static get states() {
+    return {
+      "removeHover": {},
+      "removeFocus": {},
+      "textHover": {},
+      "textFocus": {},
+      "truncatedContent": {},
+      "labelText": {}
+    };
+  }
+  static get events() {
+    return [{
+        "method": "dsoRemoveClick",
+        "name": "dsoRemoveClick",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "complexType": {
+          "original": "MouseEvent",
+          "resolved": "MouseEvent",
+          "references": {
+            "MouseEvent": {
+              "location": "global"
+            }
           }
         }
-      }
-    }]; }
+      }];
+  }
   static get elementRef() { return "host"; }
-  static get watchers() { return [{
-      "propName": "truncate",
-      "methodName": "watchTruncate"
-    }, {
-      "propName": "textHover",
-      "methodName": "watchTooltipActive"
-    }, {
-      "propName": "textFocus",
-      "methodName": "watchTooltipActive"
-    }]; }
+  static get watchers() {
+    return [{
+        "propName": "truncate",
+        "methodName": "watchTruncate"
+      }, {
+        "propName": "textHover",
+        "methodName": "watchTooltipActive"
+      }, {
+        "propName": "textFocus",
+        "methodName": "watchTooltipActive"
+      }];
+  }
 }
 Label.statusMap = new Map([
-  ['info', 'Opmerking'],
-  ['success', 'Gelukt'],
-  ['warning', 'Waarschuwing'],
-  ['danger', 'Fout'],
+  ["info", "Opmerking"],
+  ["success", "Gelukt"],
+  ["warning", "Waarschuwing"],
+  ["danger", "Fout"],
 ]);

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

@@ -1,17 +1,18 @@
-import { Component, h, Prop, Event } from '@stencil/core';
-import { v4 as uuidv4 } from 'uuid';
+import { h } from "@stencil/core";
+import { v4 as uuidv4 } from "uuid";
 export class MapBaseLayers {
   constructor() {
     this.selectableRefs = {};
     this.group = uuidv4();
+    this.baseLayers = undefined;
   }
   baseLayerChangeHandler(baseLayer) {
     this.dsoBaseLayerChange.emit({ activeBaseLayer: baseLayer });
   }
   componentDidRender() {
     this.baseLayers
-      .filter(l => { var _a, _b; return !l.disabled && ((_b = (_a = this.previousBaselayers) === null || _a === void 0 ? void 0 : _a.find(p => p.id === l.id)) === null || _b === void 0 ? void 0 : _b.disabled) === true; })
-      .forEach(o => {
+      .filter((l) => { var _a, _b; return !l.disabled && ((_b = (_a = this.previousBaselayers) === null || _a === void 0 ? void 0 : _a.find((p) => p.id === l.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);
     });
@@ -21,83 +22,83 @@ export class MapBaseLayers {
     for (const ref in this.selectableRefs) {
       delete this.selectableRefs[ref];
     }
-    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 => (h("dso-selectable", { key: baseLayer.id, type: "radio", value: baseLayer.name, checked: baseLayer.checked, disabled: baseLayer.disabled, name: this.group, ref: ref => this.selectableRefs[baseLayer.id] = ref, onDsoChange: () => this.baseLayerChangeHandler(baseLayer) },
-        baseLayer.name,
-        baseLayer.info
-          ? h("p", { slot: "info" }, baseLayer.info)
-          : null))))));
+    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) => (h("dso-selectable", { key: baseLayer.id, type: "radio", value: baseLayer.name, checked: baseLayer.checked, disabled: baseLayer.disabled, name: this.group, ref: (ref) => ref && (this.selectableRefs[baseLayer.id] = ref), 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"; }
-  static get originalStyleUrls() { return {
-    "$": ["./map-base-layers.scss"]
-  }; }
-  static get styleUrls() { return {
-    "$": ["map-base-layers.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-base-layers.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["map-base-layers.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()"
-    },
-    "baseLayers": {
-      "type": "unknown",
-      "mutable": false,
-      "complexType": {
-        "original": "BaseLayer[]",
-        "resolved": "BaseLayer[]",
-        "references": {
-          "BaseLayer": {
-            "location": "import",
-            "path": "./map-base-layers.interfaces"
+      "baseLayers": {
+        "type": "unknown",
+        "mutable": false,
+        "complexType": {
+          "original": "BaseLayer[]",
+          "resolved": "BaseLayer[]",
+          "references": {
+            "BaseLayer": {
+              "location": "import",
+              "path": "./map-base-layers.interfaces"
+            }
           }
+        },
+        "required": true,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
         }
-      },
-      "required": true,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
       }
-    }
-  }; }
-  static get events() { return [{
-      "method": "dsoBaseLayerChange",
-      "name": "dsoBaseLayerChange",
-      "bubbles": true,
-      "cancelable": true,
-      "composed": true,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "complexType": {
-        "original": "BaseLayerChangeEvent",
-        "resolved": "BaseLayerChangeEvent",
-        "references": {
-          "BaseLayerChangeEvent": {
-            "location": "import",
-            "path": "./map-base-layers.interfaces"
+    };
+  }
+  static get events() {
+    return [{
+        "method": "dsoBaseLayerChange",
+        "name": "dsoBaseLayerChange",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "complexType": {
+          "original": "BaseLayerChangeEvent",
+          "resolved": "BaseLayerChangeEvent",
+          "references": {
+            "BaseLayerChangeEvent": {
+              "location": "import",
+              "path": "./map-base-layers.interfaces"
+            }
           }
         }
-      }
-    }]; }
+      }];
+  }
 }