@dso-toolkit/core 30.0.0 → 31.1.1

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

@@ -1,6 +1,7 @@
-import { html } from 'lit-html';
+import { html, nothing } from 'lit-html';
 import { ifDefined } from 'lit-html/directives/if-defined';
-export function labelTemplate({ status, label, button, compact }) {
+import { unsafeHTML } from 'lit-html/directives/unsafe-html';
+export function labelTemplate({ status, label, button, compact, symbol }) {
   return html `
     <dso-label
       status=${ifDefined(status)}
@@ -8,6 +9,13 @@ export function labelTemplate({ status, label, button, compact }) {
       ?compact=${compact}
       ?removable=${button}
     >
+      ${symbol
+    ? html `
+          <span slot="symbol">
+            ${unsafeHTML(symbol)}
+          </span>
+        `
+    : nothing}
       ${label}
     </dso-label>
   `;

package/dist/collection/components/ozon-content/ozon-content.transformer.js

@@ -1,20 +1,33 @@
 import isURL from 'validator/es/lib/isURL';
 function transformDescriptionNote(body) {
-  body.querySelectorAll('a.noot > div.noot_popup').forEach((e, index) => {
-    const contentElement = e.querySelector('.od-Al');
-    const ozonPopupElement = contentElement === null || contentElement === void 0 ? void 0 : contentElement.parentElement;
-    const anchorElement = ozonPopupElement === null || ozonPopupElement === void 0 ? void 0 : ozonPopupElement.parentElement;
+  body.querySelectorAll('div.noot').forEach((nootElement, index) => {
+    const contentElement = nootElement.nextElementSibling;
+    if (!(contentElement instanceof HTMLDivElement && contentElement.classList.value === 'noot_popup')) {
+      return;
+    }
+    const nootAnchorElement = nootElement.querySelector('a');
+    if (!(nootAnchorElement instanceof HTMLAnchorElement)) {
+      return;
+    }
+    const contentAlElement = contentElement.querySelector(':scope > .od-Al');
+    if (!(contentAlElement instanceof HTMLDivElement && contentAlElement.classList.value === 'od-Al')) {
+      return;
+    }
+    nootElement.replaceWith(...Array.from(nootElement.childNodes));
+    const contentWrapper = document.createElement('div');
+    contentWrapper.replaceChildren(...Array.from(contentAlElement.childNodes));
+    contentAlElement.replaceChildren(contentWrapper);
+    contentElement.replaceWith(contentAlElement);
     const supElement = document.createElement('sup');
-    supElement.replaceChildren(...Array.from(anchorElement.childNodes));
-    anchorElement === null || anchorElement === void 0 ? void 0 : anchorElement.replaceChildren(supElement);
-    anchorElement === null || anchorElement === void 0 ? void 0 : anchorElement.after(contentElement);
-    ozonPopupElement === null || ozonPopupElement === void 0 ? void 0 : ozonPopupElement.remove();
+    supElement.replaceChildren(...Array.from(nootAnchorElement.childNodes));
+    nootAnchorElement.replaceChildren(supElement);
     const id = (index + 1).toString(10);
     const [termId, contentId] = [`dso-ozon-term-${id}`, `dso-ozon-content-${id}`];
-    anchorElement === null || anchorElement === void 0 ? void 0 : anchorElement.setAttribute('id', termId);
-    anchorElement === null || anchorElement === void 0 ? void 0 : anchorElement.setAttribute('aria-controls', contentId);
-    anchorElement === null || anchorElement === void 0 ? void 0 : anchorElement.setAttribute('aria-expanded', 'false');
-    contentElement === null || contentElement === void 0 ? void 0 : contentElement.setAttribute('id', contentId);
+    nootAnchorElement.setAttribute('href', `#${termId}`);
+    nootAnchorElement.setAttribute('id', termId);
+    nootAnchorElement.setAttribute('aria-controls', contentId);
+    nootAnchorElement.setAttribute('aria-expanded', 'false');
+    contentAlElement === null || contentAlElement === void 0 ? void 0 : contentAlElement.setAttribute('id', contentId);
   });
   return body;
 }
@@ -84,7 +97,7 @@ export class OzonContentTransformer {
       return false;
     }
     // require_tld: false is needed to allow http://localhost
-    return (_a = composedPath.slice(0, containerIndex)) === null || _a === void 0 ? void 0 : _a.some(e => { var _a; return e instanceof HTMLAnchorElement && isURL((_a = e.getAttribute('href')) !== null && _a !== void 0 ? _a : '', { require_tld: false }); });
+    return (_a = composedPath.slice(0, containerIndex)) === null || _a === void 0 ? void 0 : _a.some(e => { var _a; return e instanceof HTMLAnchorElement && isURL((_a = e.getAttribute('href')) !== null && _a !== void 0 ? _a : '', { require_tld: false, require_protocol: true }); });
   }
   isHostElement(value) {
     return value instanceof HTMLElement && value.tagName === 'DSO-OZON-CONTENT';

package/dist/collection/components/toggletip/toggletip.css

@@ -0,0 +1,8 @@
+/* stylelint-disable value-keyword-case */
+/* stylelint-disable string-no-newline */
+/* stylelint-enable */
+*,
+*::after,
+*::before {
+  box-sizing: border-box;
+}

package/dist/collection/components/toggletip/toggletip.js

@@ -0,0 +1,137 @@
+import { h, Component, Fragment, Element, Prop, State } from "@stencil/core";
+export class Toggletip {
+  constructor() {
+    this.active = false;
+    this.label = "Toelichting";
+    this.position = "right";
+    this.click = () => {
+      this.active ? this.close() : this.open();
+    };
+    this.open = () => {
+      this.active = true;
+      this.host.addEventListener("keydown", this.keyDownListener);
+      this.host.addEventListener("focusout", this.focusOutListener);
+    };
+    this.close = () => {
+      this.host.removeEventListener("focusout", this.focusOutListener);
+      this.host.removeEventListener("keydown", this.keyDownListener);
+      this.active = false;
+    };
+    this.focusOutListener = (event) => {
+      if (!this.host.contains(event.relatedTarget)) {
+        this.close();
+      }
+    };
+    this.keyDownListener = (event) => {
+      if (!event.defaultPrevented && event.key == "Escape") {
+        this.close();
+        this.button.focus();
+        event.preventDefault();
+      }
+      return;
+    };
+  }
+  componentDidRender() {
+    var _a, _b, _c;
+    const infoButton = (_a = this.host.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector("dso-info-button");
+    if (!infoButton) {
+      throw Error("dso-info-button not found");
+    }
+    this.infoButton = infoButton;
+    const button = (_c = (_b = this.infoButton) === null || _b === void 0 ? void 0 : _b.shadowRoot) === null || _c === void 0 ? void 0 : _c.querySelector("button");
+    if (!button) {
+      throw Error("button not found");
+    }
+    this.button = button;
+  }
+  render() {
+    return (h(Fragment, null,
+      h("dso-info-button", { id: "toggle", onClick: this.click, label: this.label, active: this.active, secondary: this.secondary }),
+      h("dso-tooltip", { stateless: true, for: "toggle", active: this.active, position: this.position, small: this.small },
+        h("slot", null))));
+  }
+  static get is() { return "dso-toggletip"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() { return {
+    "$": ["toggletip.scss"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["toggletip.css"]
+  }; }
+  static get properties() { return {
+    "label": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "label",
+      "reflect": false,
+      "defaultValue": "\"Toelichting\""
+    },
+    "position": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "\"top\" | \"right\" | \"bottom\" | \"left\"",
+        "resolved": "\"bottom\" | \"left\" | \"right\" | \"top\"",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "position",
+      "reflect": false,
+      "defaultValue": "\"right\""
+    },
+    "small": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean | undefined",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "small",
+      "reflect": false
+    },
+    "secondary": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean | undefined",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "secondary",
+      "reflect": false
+    }
+  }; }
+  static get states() { return {
+    "active": {}
+  }; }
+  static get elementRef() { return "host"; }
+}

package/dist/collection/components/toggletip/toggletip.template.js

@@ -0,0 +1,12 @@
+import { html } from "lit-html";
+import { ifDefined } from "lit-html/directives/if-defined";
+import { unsafeHTML } from "lit-html/directives/unsafe-html";
+export function toggletipTemplate({ children, label, position, small, secondary, }) {
+  return html `<dso-toggletip
+    label=${ifDefined(label)}
+    position=${ifDefined(position)}
+    ?small=${small}
+    ?secondary=${secondary}
+    >${unsafeHTML(children)}</dso-toggletip
+  >`;
+}

package/dist/collection/components/tooltip/tooltip.css

@@ -2,7 +2,7 @@
 /* stylelint-disable string-no-newline */
 /* stylelint-enable */
 :host(:not([hidden])) {
-  display: block;
+  display: inline-block;
 }
 
 *,

package/dist/collection/components/tooltip/tooltip.js

@@ -40,8 +40,25 @@ export class Tooltip {
     });
   }
   watchActive() {
+    var _a;
     if (this.active) {
       this.hidden = false;
+      if (!this.stateless) {
+        setTimeout(() => {
+          var _a;
+          (_a = this.popper) === null || _a === void 0 ? void 0 : _a.setOptions({
+            modifiers: [{ name: 'eventListeners', enabled: true }]
+          });
+        });
+      }
+    }
+    else {
+      if (!this.stateless) {
+        (_a = this.popper) === null || _a === void 0 ? void 0 : _a.setOptions({
+          modifiers: [{ name: 'eventListeners', enabled: false }]
+        });
+      }
+      setTimeout(() => (this.hidden = true), transitionDuration);
     }
   }
   listenClick(e) {
@@ -61,34 +78,20 @@ export class Tooltip {
       placement: this.position
     });
     this.callbacks = {
-      activate: () => {
-        this.hidden = false;
-        setTimeout(() => {
-          var _a;
-          this.active = true;
-          (_a = this.popper) === null || _a === void 0 ? void 0 : _a.setOptions({
-            modifiers: [{ name: 'eventListeners', enabled: true }]
-          });
-        });
-      },
-      deactivate: () => {
-        var _a;
-        this.active = false;
-        (_a = this.popper) === null || _a === void 0 ? void 0 : _a.setOptions({
-          modifiers: [{ name: 'eventListeners', enabled: false }]
-        });
-        setTimeout(() => this.hidden = true, transitionDuration);
-      }
+      activate: () => (this.active = true),
+      deactivate: () => (this.active = false)
     };
-    this.target.addEventListener('mouseenter', this.callbacks.activate);
-    this.target.addEventListener('mouseleave', this.callbacks.deactivate);
-    this.target.addEventListener('focus', this.callbacks.activate);
-    this.target.addEventListener('blur', this.callbacks.deactivate);
+    if (!this.stateless) {
+      this.target.addEventListener('mouseenter', this.callbacks.activate);
+      this.target.addEventListener('mouseleave', this.callbacks.deactivate);
+      this.target.addEventListener('focus', this.callbacks.activate);
+      this.target.addEventListener('blur', this.callbacks.deactivate);
+    }
   }
   disconnectedCallback() {
     var _a;
     (_a = this.popper) === null || _a === void 0 ? void 0 : _a.destroy();
-    if (this.target && this.callbacks) {
+    if (!this.stateless && this.target && this.callbacks) {
       this.target.removeEventListener('mouseenter', this.callbacks.activate);
       this.target.removeEventListener('mouseleave', this.callbacks.deactivate);
       this.target.removeEventListener('focus', this.callbacks.activate);
@@ -106,7 +109,7 @@ export class Tooltip {
   render() {
     return (h(Host, { hidden: this.hidden },
       h("div", { class: clsx('tooltip', { in: this.active }), role: "tooltip" },
-        !this.noArrow && (h("div", { class: "tooltip-arrow" })),
+        !this.noArrow && h("div", { class: "tooltip-arrow" }),
         h("div", { class: clsx('tooltip-inner', { 'dso-small': this.small }) },
           h("slot", null)))));
   }
@@ -115,7 +118,11 @@ export class Tooltip {
       return this.for;
     }
     if (typeof this.for === 'string') {
-      const reference = document.getElementById(this.for);
+      const rootNode = this.element.getRootNode();
+      if (!(rootNode instanceof Document || rootNode instanceof ShadowRoot)) {
+        throw new Error(`rootNode is not instance of Document or ShadowRoot`);
+      }
+      const reference = rootNode.getElementById(this.for);
       if (!reference) {
         throw new Error(`Unable to find reference with id ${this.for}`);
       }
@@ -193,6 +200,23 @@ export class Tooltip {
       "reflect": false,
       "defaultValue": "false"
     },
+    "stateless": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean | undefined",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": "Deactivates mouseover behaviour"
+      },
+      "attribute": "stateless",
+      "reflect": false
+    },
     "small": {
       "type": "boolean",
       "mutable": false,

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

@@ -0,0 +1,20 @@
+import { h, Fragment } from '@stencil/core';
+import clsx from 'clsx';
+export const DsoTreeItem = ({ owner, ancestors, item, index, level, setSize }) => {
+  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, 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, 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." })
+        : 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.css

@@ -0,0 +1,43 @@
+/* stylelint-disable value-keyword-case */
+/* stylelint-disable string-no-newline */
+/* stylelint-enable */
+:host ul {
+  list-style-type: none;
+}
+:host ul[role=tree] {
+  padding-left: 0;
+}
+:host li[role=treeitem] > ul {
+  padding-left: 1.5em;
+}
+:host .tree-branch-control {
+  cursor: pointer;
+  display: inline-block;
+}
+:host .tree-content {
+  cursor: pointer;
+  display: inline-block;
+  margin: 8px 0;
+}
+:host .tree-content a, :host .tree-content a:visited {
+  color: #39870c;
+  text-decoration: none;
+}
+:host .tree-content a:hover, :host .tree-content a:focus {
+  color: #676cb0;
+  text-decoration: underline;
+}
+:host .tree-content a:active {
+  text-decoration: none;
+}
+:host .tree-content dso-icon {
+  vertical-align: text-bottom;
+  font-size: 0.75em;
+  margin-left: 0.5em;
+}
+
+*,
+*::after,
+*::before {
+  box-sizing: border-box;
+}

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

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

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"
+          }
+        }
+      }
+    }]; }
+}