@dso-toolkit/core 31.0.0 → 32.1.0

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

@@ -1,21 +1,20 @@
-import { h } from '@stencil/core';
+import { h, Fragment } from '@stencil/core';
 import clsx from 'clsx';
 export const DsoTreeItem = ({ owner, ancestors, item, index, level, setSize }) => {
-  var _a, _b;
-  return (h("li", { key: item.reference, class: clsx('tree-item', { 'has-child': item.hasItems }), role: "treeitem", "aria-expanded": item.hasItems ? '' + !!item.open : undefined, "aria-level": level, "aria-setsize": setSize, "aria-posinset": index + 1 },
+  var _a, _b, _c;
+  return (h("li", { key: item.reference, class: clsx('tree-item', { 'has-child': item.hasItems }), 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 ? 'chevron-down' : 'chevron-right' }))
       : h("dso-icon", null)),
-    h("p", { class: "tree-content", tabindex: level === 1 && index === 0 ? 0 : -1, onClick: (e) => owner.itemClick(e, ancestors, item) },
+    h("p", { class: "tree-content", tabindex: level === 1 && index === 0 ? 0 : -1, role: "treeitem", "aria-expanded": item.hasItems ? '' + (!!item.open && !!((_a = item.items) === null || _a === void 0 ? void 0 : _a.length)) : undefined, "aria-level": level, "aria-setsize": setSize, "aria-posinset": index + 1, "aria-busy": item.loading ? 'true' : undefined, onClick: (e) => owner.itemClick(e, ancestors, item) },
       item.href
-        ? h("a", { href: item.href }, item.label)
-        : h("span", null, item.label), (_a = item.icons) === null || _a === void 0 ? void 0 :
-      _a.map((icon) => h("dso-icon", { icon: icon.icon, title: icon.label }))),
-    h("ul", { role: "group", "aria-busy": item.loading ? 'true' : undefined },
-      item.hasItems && !item.items && item.loading
+        ? h("a", { href: item.href, tabindex: "-1" }, item.label)
+        : h("span", null, item.label), (_b = item.icons) === null || _b === void 0 ? void 0 :
+      _b.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." })
-        : undefined,
-      item.open && ((_b = item.items) === null || _b === void 0 ? void 0 : _b.map((childItem, index, org) => h(DsoTreeItem, { owner: owner, ancestors: [...ancestors, item], item: childItem, index: index, level: level + 1, setSize: org.length }))))));
+        : h("ul", { role: "group" }, (_c = item.items) === null || _c === void 0 ? void 0 : _c.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.interfaces.js

@@ -0,0 +1 @@
+export {};

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

@@ -45,11 +45,16 @@ export class TreeView {
       event.preventDefault();
     };
     this.itemClick = (event, ancestors, item) => {
-      var _a;
       if (!(event.target instanceof HTMLElement)) {
         return;
       }
-      if (event.target.classList.contains('tree-content') || ((_a = event.target.parentElement) === null || _a === void 0 ? void 0 : _a.classList.contains('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);
+        if (!(contentElement instanceof HTMLParagraphElement) || !(tree instanceof HTMLElement)) {
+          return;
+        }
+        TreeView.setFocus(tree, contentElement);
         this.clickItem.emit([...ancestors, item]);
         return;
       }
@@ -91,27 +96,27 @@ export class TreeView {
     TreeView.setFocus(tree, focusableItems[index]);
   }
   static expandItemOrFocusChild(tree, target) {
-    var _a, _b;
-    if (((_a = target === null || target === void 0 ? void 0 : target.parentElement) === null || _a === void 0 ? void 0 : _a.getAttribute('aria-expanded')) === 'true') {
+    var _a;
+    if ((target === null || target === void 0 ? void 0 : target.getAttribute('aria-expanded')) === 'true') {
       TreeView.moveFocus(tree, target, 'next');
     }
     else {
-      const controlElement = (_b = target.previousElementSibling) === null || _b === void 0 ? void 0 : _b.firstElementChild;
+      const controlElement = (_a = target.previousElementSibling) === null || _a === void 0 ? void 0 : _a.firstElementChild;
       if (controlElement instanceof HTMLElement) {
         controlElement.click();
       }
     }
   }
   static collapseItemOrFocusParent(tree, target) {
-    var _a, _b, _c, _d;
-    if (((_a = target === null || target === void 0 ? void 0 : target.parentElement) === null || _a === void 0 ? void 0 : _a.getAttribute('aria-expanded')) === 'true') {
-      const controlElement = (_b = target.previousElementSibling) === null || _b === void 0 ? void 0 : _b.firstElementChild;
+    var _a, _b, _c;
+    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();
       }
     }
     else {
-      const parentTarget = (_d = (_c = target === null || target === void 0 ? void 0 : target.parentElement) === null || _c === void 0 ? void 0 : _c.parentElement) === null || _d === void 0 ? void 0 : _d.previousElementSibling;
+      const parentTarget = (_c = (_b = target === null || target === void 0 ? void 0 : target.parentElement) === null || _b === void 0 ? void 0 : _b.parentElement) === null || _c === void 0 ? void 0 : _c.previousElementSibling;
       if (parentTarget instanceof HTMLElement) {
         TreeView.setFocus(tree, parentTarget);
       }
@@ -158,7 +163,7 @@ export class TreeView {
         "references": {
           "TreeViewItem": {
             "location": "import",
-            "path": "@dso-toolkit/sources"
+            "path": "./tree-view.interfaces"
           }
         }
       },
@@ -186,7 +191,7 @@ export class TreeView {
         "references": {
           "TreeViewItem": {
             "location": "import",
-            "path": "@dso-toolkit/sources"
+            "path": "./tree-view.interfaces"
           }
         }
       }
@@ -206,7 +211,7 @@ export class TreeView {
         "references": {
           "TreeViewItem": {
             "location": "import",
-            "path": "@dso-toolkit/sources"
+            "path": "./tree-view.interfaces"
           }
         }
       }
@@ -226,7 +231,7 @@ export class TreeView {
         "references": {
           "TreeViewItem": {
             "location": "import",
-            "path": "@dso-toolkit/sources"
+            "path": "./tree-view.interfaces"
           }
         }
       }

package/dist/custom-elements/index.d.ts

@@ -44,6 +44,12 @@ export const DsoDropdownMenu: {
   new (): DsoDropdownMenu;
 };
 
+interface DsoHelpcenterPanel extends Components.DsoHelpcenterPanel, HTMLElement {}
+export const DsoHelpcenterPanel: {
+  prototype: DsoHelpcenterPanel;
+  new (): DsoHelpcenterPanel;
+};
+
 interface DsoHighlightBox extends Components.DsoHighlightBox, HTMLElement {}
 export const DsoHighlightBox: {
   prototype: DsoHighlightBox;