@dso-toolkit/core 30.1.0 → 32.0.0

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

@@ -0,0 +1,239 @@
+import { h, Component, Event, Prop } from '@stencil/core';
+import { DsoTreeItem } from './tree-item';
+export class TreeView {
+  constructor() {
+    this.keyDownListener = (event) => {
+      if (event.defaultPrevented) {
+        return;
+      }
+      const isIndexLetter = (str) => str.length === 1 && str.match(/\S/);
+      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');
+          break;
+        case "ArrowUp":
+          TreeView.moveFocus(tree, event.target, 'previous');
+          break;
+        case "ArrowRight":
+          TreeView.expandItemOrFocusChild(tree, event.target);
+          break;
+        case "ArrowLeft":
+          TreeView.collapseItemOrFocusParent(tree, event.target);
+          break;
+        case "End":
+          TreeView.moveFocus(tree, event.target, 'last');
+          break;
+        case "Home":
+          TreeView.moveFocus(tree, event.target, 'first');
+          break;
+        case "Enter":
+        case " ":
+          event.target.click();
+          break;
+        default:
+          if (isIndexLetter(event.key)) {
+            if (TreeView.setFocusByFirstCharacter(tree, event.target, event.key, event.shiftKey)) {
+              break;
+            }
+          }
+          return;
+      }
+      event.preventDefault();
+    };
+    this.itemClick = (event, ancestors, item) => {
+      if (!(event.target instanceof HTMLElement)) {
+        return;
+      }
+      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;
+      }
+      if (item.open) {
+        this.closeItem.emit([...ancestors, item]);
+      }
+      else {
+        this.openItem.emit([...ancestors, item]);
+      }
+    };
+  }
+  static setFocus(tree, target) {
+    if (target) {
+      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);
+    let index = 0;
+    switch (moveTo) {
+      case 'first':
+        index = 0;
+        break;
+      case 'previous':
+        index = focusableItems.indexOf(el) - 1;
+        break;
+      case 'next':
+        index = focusableItems.indexOf(el) + 1;
+        break;
+      case 'last':
+        index = focusableItems.length - 1;
+        break;
+    }
+    TreeView.setFocus(tree, focusableItems[index]);
+  }
+  static expandItemOrFocusChild(tree, target) {
+    var _a;
+    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;
+      if (controlElement instanceof HTMLElement) {
+        controlElement.click();
+      }
+    }
+  }
+  static collapseItemOrFocusParent(tree, target) {
+    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 = (_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);
+      }
+    }
+  }
+  static setFocusByFirstCharacter(tree, el, char, backwards) {
+    const focusableItems = Array.from(tree.querySelectorAll('p'))
+      .filter(item => item.offsetWidth > 0 && item.offsetHeight > 0);
+    if (backwards) {
+      focusableItems.reverse();
+    }
+    const current = focusableItems.indexOf(el);
+    char = char.toLowerCase();
+    let nextItem = focusableItems.find((item, index) => { var _a; return index > current && ((_a = item.textContent) === null || _a === void 0 ? void 0 : _a.toLowerCase().startsWith(char)); });
+    if (!nextItem) {
+      nextItem = focusableItems.find((item, index) => { var _a; return index < current && ((_a = item.textContent) === null || _a === void 0 ? void 0 : _a.toLowerCase().startsWith(char)); });
+    }
+    if (nextItem) {
+      TreeView.setFocus(tree, nextItem);
+      return true;
+    }
+    return false;
+  }
+  render() {
+    var _a;
+    return (h("div", { id: "tree", class: "dso-tree", onKeyDown: (e) => this.keyDownListener(e) },
+      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<string>[]",
+        "resolved": "TreeViewItem<string>[]",
+        "references": {
+          "TreeViewItem": {
+            "location": "import",
+            "path": "./tree-view.interfaces"
+          }
+        }
+      },
+      "required": true,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "The collection of TreeViewItems"
+      }
+    }
+  }; }
+  static get events() { return [{
+      "method": "openItem",
+      "name": "openItem",
+      "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<string>[]",
+        "resolved": "TreeViewItem<string>[]",
+        "references": {
+          "TreeViewItem": {
+            "location": "import",
+            "path": "./tree-view.interfaces"
+          }
+        }
+      }
+    }, {
+      "method": "closeItem",
+      "name": "closeItem",
+      "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<string>[]",
+        "resolved": "TreeViewItem<string>[]",
+        "references": {
+          "TreeViewItem": {
+            "location": "import",
+            "path": "./tree-view.interfaces"
+          }
+        }
+      }
+    }, {
+      "method": "clickItem",
+      "name": "clickItem",
+      "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 the complete path of TreeViewItems from the\nroot to the item that is emitting the clicked event."
+      },
+      "complexType": {
+        "original": "TreeViewItem<string>[]",
+        "resolved": "TreeViewItem<string>[]",
+        "references": {
+          "TreeViewItem": {
+            "location": "import",
+            "path": "./tree-view.interfaces"
+          }
+        }
+      }
+    }]; }
+}

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

@@ -0,0 +1,11 @@
+import { html } from 'lit-html';
+export function treeViewTemplate({ collection, onOpenItem, onCloseItem, onClickItem }) {
+  return html `
+    <dso-tree-view
+      .collection=${collection}
+      @openItem=${onOpenItem}
+      @closeItem=${onCloseItem}
+      @clickItem=${onClickItem}
+    ></dso-tree-view>
+  `;
+}

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

@@ -116,12 +116,24 @@ export const DsoSelectable: {
   new (): DsoSelectable;
 };
 
+interface DsoToggletip extends Components.DsoToggletip, HTMLElement {}
+export const DsoToggletip: {
+  prototype: DsoToggletip;
+  new (): DsoToggletip;
+};
+
 interface DsoTooltip extends Components.DsoTooltip, HTMLElement {}
 export const DsoTooltip: {
   prototype: DsoTooltip;
   new (): DsoTooltip;
 };
 
+interface DsoTreeView extends Components.DsoTreeView, HTMLElement {}
+export const DsoTreeView: {
+  prototype: DsoTreeView;
+  new (): DsoTreeView;
+};
+
 /**
  * Utility to define all custom elements within this package using the tag name provided in the component's source. 
  * When defining each custom element, it will also check it's safe to define by: