@dso-toolkit/core 45.1.0 → 46.0.0

package/dist/collection/components/tree-view/tree-item.js

@@ -1,21 +1,7 @@
-import { h, Fragment } from '@stencil/core';
-import clsx from 'clsx';
-export const DsoTreeItem = ({ owner, ancestors, item, index, level, setSize }) => {
+import { h, Fragment } from "@stencil/core";
+import clsx from "clsx";
+export const DsoTreeItem = ({ owner, ancestors, item, index, level, setSize, }) => {
   var _a, _b, _c, _d;
-  return (h("li", { key: item.id, class: clsx('tree-item', { 'has-child': item.hasItems, 'is-expanded': (!!item.open && !!((_a = item.items) === null || _a === void 0 ? void 0 : _a.length)) }), role: 'none' },
-    h("div", { class: "tree-branch-control" }, item.hasItems
-      ?
-        h("div", { onClick: (e) => owner.itemClick(e, ancestors, item) },
-          h("dso-icon", { icon: item.open ? 'minus-square' : 'plus-square' }))
-      : h("dso-icon", null)),
-    h("p", { class: clsx('tree-content', { 'active': item.active }, { 'selected': item.selected }), tabindex: level === 1 && index === 0 ? 0 : -1, role: "treeitem", "aria-expanded": item.hasItems ? '' + (!!item.open && !!((_b = item.items) === null || _b === void 0 ? void 0 : _b.length)) : undefined, "aria-current": item.active ? 'true' : undefined, "aria-level": level, "aria-setsize": setSize, "aria-posinset": index + 1, "aria-busy": item.loading ? 'true' : undefined, "data-item-id": item.id, onClick: (e) => owner.itemClick(e, ancestors, item) },
-      item.selected && h("span", { class: "sr-only" }, "Resultaat: "),
-      item.href
-        ? h("a", { href: item.href, tabindex: "-1" }, item.label)
-        : h("span", null, item.label), (_c = item.icons) === null || _c === void 0 ? void 0 :
-      _c.map((icon) => h("dso-icon", { icon: icon.icon, title: icon.label }))),
-    item.open &&
-      h(Fragment, null, item.hasItems && !item.items && item.loading
-        ? h("dso-progress-indicator", { size: "small", label: "Resultaten laden: een moment geduld alstublieft." })
-        : h("ul", { role: "group" }, (_d = item.items) === null || _d === void 0 ? void 0 : _d.map((childItem, index, org) => h(DsoTreeItem, { owner: owner, ancestors: [...ancestors, item], item: childItem, index: index, level: level + 1, setSize: org.length }))))));
+  return (h("li", { key: item.id, class: clsx("tree-item", { "has-child": item.hasItems, "is-expanded": !!item.open && !!((_a = item.items) === null || _a === void 0 ? void 0 : _a.length) }), role: "none" }, h("div", { class: "tree-branch-control" }, item.hasItems ? (h("div", { onClick: (e) => owner.itemClick(e, ancestors, item) }, h("dso-icon", { icon: item.open ? "minus-square" : "plus-square" }))) : (h("dso-icon", null))), h("p", { class: clsx("tree-content", { active: item.active }, { selected: item.selected }), tabindex: level === 1 && index === 0 ? 0 : -1, role: "treeitem", "aria-expanded": item.hasItems ? "" + (!!item.open && !!((_b = item.items) === null || _b === void 0 ? void 0 : _b.length)) : undefined, "aria-current": item.active ? "true" : undefined, "aria-level": level, "aria-setsize": setSize, "aria-posinset": index + 1, "aria-busy": item.loading ? "true" : undefined, "data-item-id": item.id, onClick: (e) => owner.itemClick(e, ancestors, item) }, item.selected && h("span", { class: "sr-only" }, "Resultaat: "), item.href ? (h("a", { href: item.href, tabindex: "-1" }, item.label)) : (h("span", null, item.label)), (_c = item.icons) === null || _c === void 0 ? void 0 :
+    _c.map((icon) => (h("dso-icon", { icon: icon.icon, title: icon.label })))), item.open && (h(Fragment, null, item.hasItems && !item.items && item.loading ? (h("dso-progress-indicator", { size: "small", label: "Resultaten laden: een moment geduld alstublieft." })) : (h("ul", { role: "group" }, (_d = item.items) === null || _d === void 0 ? void 0 : _d.map((childItem, index, org) => (h(DsoTreeItem, { owner: owner, ancestors: [...ancestors, item], item: childItem, index: index, level: level + 1, setSize: org.length })))))))));
 };

package/dist/collection/components/tree-view/tree-view.js

@@ -1,5 +1,5 @@
-import { h, Component, Event, Prop, Method } from '@stencil/core';
-import { DsoTreeItem } from './tree-item';
+import { h } from "@stencil/core";
+import { DsoTreeItem } from "./tree-item";
 export class TreeView {
   constructor() {
     this.keyDownListener = (event) => {
@@ -7,16 +7,18 @@ export class TreeView {
         return;
       }
       const isIndexLetter = (str) => str.length === 1 && str.match(/\S/);
-      const tree = event.composedPath().find(item => (item instanceof HTMLElement) ? item.className === 'dso-tree' : false);
+      const tree = event
+        .composedPath()
+        .find((item) => (item instanceof HTMLElement ? item.className === "dso-tree" : false));
       if (!(event.target instanceof HTMLParagraphElement) || !(tree instanceof HTMLElement)) {
         return;
       }
       switch (event.key) {
         case "ArrowDown":
-          TreeView.moveFocus(tree, event.target, 'next');
+          TreeView.moveFocus(tree, event.target, "next");
           break;
         case "ArrowUp":
-          TreeView.moveFocus(tree, event.target, 'previous');
+          TreeView.moveFocus(tree, event.target, "previous");
           break;
         case "ArrowRight":
           TreeView.expandItemOrFocusChild(tree, event.target);
@@ -25,10 +27,10 @@ export class TreeView {
           TreeView.collapseItemOrFocusParent(tree, event.target);
           break;
         case "End":
-          TreeView.moveFocus(tree, event.target, 'last');
+          TreeView.moveFocus(tree, event.target, "last");
           break;
         case "Home":
-          TreeView.moveFocus(tree, event.target, 'first');
+          TreeView.moveFocus(tree, event.target, "first");
           break;
         case "Enter":
         case " ":
@@ -48,9 +50,11 @@ export class TreeView {
       if (!(event.target instanceof HTMLElement)) {
         return;
       }
-      const contentElement = event.target.closest('.tree-content');
+      const contentElement = event.target.closest(".tree-content");
       if (contentElement) {
-        const tree = event.composedPath().find(item => (item instanceof HTMLElement) ? item.className === 'dso-tree' : false);
+        const tree = event
+          .composedPath()
+          .find((item) => (item instanceof HTMLElement ? item.className === "dso-tree" : false));
         if (!(contentElement instanceof HTMLParagraphElement) || !(tree instanceof HTMLElement)) {
           return;
         }
@@ -65,6 +69,7 @@ export class TreeView {
         this.dsoOpenItem.emit([...ancestors, item]);
       }
     };
+    this.collection = undefined;
   }
   /**
    * Set focus on the last item in the specified path.
@@ -79,9 +84,9 @@ export class TreeView {
       return false;
     }
     const itemToFocus = path[path.length - 1];
-    const elementToFocus = Array.from((_a = tree.querySelectorAll('p')) !== null && _a !== void 0 ? _a : [])
-      .filter(item => item.offsetWidth > 0 && item.offsetHeight > 0)
-      .find(item => item.dataset['itemId'] === itemToFocus.id);
+    const elementToFocus = Array.from((_a = tree.querySelectorAll("p")) !== null && _a !== void 0 ? _a : [])
+      .filter((item) => item.offsetWidth > 0 && item.offsetHeight > 0)
+      .find((item) => item.dataset["itemId"] === itemToFocus.id);
     if (!elementToFocus) {
       return false;
     }
@@ -90,28 +95,27 @@ export class TreeView {
   }
   static setFocus(tree, target) {
     if (target) {
-      Array.from(tree.querySelectorAll('p'))
-        .filter(item => item.tabIndex === 0)
-        .forEach(item => item.tabIndex = -1);
+      Array.from(tree.querySelectorAll("p"))
+        .filter((item) => item.tabIndex === 0)
+        .forEach((item) => (item.tabIndex = -1));
       target.tabIndex = 0;
       target.focus();
     }
   }
   static moveFocus(tree, el, moveTo) {
-    const focusableItems = Array.from(tree.querySelectorAll('p'))
-      .filter(item => item.offsetWidth > 0 && item.offsetHeight > 0);
+    const focusableItems = Array.from(tree.querySelectorAll("p")).filter((item) => item.offsetWidth > 0 && item.offsetHeight > 0);
     let index = 0;
     switch (moveTo) {
-      case 'first':
+      case "first":
         index = 0;
         break;
-      case 'previous':
+      case "previous":
         index = focusableItems.indexOf(el) - 1;
         break;
-      case 'next':
+      case "next":
         index = focusableItems.indexOf(el) + 1;
         break;
-      case 'last':
+      case "last":
         index = focusableItems.length - 1;
         break;
     }
@@ -119,8 +123,8 @@ export class TreeView {
   }
   static expandItemOrFocusChild(tree, target) {
     var _a;
-    if ((target === null || target === void 0 ? void 0 : target.getAttribute('aria-expanded')) === 'true') {
-      TreeView.moveFocus(tree, target, 'next');
+    if ((target === null || target === void 0 ? void 0 : target.getAttribute("aria-expanded")) === "true") {
+      TreeView.moveFocus(tree, target, "next");
     }
     else {
       const controlElement = (_a = target.previousElementSibling) === null || _a === void 0 ? void 0 : _a.firstElementChild;
@@ -131,7 +135,7 @@ export class TreeView {
   }
   static collapseItemOrFocusParent(tree, target) {
     var _a, _b, _c;
-    if ((target === null || target === void 0 ? void 0 : target.getAttribute('aria-expanded')) === 'true') {
+    if ((target === null || target === void 0 ? void 0 : target.getAttribute("aria-expanded")) === "true") {
       const controlElement = (_a = target.previousElementSibling) === null || _a === void 0 ? void 0 : _a.firstElementChild;
       if (controlElement instanceof HTMLElement) {
         controlElement.click();
@@ -145,8 +149,7 @@ export class TreeView {
     }
   }
   static setFocusByFirstCharacter(tree, el, char, backwards) {
-    const focusableItems = Array.from(tree.querySelectorAll('p'))
-      .filter(item => item.offsetWidth > 0 && item.offsetHeight > 0);
+    const focusableItems = Array.from(tree.querySelectorAll("p")).filter((item) => item.offsetWidth > 0 && item.offsetHeight > 0);
     if (backwards) {
       focusableItems.reverse();
     }
@@ -164,132 +167,141 @@ export class TreeView {
   }
   render() {
     var _a;
-    return (h("div", { id: "tree", class: "dso-tree", onKeyDown: (e) => this.keyDownListener(e), ref: element => this.tree = element },
-      h("ul", { role: "tree", "aria-label": "Objectenboom" }, (_a = this.collection) === null || _a === void 0 ? void 0 : _a.map((item, index) => h(DsoTreeItem, { owner: this, ancestors: [], item: item, index: index, level: 1, setSize: this.collection.length })))));
+    return (h("div", { id: "tree", class: "dso-tree", onKeyDown: (e) => this.keyDownListener(e), ref: (element) => (this.tree = element) }, h("ul", { role: "tree", "aria-label": "Objectenboom" }, (_a = this.collection) === null || _a === void 0 ? void 0 : _a.map((item, index) => (h(DsoTreeItem, { owner: this, ancestors: [], item: item, index: index, level: 1, setSize: this.collection.length }))))));
   }
   static get is() { return "dso-tree-view"; }
   static get encapsulation() { return "shadow"; }
-  static get originalStyleUrls() { return {
-    "$": ["./tree-view.scss"]
-  }; }
-  static get styleUrls() { return {
-    "$": ["tree-view.css"]
-  }; }
-  static get properties() { return {
-    "collection": {
-      "type": "unknown",
-      "mutable": false,
-      "complexType": {
-        "original": "TreeViewItem[]",
-        "resolved": "TreeViewItem[]",
-        "references": {
-          "TreeViewItem": {
-            "location": "import",
-            "path": "./tree-view.interfaces"
+  static get originalStyleUrls() {
+    return {
+      "$": ["./tree-view.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["tree-view.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "collection": {
+        "type": "unknown",
+        "mutable": false,
+        "complexType": {
+          "original": "TreeViewItem[]",
+          "resolved": "TreeViewItem[]",
+          "references": {
+            "TreeViewItem": {
+              "location": "import",
+              "path": "./tree-view.interfaces"
+            }
           }
+        },
+        "required": true,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "The collection of TreeViewItems"
         }
-      },
-      "required": true,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "The collection of TreeViewItems"
       }
-    }
-  }; }
-  static get events() { return [{
-      "method": "dsoOpenItem",
-      "name": "dsoOpenItem",
-      "bubbles": true,
-      "cancelable": true,
-      "composed": true,
-      "docs": {
-        "tags": [],
-        "text": "Emitted when a tree view item is opened.\nThe `detail` property of the `CustomEvent`\u00A0will contain the complete path of TreeViewItems from the\nroot to the item that is emitting the open event. The consumer of the event is responsible for updating\nthe TreeView's collection (usually set the open state on the last TreeViewItem in path)."
-      },
-      "complexType": {
-        "original": "TreeViewItem[]",
-        "resolved": "TreeViewItem[]",
-        "references": {
-          "TreeViewItem": {
-            "location": "import",
-            "path": "./tree-view.interfaces"
+    };
+  }
+  static get events() {
+    return [{
+        "method": "dsoOpenItem",
+        "name": "dsoOpenItem",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "Emitted when a tree view item is opened.\r\nThe `detail` property of the `CustomEvent` will contain the complete path of TreeViewItems from the\r\nroot to the item that is emitting the open event. The consumer of the event is responsible for updating\r\nthe TreeView's collection (usually set the open state on the last TreeViewItem in path)."
+        },
+        "complexType": {
+          "original": "TreeViewItem[]",
+          "resolved": "TreeViewItem[]",
+          "references": {
+            "TreeViewItem": {
+              "location": "import",
+              "path": "./tree-view.interfaces"
+            }
           }
         }
-      }
-    }, {
-      "method": "dsoCloseItem",
-      "name": "dsoCloseItem",
-      "bubbles": true,
-      "cancelable": true,
-      "composed": true,
-      "docs": {
-        "tags": [],
-        "text": "Emitted when a tree view item is closed.\nThe `detail` property of the `CustomEvent`\u00A0will contain the complete path of TreeViewItems from the\nroot to the item that is emitting the close event. The consumer of the event is responsible for updating\nthe TreeView's collection (usually set the closed state on the last TreeViewItem in path)."
-      },
-      "complexType": {
-        "original": "TreeViewItem[]",
-        "resolved": "TreeViewItem[]",
-        "references": {
-          "TreeViewItem": {
-            "location": "import",
-            "path": "./tree-view.interfaces"
+      }, {
+        "method": "dsoCloseItem",
+        "name": "dsoCloseItem",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "Emitted when a tree view item is closed.\r\nThe `detail` property of the `CustomEvent` will contain the complete path of TreeViewItems from the\r\nroot to the item that is emitting the close event. The consumer of the event is responsible for updating\r\nthe TreeView's collection (usually set the closed state on the last TreeViewItem in path)."
+        },
+        "complexType": {
+          "original": "TreeViewItem[]",
+          "resolved": "TreeViewItem[]",
+          "references": {
+            "TreeViewItem": {
+              "location": "import",
+              "path": "./tree-view.interfaces"
+            }
           }
         }
-      }
-    }, {
-      "method": "dsoClickItem",
-      "name": "dsoClickItem",
-      "bubbles": true,
-      "cancelable": true,
-      "composed": true,
-      "docs": {
-        "tags": [],
-        "text": "Emitted when a tree view item is clicked.\nThe `detail` property of the `CustomEvent`\u00A0will contain an object with:\n`path` = the complete path of TreeViewItems from the root to the item that is emitting the clicked event.\n`originalEvent` = the original click event.\nThe consumer of the event is responsible for updating the TreeView's collection (usually set the active\nstate on the last TreeViewItem in path and clear all other active item states)."
-      },
-      "complexType": {
-        "original": "TreeViewPointerEvent",
-        "resolved": "TreeViewPointerEvent",
-        "references": {
-          "TreeViewPointerEvent": {
-            "location": "import",
-            "path": "./tree-view.interfaces"
+      }, {
+        "method": "dsoClickItem",
+        "name": "dsoClickItem",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "Emitted when a tree view item is clicked.\r\nThe `detail` property of the `CustomEvent` will contain an object with:\r\n`path` = the complete path of TreeViewItems from the root to the item that is emitting the clicked event.\r\n`originalEvent` = the original click event.\r\nThe consumer of the event is responsible for updating the TreeView's collection (usually set the active\r\nstate on the last TreeViewItem in path and clear all other active item states)."
+        },
+        "complexType": {
+          "original": "TreeViewPointerEvent",
+          "resolved": "TreeViewPointerEvent",
+          "references": {
+            "TreeViewPointerEvent": {
+              "location": "import",
+              "path": "./tree-view.interfaces"
+            }
           }
         }
-      }
-    }]; }
-  static get methods() { return {
-    "focusItem": {
-      "complexType": {
-        "signature": "(path: TreeViewItem[]) => Promise<boolean>",
-        "parameters": [{
-            "tags": [],
-            "text": ""
-          }],
-        "references": {
-          "Promise": {
-            "location": "global"
-          },
-          "TreeViewItem": {
-            "location": "import",
-            "path": "./tree-view.interfaces"
+      }];
+  }
+  static get methods() {
+    return {
+      "focusItem": {
+        "complexType": {
+          "signature": "(path: TreeViewItem[]) => Promise<boolean>",
+          "parameters": [{
+              "tags": [],
+              "text": ""
+            }],
+          "references": {
+            "Promise": {
+              "location": "global"
+            },
+            "TreeViewItem": {
+              "location": "import",
+              "path": "./tree-view.interfaces"
+            },
+            "HTMLElement": {
+              "location": "global"
+            }
           },
-          "HTMLElement": {
-            "location": "global"
-          }
+          "return": "Promise<boolean>"
         },
-        "return": "Promise<boolean>"
-      },
-      "docs": {
-        "text": "Set focus on the last item in the specified path.\nThe consumer is responsible for providing a TreeView collection where the last item is visible.",
-        "tags": [{
-            "name": "async",
-            "text": undefined
-          }, {
-            "name": "returns",
-            "text": "Whether the item was found."
-          }]
+        "docs": {
+          "text": "Set focus on the last item in the specified path.\r\nThe consumer is responsible for providing a TreeView collection where the last item is visible.",
+          "tags": [{
+              "name": "async",
+              "text": undefined
+            }, {
+              "name": "returns",
+              "text": "Whether the item was found."
+            }]
+        }
       }
-    }
-  }; }
+    };
+  }
 }

package/dist/collection/components/viewer-grid/viewer-grid-filterpanel-buttons.js

@@ -1,7 +1,2 @@
-import { h } from '@stencil/core';
-export const ViewerGridFilterpanelButtons = ({ onApply, onCancel }) => (h("div", { class: "filterpanel-buttons" },
-  h("button", { type: "button", class: "cancel-button", onClick: onCancel },
-    h("span", null, "Annuleren")),
-  h("button", { type: "button", class: "apply-button", onClick: onApply },
-    h("span", null, "Toepassen"),
-    h("dso-icon", { icon: "chevron-right" }))));
+import { h } from "@stencil/core";
+export const ViewerGridFilterpanelButtons = ({ onApply, onCancel, }) => (h("div", { class: "filterpanel-buttons" }, h("button", { type: "button", class: "cancel-button", onClick: onCancel }, h("span", null, "Annuleren")), h("button", { type: "button", class: "apply-button", onClick: onApply }, h("span", null, "Toepassen"), h("dso-icon", { icon: "chevron-right" }))));

package/dist/collection/components/viewer-grid/viewer-grid.css

@@ -1,83 +1,3 @@
-h1,
-.h1,
-h2,
-.h2,
-h3,
-.h3 {
-  margin-bottom: 16px;
-  margin-top: 24px;
-}
-
-h1,
-.h1 {
-  line-height: 1.25;
-}
-
-h1 {
-  color: #275937;
-  font-size: 2rem;
-  font-weight: 700;
-}
-
-h2,
-.h2 {
-  line-height: 1.33;
-}
-
-h2 {
-  color: #275937;
-  font-size: 1.5rem;
-  font-weight: 700;
-}
-
-h3,
-.h3 {
-  line-height: 1.2;
-}
-
-h3 {
-  color: #275937;
-  font-size: 1.25rem;
-  font-weight: 600;
-}
-
-h4,
-.h4,
-h5,
-.h5,
-h6,
-.h6 {
-  margin-bottom: 16px;
-  margin-top: 12px;
-}
-
-h4,
-.h4 {
-  line-height: 1.5;
-}
-
-h4 {
-  color: #275937;
-  font-size: 1rem;
-  font-weight: 600;
-}
-
-h5,
-.h5 {
-  line-height: 1.5;
-}
-
-h5 {
-  color: #191919;
-  font-size: 1rem;
-  font-weight: 600;
-}
-
-h6,
-.h6 {
-  line-height: 1.5;
-}
-
 *,
 *::after,
 *::before {
@@ -348,7 +268,7 @@ button::-moz-focus-inner {
 .dso-map-panel .main {
   height: 100%;
   overflow-y: scroll;
-  padding: 8px 16px;
+  padding: 0 16px 8px;
 }
 
 .sizing-buttons {
@@ -559,15 +479,15 @@ button::-moz-focus-inner {
     width: 100vw;
   }
 }
-.overlay::before {
-  content: "";
-  display: block;
+
+.dimscreen {
   position: fixed;
   top: 0;
   bottom: 0;
   left: 0;
   right: 624px;
   background-color: rgba(0, 0, 0, 0.5);
+  z-index: 102;
 }
 
 .filterpanel-buttons {