@dso-toolkit/core 31.1.1 → 33.0.0

package/dist/collection/components/helpcenter-panel/helpcenter-panel.css

@@ -0,0 +1,312 @@
+/* stylelint-disable value-keyword-case */
+/* stylelint-disable string-no-newline */
+/* stylelint-enable */
+:host {
+  display: block;
+  --di-times: url("data:image/svg+xml,%3csvg id='times' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' style='color: %2339870c%3b'%3e %3cpath fill='currentColor' d='M13.36%2c12l3.3-3.3A1%2c1%2c0%2c1%2c0%2c15.3%2c7.34L12%2c10.64%2c8.7%2c7.34A1%2c1%2c0%2c1%2c0%2c7.34%2c8.7l3.3%2c3.3-3.3%2c3.3A1%2c1%2c0%2c1%2c0%2c8.7%2c16.66l3.3-3.3%2c3.3%2c3.3a1%2c1%2c0%2c1%2c0%2c1.36-1.36Z'/%3e %3c/svg%3e");
+  --di-times-wit: url("data:image/svg+xml,%3csvg id='times' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' style='color: white%3b'%3e %3cpath fill='currentColor' d='M13.36%2c12l3.3-3.3A1%2c1%2c0%2c1%2c0%2c15.3%2c7.34L12%2c10.64%2c8.7%2c7.34A1%2c1%2c0%2c1%2c0%2c7.34%2c8.7l3.3%2c3.3-3.3%2c3.3A1%2c1%2c0%2c1%2c0%2c8.7%2c16.66l3.3-3.3%2c3.3%2c3.3a1%2c1%2c0%2c1%2c0%2c1.36-1.36Z'/%3e %3c/svg%3e");
+}
+
+.sr-only {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  border: 0;
+}
+
+.wrapper {
+  height: 100%;
+  left: 0;
+  position: fixed;
+  top: 0;
+  visibility: hidden;
+  width: 100%;
+}
+.wrapper.visible {
+  visibility: visible;
+}
+
+.dimscreen {
+  background-color: #000;
+  height: 100%;
+  opacity: 0.4;
+  width: 100%;
+}
+
+.open-button {
+  display: inline-block;
+  font-size: 1em;
+  font-weight: 500;
+  margin-bottom: 0;
+  text-decoration: none;
+  touch-action: manipulation;
+  text-align: left;
+  user-select: none;
+  vertical-align: middle;
+  display: inline-block;
+  font-size: 1em;
+  font-weight: 500;
+  margin-bottom: 0;
+  text-decoration: none;
+  touch-action: manipulation;
+  text-align: left;
+  user-select: none;
+  vertical-align: middle;
+  background-color: #39870c;
+  border-color: #39870c;
+  color: #fff;
+  border-width: 1px;
+  border-style: solid;
+  border-radius: 4px;
+  line-height: 1.5;
+  min-width: 56px;
+  padding: 11px 15px;
+  border: 0;
+  bottom: 16px;
+  font-family: Asap, sans-serif;
+  position: fixed;
+  right: 16px;
+}
+.open-button:focus, .open-button:focus-visible {
+  outline-offset: 2px;
+}
+.open-button:active {
+  outline: 0;
+}
+.open-button.extern::after, .open-button.download::after {
+  content: "";
+  display: inline-block;
+  height: 1.5em;
+  margin-left: 8px;
+  vertical-align: top;
+  width: 1.5em;
+}
+.open-button:focus, .open-button:focus-visible {
+  outline-offset: 2px;
+}
+.open-button:active {
+  outline: 0;
+}
+.open-button.extern::after, .open-button.download::after {
+  content: "";
+  display: inline-block;
+  height: 1.5em;
+  margin-left: 8px;
+  vertical-align: top;
+  width: 1.5em;
+}
+.open-button:hover {
+  background-color: #275937;
+  border-color: #275937;
+  color: #fff;
+}
+.open-button:active {
+  background-color: #15301e;
+  border-color: #15301e;
+  color: #fff;
+}
+.open-button[disabled], .open-button[disabled]:hover {
+  background-color: #afcf9d;
+  border-color: #afcf9d;
+  color: #fff;
+}
+.open-button.btn-sm {
+  line-height: 16px;
+}
+.open-button.btn-sm dso-icon,
+.open-button.btn-sm svg.di, .open-button.btn-sm.extern::after, .open-button.btn-sm.download::after {
+  margin-bottom: -4px;
+  margin-top: -4px;
+}
+.open-button.download::after {
+  background: var(--dso-icon, var(--di-download-wit)) no-repeat;
+  background-position: center;
+  background-size: cover;
+  height: 1.5em;
+  vertical-align: top;
+  width: 1.5em;
+}
+.open-button.extern::after {
+  background: var(--dso-icon, var(--di-external-link-wit)) no-repeat;
+  background-position: center;
+  background-size: cover;
+  height: 1.5em;
+  vertical-align: top;
+  width: 1.5em;
+}
+.open-button dso-icon,
+.open-button svg.di {
+  margin-left: -8px;
+  margin-right: 8px;
+}
+.open-button span + dso-icon,
+.open-button span + svg.di {
+  margin-left: 8px;
+  margin-right: -8px;
+}
+.open-button:hover {
+  cursor: pointer;
+}
+.open-button.open {
+  display: none;
+}
+
+.close-button {
+  display: inline-block;
+  font-size: 1em;
+  font-weight: 500;
+  margin-bottom: 0;
+  text-decoration: none;
+  touch-action: manipulation;
+  text-align: left;
+  user-select: none;
+  vertical-align: middle;
+  background-color: #fff;
+  border-color: #39870c;
+  color: #39870c;
+  border-width: 1px;
+  border-style: solid;
+  border-radius: 4px;
+  line-height: 1.5;
+  min-width: 56px;
+  padding: 11px 15px;
+  border-right: 0;
+  border-top: 0;
+  border-radius: 0 0 0 8px;
+  height: 40px;
+  min-width: 40px;
+  padding: 0;
+  position: fixed;
+  right: 0;
+  width: 40px;
+  top: 0;
+}
+.close-button:focus, .close-button:focus-visible {
+  outline-offset: 2px;
+}
+.close-button:active {
+  outline: 0;
+}
+.close-button.extern::after, .close-button.download::after {
+  content: "";
+  display: inline-block;
+  height: 1.5em;
+  margin-left: 8px;
+  vertical-align: top;
+  width: 1.5em;
+}
+.close-button:hover {
+  background-color: #39870c;
+  border-color: #39870c;
+  color: #fff;
+}
+.close-button:active {
+  background-color: #275937;
+  border-color: #275937;
+  color: #fff;
+}
+.close-button[disabled], .close-button[disabled]:hover {
+  background-color: #fff;
+  border-color: #afcf9d;
+  color: #afcf9d;
+}
+.close-button.btn-sm {
+  line-height: 16px;
+}
+.close-button.btn-sm dso-icon,
+.close-button.btn-sm svg.di, .close-button.btn-sm.extern::after, .close-button.btn-sm.download::after {
+  margin-bottom: -4px;
+  margin-top: -4px;
+}
+.close-button.download::after {
+  background: var(--dso-icon, var(--di-download)) no-repeat;
+  background-position: center;
+  background-size: cover;
+  height: 1.5em;
+  vertical-align: top;
+  width: 1.5em;
+}
+.close-button.download:hover::after {
+  --dso-icon: var(--di-download-wit);
+}
+.close-button.download[disabled]::after {
+  --dso-icon: var(--di-download-grasgroen-40);
+}
+.close-button.extern::after {
+  background: var(--dso-icon, var(--di-external-link)) no-repeat;
+  background-position: center;
+  background-size: cover;
+  height: 1.5em;
+  vertical-align: top;
+  width: 1.5em;
+}
+.close-button.extern:hover::after {
+  --dso-icon: var(--di-external-link-wit);
+}
+.close-button.extern[disabled]::after {
+  --dso-icon: var(--di-external-link-grasgroen-40);
+}
+.close-button dso-icon,
+.close-button svg.di {
+  margin-left: -8px;
+  margin-right: 8px;
+}
+.close-button span + dso-icon,
+.close-button span + svg.di {
+  margin-left: 8px;
+  margin-right: -8px;
+}
+.close-button::before {
+  background: var(--dso-icon, var(--di-times)) no-repeat;
+  background-position: center;
+  background-size: cover;
+  height: 1.5em;
+  vertical-align: top;
+  width: 1.5em;
+  content: "";
+  display: inline-block;
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  transform: translate(-50%, -50%);
+}
+.close-button:hover, .close-button:active, .close-button:focus {
+  cursor: pointer;
+}
+.close-button:hover::before, .close-button:active::before, .close-button:focus::before {
+  background: var(--dso-icon, var(--di-times-wit)) no-repeat;
+  background-position: center;
+  background-size: cover;
+  height: 1.5em;
+  vertical-align: top;
+  width: 1.5em;
+}
+.close-button.close {
+  display: none;
+}
+
+.iframe-container {
+  background-color: #fff;
+  border: 0;
+  border-left: 1px solid #ccc;
+  box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.4);
+  height: 100%;
+  position: absolute;
+  right: -640px;
+  top: 0;
+  transition: right 0.5s;
+  width: 640px;
+}
+.iframe-container.open {
+  right: 0;
+}
+
+iframe {
+  border: 0;
+  height: 100%;
+  width: 100%;
+}

package/dist/collection/components/helpcenter-panel/helpcenter-panel.js

@@ -0,0 +1,92 @@
+import { h, Component, Fragment, Prop, State } from "@stencil/core";
+const maxCssTransitionMilliseconds = 500;
+export class HelpcenterPanel {
+  constructor() {
+    this.label = "Hulp nodig";
+    this.visibility = "hidden";
+    this.isOpen = "close";
+    this.slideState = "close";
+    this.loadIframe = false;
+    this.openClick = () => {
+      this.visibility = "visible";
+      this.slideState = "open";
+      setTimeout(() => {
+        this.isOpen = "open";
+      });
+      if (!this.loadIframe) {
+        setTimeout(() => {
+          this.loadIframe = true;
+        }, maxCssTransitionMilliseconds);
+      }
+    };
+    this.closeClick = () => {
+      this.isOpen = "close";
+      this.slideState = "close";
+      setTimeout(() => {
+        this.visibility = "hidden";
+      }, maxCssTransitionMilliseconds);
+    };
+  }
+  render() {
+    return (h(Fragment, null,
+      h("button", { type: "button", onClick: this.openClick, class: `open-button ${this.isOpen}` },
+        h("dso-icon", { icon: "help" }),
+        h("span", null, this.label)),
+      h("div", { class: `wrapper ${this.visibility}` },
+        h("div", { class: "dimscreen" }),
+        h("div", { class: `iframe-container ${this.slideState}` }, this.loadIframe ? h("iframe", { src: this.url }) : h("div", null)),
+        h("button", { type: "button", class: `close-button ${this.isOpen}`, onClick: this.closeClick },
+          h("span", { class: "sr-only" }, "sluiten")))));
+  }
+  static get is() { return "dso-helpcenter-panel"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() { return {
+    "$": ["helpcenter-panel.scss"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["helpcenter-panel.css"]
+  }; }
+  static get properties() { return {
+    "label": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string | undefined",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "label",
+      "reflect": false,
+      "defaultValue": "\"Hulp nodig\""
+    },
+    "url": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": true,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "url",
+      "reflect": false
+    }
+  }; }
+  static get states() { return {
+    "visibility": {},
+    "isOpen": {},
+    "slideState": {},
+    "loadIframe": {}
+  }; }
+}

package/dist/collection/components/helpcenter-panel/helpcenter-panel.template.js

@@ -0,0 +1,13 @@
+import { html } from "lit-html";
+import { ifDefined } from "lit-html/directives/if-defined";
+import { unsafeHTML } from "lit-html/directives/unsafe-html";
+export function helpcenterPanelTemplate({ label, url, content, }) {
+  return html `
+    ${unsafeHTML(content)}
+    <dso-helpcenter-panel
+      label=${ifDefined(label)}
+      url=${url}
+    ></dso-helpcenter-panel>
+    ${unsafeHTML(content)}
+  `;
+}

package/dist/collection/components/highlight-box/highlight-box.css

@@ -28,7 +28,7 @@
 }
 
 .dso-highlight-box {
-  background-color: #e5e5e5;
+  background-color: #f2f2f2;
   margin-top: 16px;
   padding: 16px;
   margin-bottom: 16px;

package/dist/collection/components/icon/icon.js

@@ -8,8 +8,10 @@ import balloon from '@dso-toolkit/sources/src/icons/balloon.svg';
 import bars from '@dso-toolkit/sources/src/icons/bars.svg';
 import buildings from '@dso-toolkit/sources/src/icons/buildings.svg';
 import calendar from '@dso-toolkit/sources/src/icons/calendar.svg';
+import call from '@dso-toolkit/sources/src/icons/call.svg';
 import caretDown from '@dso-toolkit/sources/src/icons/caret-down.svg';
 import check from '@dso-toolkit/sources/src/icons/check.svg';
+import checkCircle from '@dso-toolkit/sources/src/icons/check-circle.svg';
 import chevronDown from '@dso-toolkit/sources/src/icons/chevron-down.svg';
 import chevronLeft from '@dso-toolkit/sources/src/icons/chevron-left.svg';
 import chevronRight from '@dso-toolkit/sources/src/icons/chevron-right.svg';
@@ -19,6 +21,7 @@ import clock from '@dso-toolkit/sources/src/icons/clock.svg';
 import copy from '@dso-toolkit/sources/src/icons/copy.svg';
 import crown from '@dso-toolkit/sources/src/icons/crown.svg';
 import cultural from '@dso-toolkit/sources/src/icons/cultural.svg';
+import document from '@dso-toolkit/sources/src/icons/document.svg';
 import download from '@dso-toolkit/sources/src/icons/download.svg';
 import email from '@dso-toolkit/sources/src/icons/email.svg';
 import energy from '@dso-toolkit/sources/src/icons/energy.svg';
@@ -74,6 +77,7 @@ import sortAscending from '@dso-toolkit/sources/src/icons/sort-ascending.svg';
 import sortDescending from '@dso-toolkit/sources/src/icons/sort-descending.svg';
 import sort from '@dso-toolkit/sources/src/icons/sort.svg';
 import sound from '@dso-toolkit/sources/src/icons/sound.svg';
+import statusForbidden from '@dso-toolkit/sources/src/icons/status-forbidden.svg';
 import statusDanger from '@dso-toolkit/sources/src/icons/status-danger.svg';
 import statusInfo from '@dso-toolkit/sources/src/icons/status-info.svg';
 import statusSuccess from '@dso-toolkit/sources/src/icons/status-success.svg';
@@ -97,8 +101,10 @@ const icons = [
   { alias: 'bars', svg: bars },
   { alias: 'buildings', svg: buildings },
   { alias: 'calendar', svg: calendar },
+  { alias: 'call', svg: call },
   { alias: 'caret-down', svg: caretDown },
   { alias: 'check', svg: check },
+  { alias: 'check-circle', svg: checkCircle },
   { alias: 'chevron-down', svg: chevronDown },
   { alias: 'chevron-left', svg: chevronLeft },
   { alias: 'chevron-right', svg: chevronRight },
@@ -108,6 +114,7 @@ const icons = [
   { alias: 'copy', svg: copy },
   { alias: 'crown', svg: crown },
   { alias: 'cultural', svg: cultural },
+  { alias: 'document', svg: document },
   { alias: 'download', svg: download },
   { alias: 'email', svg: email },
   { alias: 'energy', svg: energy },
@@ -164,6 +171,7 @@ const icons = [
   { alias: 'sort', svg: sort },
   { alias: 'sound', svg: sound },
   { alias: 'status-danger', svg: statusDanger },
+  { alias: 'status-forbidden', svg: statusForbidden },
   { alias: 'status-info', svg: statusInfo },
   { alias: 'status-success', svg: statusSuccess },
   { alias: 'status-warning', svg: statusWarning },

package/dist/collection/components/info/info.css

@@ -4,7 +4,7 @@
 :host {
   --di-times-bosgroen: url("data:image/svg+xml,%3csvg id='times' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' style='color: %23275937%3b'%3e %3cpath fill='currentColor' d='M13.36%2c12l3.3-3.3A1%2c1%2c0%2c1%2c0%2c15.3%2c7.34L12%2c10.64%2c8.7%2c7.34A1%2c1%2c0%2c1%2c0%2c7.34%2c8.7l3.3%2c3.3-3.3%2c3.3A1%2c1%2c0%2c1%2c0%2c8.7%2c16.66l3.3-3.3%2c3.3%2c3.3a1%2c1%2c0%2c1%2c0%2c1.36-1.36Z'/%3e %3c/svg%3e");
   display: block;
-  background-color: #e5e5e5;
+  background-color: #f2f2f2;
   padding: 16px 32px 16px 16px;
   position: relative;
 }
@@ -13,11 +13,11 @@
   border-style: none;
   padding: 0;
   position: absolute;
-  right: 0;
-  top: 0;
+  right: 8px;
+  top: 8px;
 }
 :host > button::before {
-  background: var(--dso-icon, var(--di-times-bosgroen)) no-repeat;
+  background: var(--dso-icon, var(--di-times-grijs90)) no-repeat;
   background-position: center;
   background-size: cover;
   height: 1.5em;

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

@@ -5,4 +5,8 @@
 *::after,
 *::before {
   box-sizing: border-box;
+}
+
+:host(:focus) {
+  outline: none;
 }

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

@@ -43,6 +43,7 @@ export class Toggletip {
       throw Error("button not found");
     }
     this.button = button;
+    this.host.setAttribute("tabindex", "-1");
   }
   render() {
     return (h(Fragment, null,

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

@@ -2,13 +2,14 @@ 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' },
+  return (h("li", { key: item.id, 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) },
+    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 && !!((_a = item.items) === null || _a === void 0 ? void 0 : _a.length)) : undefined, "aria-current": item.active ? 'true' : 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.selected && h("span", { class: "sr-only" }, "Resultaat: "),
       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 :

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

@@ -19,25 +19,53 @@
   display: inline-block;
   margin: 8px 0;
 }
-:host .tree-content a, :host .tree-content a:visited {
-  color: #39870c;
+:host .tree-content.active {
+  font-weight: 700;
+}
+:host .tree-content.active:hover {
+  text-decoration: underline;
+}
+:host .tree-content.active a {
   text-decoration: none;
 }
-:host .tree-content a:hover, :host .tree-content a:focus {
-  color: #676cb0;
+:host .tree-content.selected {
+  color: #191919;
+  font-weight: 700;
   text-decoration: underline;
 }
+:host .tree-content.selected:hover, :host .tree-content.selected:focus {
+  text-decoration: none;
+}
+:host .tree-content a, :host .tree-content a:visited {
+  color: #191919;
+  text-decoration: underline;
+}
+:host .tree-content a:hover, :host .tree-content a:focus {
+  color: #191919;
+  text-decoration: none;
+}
 :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;
+  vertical-align: text-bottom;
 }
 
 *,
 *::after,
 *::before {
   box-sizing: border-box;
+}
+
+.sr-only {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  border: 0;
 }

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

@@ -55,7 +55,7 @@ export class TreeView {
           return;
         }
         TreeView.setFocus(tree, contentElement);
-        this.clickItem.emit([...ancestors, item]);
+        this.clickItem.emit({ path: [...ancestors, item], originalEvent: event });
         return;
       }
       if (item.open) {
@@ -158,8 +158,8 @@ export class TreeView {
       "type": "unknown",
       "mutable": false,
       "complexType": {
-        "original": "TreeViewItem<string>[]",
-        "resolved": "TreeViewItem<string>[]",
+        "original": "TreeViewItem[]",
+        "resolved": "TreeViewItem[]",
         "references": {
           "TreeViewItem": {
             "location": "import",
@@ -186,8 +186,8 @@ export class TreeView {
         "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>[]",
+        "original": "TreeViewItem[]",
+        "resolved": "TreeViewItem[]",
         "references": {
           "TreeViewItem": {
             "location": "import",
@@ -206,8 +206,8 @@ export class TreeView {
         "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>[]",
+        "original": "TreeViewItem[]",
+        "resolved": "TreeViewItem[]",
         "references": {
           "TreeViewItem": {
             "location": "import",
@@ -223,13 +223,13 @@ export class TreeView {
       "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."
+        "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": "TreeViewItem<string>[]",
-        "resolved": "TreeViewItem<string>[]",
+        "original": "TreeViewPointerEvent",
+        "resolved": "TreeViewPointerEvent",
         "references": {
-          "TreeViewItem": {
+          "TreeViewPointerEvent": {
             "location": "import",
             "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;