@dso-toolkit/core 62.17.0 → 62.19.0

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

@@ -1,323 +1,324 @@
 import { h } 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;
+    constructor() {
+        this.keyDownListener = (event) => {
+            if (event.defaultPrevented) {
+                return;
             }
-          }
-          return;
-      }
-      event.preventDefault();
-    };
-    // eslint-disable-next-line @stencil-community/own-props-must-be-private -- Omdat this als TreeView instance aan Functionele Components wordt gegeven
-    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((eventTarget) => (eventTarget instanceof HTMLElement ? eventTarget.className === "dso-tree" : false));
-        if (!(contentElement instanceof HTMLParagraphElement) || !(tree instanceof HTMLElement)) {
-          return;
-        }
-        TreeView.setFocus(tree, contentElement);
-        this.dsoClickItem.emit({ path: [...ancestors, item], originalEvent: event });
-        return;
-      }
-      if (item.open) {
-        this.dsoCloseItem.emit([...ancestors, item]);
-      }
-      else {
-        this.dsoOpenItem.emit([...ancestors, item]);
-      }
-    };
-    this.collection = undefined;
-  }
-  /**
-   * Set focus on the last item in the specified path.
-   * The consumer is responsible for providing a TreeView collection where the last item is visible.
-   * @async
-   * @returns Whether the item was found.
-   */
-  async focusItem(path) {
-    var _a;
-    const tree = this.tree;
-    if (!tree || path.length === 0) {
-      return false;
-    }
-    const itemToFocus = path[path.length - 1];
-    if (!itemToFocus) {
-      throw new Error("No itemToFocus found");
-    }
-    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;
-    }
-    TreeView.setFocus(tree, elementToFocus);
-    return true;
-  }
-  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;
-    }
-    const focusableItem = focusableItems[index];
-    if (!focusableItem) {
-      throw new Error("No focusableItem found");
-    }
-    TreeView.setFocus(tree, focusableItem);
-  }
-  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);
-      }
+            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();
+        };
+        // eslint-disable-next-line @stencil-community/own-props-must-be-private -- Omdat this als TreeView instance aan Functionele Components wordt gegeven
+        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((eventTarget) => (eventTarget instanceof HTMLElement ? eventTarget.className === "dso-tree" : false));
+                if (!(contentElement instanceof HTMLParagraphElement) || !(tree instanceof HTMLElement)) {
+                    return;
+                }
+                TreeView.setFocus(tree, contentElement);
+                this.dsoClickItem.emit({ path: [...ancestors, item], originalEvent: event });
+                return;
+            }
+            if (item.open) {
+                this.dsoCloseItem.emit([...ancestors, item]);
+            }
+            else {
+                this.dsoOpenItem.emit([...ancestors, item]);
+            }
+        };
+        this.collection = undefined;
     }
-  }
-  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();
+    /**
+     * Set focus on the last item in the specified path.
+     * The consumer is responsible for providing a TreeView collection where the last item is visible.
+     * @async
+     * @returns Whether the item was found.
+     */
+    async focusItem(path) {
+        var _a;
+        const tree = this.tree;
+        if (!tree || path.length === 0) {
+            return false;
+        }
+        const itemToFocus = path[path.length - 1];
+        if (!itemToFocus) {
+            throw new Error("No itemToFocus found");
+        }
+        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;
+        }
+        TreeView.setFocus(tree, elementToFocus);
+        return true;
     }
-    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)); });
+    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();
+        }
     }
-    if (nextItem) {
-      TreeView.setFocus(tree, nextItem);
-      return true;
+    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;
+        }
+        const focusableItem = focusableItems[index];
+        if (!focusableItem) {
+            throw new Error("No focusableItem found");
+        }
+        TreeView.setFocus(tree, focusableItem);
     }
-    return false;
-  }
-  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 }))))));
-  }
-  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",
-              "id": "src/components/tree-view/tree-view.interfaces.ts::TreeViewItem"
-            }
-          }
-        },
-        "required": true,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "The collection of TreeViewItems"
+    static expandItemOrFocusChild(tree, target) {
+        var _a;
+        if ((target === null || target === void 0 ? void 0 : target.getAttribute("aria-expanded")) === "true") {
+            TreeView.moveFocus(tree, target, "next");
         }
-      }
-    };
-  }
-  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",
-              "id": "src/components/tree-view/tree-view.interfaces.ts::TreeViewItem"
+        else {
+            const controlElement = (_a = target.previousElementSibling) === null || _a === void 0 ? void 0 : _a.firstElementChild;
+            if (controlElement instanceof HTMLElement) {
+                controlElement.click();
             }
-          }
         }
-      }, {
-        "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",
-              "id": "src/components/tree-view/tree-view.interfaces.ts::TreeViewItem"
+    }
+    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();
             }
-          }
         }
-      }, {
-        "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",
-              "id": "src/components/tree-view/tree-view.interfaces.ts::TreeViewPointerEvent"
+        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 get methods() {
-    return {
-      "focusItem": {
-        "complexType": {
-          "signature": "(path: TreeViewItem[]) => Promise<boolean>",
-          "parameters": [{
-              "tags": [],
-              "text": ""
-            }],
-          "references": {
-            "Promise": {
-              "location": "global",
-              "id": "global::Promise"
-            },
-            "TreeViewItem": {
-              "location": "import",
-              "path": "./tree-view.interfaces",
-              "id": "src/components/tree-view/tree-view.interfaces.ts::TreeViewItem"
-            },
-            "HTMLElement": {
-              "location": "global",
-              "id": "global::HTMLElement"
+    }
+    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", { key: '70e0202b912586b27ee6d7992c0a1d34f738c9e2', id: "tree", class: "dso-tree", onKeyDown: (e) => this.keyDownListener(e), ref: (element) => (this.tree = element) }, h("ul", { key: '8856cbd2e9f3ffe4cac3ee2c6b97ddca8a44ead6', 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",
+                            "id": "src/components/tree-view/tree-view.interfaces.ts::TreeViewItem"
+                        }
+                    }
+                },
+                "required": true,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The collection of TreeViewItems"
+                }
             }
-          },
-          "return": "Promise<boolean>"
-        },
-        "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
+        };
+    }
+    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",
+                            "id": "src/components/tree-view/tree-view.interfaces.ts::TreeViewItem"
+                        }
+                    }
+                }
             }, {
-              "name": "returns",
-              "text": "Whether the item was found."
-            }]
-        }
-      }
-    };
-  }
+                "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",
+                            "id": "src/components/tree-view/tree-view.interfaces.ts::TreeViewItem"
+                        }
+                    }
+                }
+            }, {
+                "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",
+                            "id": "src/components/tree-view/tree-view.interfaces.ts::TreeViewPointerEvent"
+                        }
+                    }
+                }
+            }];
+    }
+    static get methods() {
+        return {
+            "focusItem": {
+                "complexType": {
+                    "signature": "(path: TreeViewItem[]) => Promise<boolean>",
+                    "parameters": [{
+                            "name": "path",
+                            "type": "TreeViewItem[]",
+                            "docs": ""
+                        }],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        },
+                        "TreeViewItem": {
+                            "location": "import",
+                            "path": "./tree-view.interfaces",
+                            "id": "src/components/tree-view/tree-view.interfaces.ts::TreeViewItem"
+                        },
+                        "HTMLElement": {
+                            "location": "global",
+                            "id": "global::HTMLElement"
+                        }
+                    },
+                    "return": "Promise<boolean>"
+                },
+                "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."
+                        }]
+                }
+            }
+        };
+    }
 }
 //# sourceMappingURL=tree-view.js.map