@dso-toolkit/core 29.0.1 → 31.1.0

package/dist/cjs/dso-toggletip.cjs.entry.js

@@ -0,0 +1,62 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-fcdfdd38.js');
+
+const toggletipCss = "*,*::after,*::before{box-sizing:border-box}";
+
+let Toggletip = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    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 (index.h(index.Fragment, null, index.h("dso-info-button", { id: "toggle", onClick: this.click, label: this.label, active: this.active, secondary: this.secondary }), index.h("dso-tooltip", { stateless: true, for: "toggle", active: this.active, position: this.position, small: this.small }, index.h("slot", null))));
+  }
+  get host() { return index.getElement(this); }
+};
+Toggletip.style = toggletipCss;
+
+exports.dso_toggletip = Toggletip;

package/dist/cjs/dso-toolkit.cjs.js

@@ -15,5 +15,5 @@ const patchBrowser = () => {
 };
 
 patchBrowser().then(options => {
-  return index.bootstrapLazy([["dso-map-base-layers.cjs",[[1,"dso-map-base-layers",{"baseLayers":[16],"selectedBaseLayer":[1040]}]]],["dso-map-overlays.cjs",[[1,"dso-map-overlays",{"overlays":[16],"checkedOverlays":[1040]}]]],["dso-date-picker.cjs",[[1,"dso-date-picker",{"name":[1],"identifier":[1],"disabled":[516],"role":[1],"direction":[1],"required":[4],"value":[513],"min":[1],"max":[1],"activeFocus":[32],"focusedDay":[32],"open":[32],"setFocus":[64],"show":[64],"hide":[64]},[[6,"click","handleDocumentClick"]]]]],["dso-label.cjs",[[1,"dso-label",{"compact":[4],"removable":[4],"status":[1],"hover":[32]}]]],["dso-map-controls.cjs",[[1,"dso-map-controls",{"open":[1540],"disableZoom":[1,"disable-zoom"],"hideContent":[32]}]]],["dso-alert.cjs",[[1,"dso-alert",{"status":[1],"roleAlert":[4,"role-alert"]}]]],["dso-attachments-counter.cjs",[[1,"dso-attachments-counter",{"count":[2]}]]],["dso-autosuggest.cjs",[[6,"dso-autosuggest",{"fetchSuggestions":[16],"suggestOnFocus":[4,"suggest-on-focus"],"suggestions":[32],"showSuggestions":[32]},[[4,"click","onDocumentClick"]]]]],["dso-badge.cjs",[[1,"dso-badge",{"status":[1]}]]],["dso-banner.cjs",[[1,"dso-banner",{"status":[1]}]]],["dso-dropdown-menu.cjs",[[1,"dso-dropdown-menu",{"open":[1540],"dropdownAlign":[1,"dropdown-align"],"checkable":[4]}]]],["dso-highlight-box.cjs",[[1,"dso-highlight-box",{"yellow":[4],"border":[4],"white":[4],"dropShadow":[4,"drop-shadow"],"step":[2]}]]],["dso-ozon-content.cjs",[[0,"dso-ozon-content",{"content":[1]},[[0,"click","handleClick"]]]]],["dso-progress-bar.cjs",[[1,"dso-progress-bar",{"progress":[2],"min":[2],"max":[2]}]]],["dso-progress-indicator.cjs",[[1,"dso-progress-indicator",{"label":[1],"size":[1],"block":[4]}]]],["dso-tooltip.cjs",[[1,"dso-tooltip",{"position":[1],"for":[1],"noArrow":[4,"no-arrow"],"small":[4],"active":[1540],"hidden":[32],"activate":[64],"deactivate":[64]},[[0,"click","listenClick"]]]]],["dso-icon.cjs",[[1,"dso-icon",{"icon":[1]}]]],["dso-info_3.cjs",[[1,"dso-selectable",{"type":[1],"identifier":[1],"name":[1],"value":[1],"invalid":[4],"describedById":[1,"described-by-id"],"disabled":[4],"required":[4],"checked":[4],"indeterminate":[4],"infoFixed":[4,"info-fixed"],"infoActive":[32]}],[1,"dso-info",{"fixed":[516],"active":[516]}],[1,"dso-info-button",{"active":[1540],"label":[1]}]]]], options);
+  return index.bootstrapLazy([["dso-map-base-layers.cjs",[[1,"dso-map-base-layers",{"baseLayers":[16],"selectedBaseLayer":[1040]}]]],["dso-map-overlays.cjs",[[1,"dso-map-overlays",{"overlays":[16],"checkedOverlays":[1040]}]]],["dso-toggletip.cjs",[[1,"dso-toggletip",{"label":[1],"position":[1],"small":[4],"secondary":[4],"active":[32]}]]],["dso-tree-view.cjs",[[1,"dso-tree-view",{"collection":[16]}]]],["dso-date-picker.cjs",[[1,"dso-date-picker",{"name":[1],"identifier":[1],"disabled":[516],"role":[1],"direction":[1],"required":[4],"dsoAutofocus":[4,"dso-autofocus"],"value":[1537],"min":[1],"max":[1],"activeFocus":[32],"focusedDay":[32],"open":[32],"setFocus":[64],"show":[64],"hide":[64]},[[6,"click","handleDocumentClick"]]]]],["dso-label.cjs",[[1,"dso-label",{"compact":[4],"removable":[4],"status":[1],"hover":[32]}]]],["dso-map-controls.cjs",[[1,"dso-map-controls",{"open":[1540],"disableZoom":[1,"disable-zoom"],"hideContent":[32]}]]],["dso-alert.cjs",[[1,"dso-alert",{"status":[1],"roleAlert":[4,"role-alert"]}]]],["dso-attachments-counter.cjs",[[1,"dso-attachments-counter",{"count":[2]}]]],["dso-autosuggest.cjs",[[6,"dso-autosuggest",{"suggestions":[16],"suggestOnFocus":[4,"suggest-on-focus"],"showSuggestions":[32],"selectedSuggestion":[32]},[[4,"click","onDocumentClick"]]]]],["dso-badge.cjs",[[1,"dso-badge",{"status":[1]}]]],["dso-banner.cjs",[[1,"dso-banner",{"status":[1]}]]],["dso-dropdown-menu.cjs",[[1,"dso-dropdown-menu",{"open":[1540],"dropdownAlign":[1,"dropdown-align"],"checkable":[4]}]]],["dso-highlight-box.cjs",[[1,"dso-highlight-box",{"yellow":[4],"border":[4],"white":[4],"dropShadow":[4,"drop-shadow"],"step":[2]}]]],["dso-ozon-content.cjs",[[0,"dso-ozon-content",{"content":[1]},[[0,"click","handleClick"]]]]],["dso-progress-bar.cjs",[[1,"dso-progress-bar",{"progress":[2],"min":[2],"max":[2]}]]],["dso-progress-indicator.cjs",[[1,"dso-progress-indicator",{"label":[1],"size":[1],"block":[4]}]]],["dso-tooltip.cjs",[[1,"dso-tooltip",{"position":[1],"for":[1],"noArrow":[4,"no-arrow"],"stateless":[4],"small":[4],"active":[1540],"hidden":[32],"activate":[64],"deactivate":[64]},[[0,"click","listenClick"]]]]],["dso-icon.cjs",[[1,"dso-icon",{"icon":[1]}]]],["dso-info-button.cjs",[[1,"dso-info-button",{"active":[1540],"secondary":[4],"label":[1]}]]],["dso-info_2.cjs",[[1,"dso-selectable",{"type":[1],"identifier":[1],"name":[1],"value":[1],"invalid":[4],"describedById":[1,"described-by-id"],"disabled":[4],"required":[4],"checked":[4],"indeterminate":[4],"infoFixed":[4,"info-fixed"],"infoActive":[32]}],[1,"dso-info",{"fixed":[516],"active":[516]}]]]], options);
 });

package/dist/cjs/dso-tooltip.cjs.entry.js

@@ -1743,7 +1743,7 @@ var createPopper = /*#__PURE__*/popperGenerator({
   defaultModifiers: defaultModifiers
 }); // eslint-disable-next-line import/no-unused-modules
 
-const tooltipCss = ":host(:not([hidden])){display:block}*,*::after,*::before{box-sizing:border-box}.tooltip{font-family:Asap, sans-serif;font-style:normal;font-weight:400;line-height:1.5;line-break:auto;text-align:left;text-align:start;text-decoration:none;text-shadow:none;text-transform:none;letter-spacing:normal;word-break:normal;word-spacing:normal;word-wrap:normal;white-space:normal;display:block;filter:drop-shadow(0 2px 8px rgba(0, 0, 0, 0.4));font-size:14px;opacity:0;position:absolute;transition:opacity 0.15s linear;z-index:1070}.tooltip.in{opacity:0.9}.tooltip .tooltip-inner{background-color:#fff;border-radius:4px;color:#191919;display:inline-block;font-size:16px;max-width:640px;padding:8px 16px;position:relative}.tooltip .tooltip-inner.dso-small{max-width:320px}.tooltip .tooltip-arrow{border-color:transparent;border-style:solid;height:0;position:absolute;width:0}.tooltip[data-popper-placement=top]{margin-top:-3px;padding:6px 0}.tooltip[data-popper-placement=top] .tooltip-arrow{border-top-color:#fff;border-width:6px 6px 0;bottom:0;left:50%;margin-left:-6px}.tooltip[data-popper-placement=right]{margin-left:3px;padding:0 6px}.tooltip[data-popper-placement=right] .tooltip-arrow{border-right-color:#fff;border-width:6px 6px 6px 0;left:0;margin-top:-6px;top:50%}.tooltip[data-popper-placement=bottom]{margin-top:3px;padding:6px 0}.tooltip[data-popper-placement=bottom] .tooltip-arrow{border-bottom-color:#fff;border-width:0 6px 6px;left:50%;margin-left:-6px;top:0}.tooltip[data-popper-placement=left]{margin-left:-3px;padding:0 6px}.tooltip[data-popper-placement=left] .tooltip-arrow{border-left-color:#fff;border-width:6px 0 6px 6px;margin-top:-6px;right:0;top:50%}";
+const tooltipCss = ":host(:not([hidden])){display:inline-block}*,*::after,*::before{box-sizing:border-box}.tooltip{font-family:Asap, sans-serif;font-style:normal;font-weight:400;line-height:1.5;line-break:auto;text-align:left;text-align:start;text-decoration:none;text-shadow:none;text-transform:none;letter-spacing:normal;word-break:normal;word-spacing:normal;word-wrap:normal;white-space:normal;display:block;filter:drop-shadow(0 2px 8px rgba(0, 0, 0, 0.4));font-size:14px;opacity:0;position:absolute;transition:opacity 0.15s linear;z-index:1070}.tooltip.in{opacity:0.9}.tooltip .tooltip-inner{background-color:#fff;border-radius:4px;color:#191919;display:inline-block;font-size:16px;max-width:640px;padding:8px 16px;position:relative}.tooltip .tooltip-inner.dso-small{max-width:320px}.tooltip .tooltip-arrow{border-color:transparent;border-style:solid;height:0;position:absolute;width:0}.tooltip[data-popper-placement=top]{margin-top:-3px;padding:6px 0}.tooltip[data-popper-placement=top] .tooltip-arrow{border-top-color:#fff;border-width:6px 6px 0;bottom:0;left:50%;margin-left:-6px}.tooltip[data-popper-placement=right]{margin-left:3px;padding:0 6px}.tooltip[data-popper-placement=right] .tooltip-arrow{border-right-color:#fff;border-width:6px 6px 6px 0;left:0;margin-top:-6px;top:50%}.tooltip[data-popper-placement=bottom]{margin-top:3px;padding:6px 0}.tooltip[data-popper-placement=bottom] .tooltip-arrow{border-bottom-color:#fff;border-width:0 6px 6px;left:50%;margin-left:-6px;top:0}.tooltip[data-popper-placement=left]{margin-left:-3px;padding:0 6px}.tooltip[data-popper-placement=left] .tooltip-arrow{border-left-color:#fff;border-width:6px 0 6px 6px;margin-top:-6px;right:0;top:50%}";
 
 // Keep const in sync with $tooltip-transition-duration in @dso-toolkit/sources/tooltip.scss tooltip_root() mixin
 const transitionDuration = 150;
@@ -1785,8 +1785,25 @@ let Tooltip = class {
     });
   }
   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) {
@@ -1806,34 +1823,20 @@ let Tooltip = class {
       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);
@@ -1849,14 +1852,18 @@ let Tooltip = class {
     }
   }
   render() {
-    return (index.h(index.Host, { hidden: this.hidden }, index.h("div", { class: clsx_m.clsx('tooltip', { in: this.active }), role: "tooltip" }, !this.noArrow && (index.h("div", { class: "tooltip-arrow" })), index.h("div", { class: clsx_m.clsx('tooltip-inner', { 'dso-small': this.small }) }, index.h("slot", null)))));
+    return (index.h(index.Host, { hidden: this.hidden }, index.h("div", { class: clsx_m.clsx('tooltip', { in: this.active }), role: "tooltip" }, !this.noArrow && index.h("div", { class: "tooltip-arrow" }), index.h("div", { class: clsx_m.clsx('tooltip-inner', { 'dso-small': this.small }) }, index.h("slot", null)))));
   }
   getTarget() {
     if (this.for instanceof HTMLElement) {
       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}`);
       }

package/dist/cjs/dso-tree-view.cjs.entry.js

@@ -0,0 +1,180 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-fcdfdd38.js');
+const clsx_m = require('./clsx.m-b00fa5e1.js');
+
+const DsoTreeItem = ({ owner, ancestors, item, index: index$1, level, setSize }) => {
+  var _a, _b, _c;
+  return (index.h("li", { key: item.reference, class: clsx_m.clsx('tree-item', { 'has-child': item.hasItems }), role: 'none' },
+    index.h("div", { class: "tree-branch-control" }, item.hasItems
+      ?
+        index.h("div", { onClick: (e) => owner.itemClick(e, ancestors, item) },
+          index.h("dso-icon", { icon: item.open ? 'chevron-down' : 'chevron-right' }))
+      : index.h("dso-icon", null)),
+    index.h("p", { class: "tree-content", tabindex: level === 1 && index$1 === 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 + 1, "aria-busy": item.loading ? 'true' : undefined, onClick: (e) => owner.itemClick(e, ancestors, item) },
+      item.href
+        ? index.h("a", { href: item.href, tabindex: "-1" }, item.label)
+        : index.h("span", null, item.label), (_b = item.icons) === null || _b === void 0 ? void 0 :
+      _b.map((icon) => index.h("dso-icon", { icon: icon.icon, title: icon.label }))),
+    item.open &&
+      index.h(index.Fragment, null, item.hasItems && !item.items && item.loading
+        ? index.h("dso-progress-indicator", { size: "small", label: "Resultaten laden: een moment geduld alstublieft." })
+        : index.h("ul", { role: "group" }, (_c = item.items) === null || _c === void 0 ? void 0 : _c.map((childItem, index$1, org) => index.h(DsoTreeItem, { owner: owner, ancestors: [...ancestors, item], item: childItem, index: index$1, level: level + 1, setSize: org.length }))))));
+};
+
+const treeViewCss = ":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}";
+
+let TreeView = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.openItem = index.createEvent(this, "openItem", 7);
+    this.closeItem = index.createEvent(this, "closeItem", 7);
+    this.clickItem = index.createEvent(this, "clickItem", 7);
+    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 (index.h("div", { id: "tree", class: "dso-tree", onKeyDown: (e) => this.keyDownListener(e) }, index.h("ul", { role: "tree", "aria-label": "Objectenboom" }, (_a = this.collection) === null || _a === void 0 ? void 0 : _a.map((item, index$1) => index.h(DsoTreeItem, { owner: this, ancestors: [], item: item, index: index$1, level: 1, setSize: this.collection.length })))));
+  }
+};
+TreeView.style = treeViewCss;
+
+exports.dso_tree_view = TreeView;

package/dist/cjs/loader.cjs.js

@@ -14,7 +14,7 @@ const patchEsm = () => {
 const defineCustomElements = (win, options) => {
   if (typeof window === 'undefined') return Promise.resolve();
   return patchEsm().then(() => {
-  return index.bootstrapLazy([["dso-map-base-layers.cjs",[[1,"dso-map-base-layers",{"baseLayers":[16],"selectedBaseLayer":[1040]}]]],["dso-map-overlays.cjs",[[1,"dso-map-overlays",{"overlays":[16],"checkedOverlays":[1040]}]]],["dso-date-picker.cjs",[[1,"dso-date-picker",{"name":[1],"identifier":[1],"disabled":[516],"role":[1],"direction":[1],"required":[4],"value":[513],"min":[1],"max":[1],"activeFocus":[32],"focusedDay":[32],"open":[32],"setFocus":[64],"show":[64],"hide":[64]},[[6,"click","handleDocumentClick"]]]]],["dso-label.cjs",[[1,"dso-label",{"compact":[4],"removable":[4],"status":[1],"hover":[32]}]]],["dso-map-controls.cjs",[[1,"dso-map-controls",{"open":[1540],"disableZoom":[1,"disable-zoom"],"hideContent":[32]}]]],["dso-alert.cjs",[[1,"dso-alert",{"status":[1],"roleAlert":[4,"role-alert"]}]]],["dso-attachments-counter.cjs",[[1,"dso-attachments-counter",{"count":[2]}]]],["dso-autosuggest.cjs",[[6,"dso-autosuggest",{"fetchSuggestions":[16],"suggestOnFocus":[4,"suggest-on-focus"],"suggestions":[32],"showSuggestions":[32]},[[4,"click","onDocumentClick"]]]]],["dso-badge.cjs",[[1,"dso-badge",{"status":[1]}]]],["dso-banner.cjs",[[1,"dso-banner",{"status":[1]}]]],["dso-dropdown-menu.cjs",[[1,"dso-dropdown-menu",{"open":[1540],"dropdownAlign":[1,"dropdown-align"],"checkable":[4]}]]],["dso-highlight-box.cjs",[[1,"dso-highlight-box",{"yellow":[4],"border":[4],"white":[4],"dropShadow":[4,"drop-shadow"],"step":[2]}]]],["dso-ozon-content.cjs",[[0,"dso-ozon-content",{"content":[1]},[[0,"click","handleClick"]]]]],["dso-progress-bar.cjs",[[1,"dso-progress-bar",{"progress":[2],"min":[2],"max":[2]}]]],["dso-progress-indicator.cjs",[[1,"dso-progress-indicator",{"label":[1],"size":[1],"block":[4]}]]],["dso-tooltip.cjs",[[1,"dso-tooltip",{"position":[1],"for":[1],"noArrow":[4,"no-arrow"],"small":[4],"active":[1540],"hidden":[32],"activate":[64],"deactivate":[64]},[[0,"click","listenClick"]]]]],["dso-icon.cjs",[[1,"dso-icon",{"icon":[1]}]]],["dso-info_3.cjs",[[1,"dso-selectable",{"type":[1],"identifier":[1],"name":[1],"value":[1],"invalid":[4],"describedById":[1,"described-by-id"],"disabled":[4],"required":[4],"checked":[4],"indeterminate":[4],"infoFixed":[4,"info-fixed"],"infoActive":[32]}],[1,"dso-info",{"fixed":[516],"active":[516]}],[1,"dso-info-button",{"active":[1540],"label":[1]}]]]], options);
+  return index.bootstrapLazy([["dso-map-base-layers.cjs",[[1,"dso-map-base-layers",{"baseLayers":[16],"selectedBaseLayer":[1040]}]]],["dso-map-overlays.cjs",[[1,"dso-map-overlays",{"overlays":[16],"checkedOverlays":[1040]}]]],["dso-toggletip.cjs",[[1,"dso-toggletip",{"label":[1],"position":[1],"small":[4],"secondary":[4],"active":[32]}]]],["dso-tree-view.cjs",[[1,"dso-tree-view",{"collection":[16]}]]],["dso-date-picker.cjs",[[1,"dso-date-picker",{"name":[1],"identifier":[1],"disabled":[516],"role":[1],"direction":[1],"required":[4],"dsoAutofocus":[4,"dso-autofocus"],"value":[1537],"min":[1],"max":[1],"activeFocus":[32],"focusedDay":[32],"open":[32],"setFocus":[64],"show":[64],"hide":[64]},[[6,"click","handleDocumentClick"]]]]],["dso-label.cjs",[[1,"dso-label",{"compact":[4],"removable":[4],"status":[1],"hover":[32]}]]],["dso-map-controls.cjs",[[1,"dso-map-controls",{"open":[1540],"disableZoom":[1,"disable-zoom"],"hideContent":[32]}]]],["dso-alert.cjs",[[1,"dso-alert",{"status":[1],"roleAlert":[4,"role-alert"]}]]],["dso-attachments-counter.cjs",[[1,"dso-attachments-counter",{"count":[2]}]]],["dso-autosuggest.cjs",[[6,"dso-autosuggest",{"suggestions":[16],"suggestOnFocus":[4,"suggest-on-focus"],"showSuggestions":[32],"selectedSuggestion":[32]},[[4,"click","onDocumentClick"]]]]],["dso-badge.cjs",[[1,"dso-badge",{"status":[1]}]]],["dso-banner.cjs",[[1,"dso-banner",{"status":[1]}]]],["dso-dropdown-menu.cjs",[[1,"dso-dropdown-menu",{"open":[1540],"dropdownAlign":[1,"dropdown-align"],"checkable":[4]}]]],["dso-highlight-box.cjs",[[1,"dso-highlight-box",{"yellow":[4],"border":[4],"white":[4],"dropShadow":[4,"drop-shadow"],"step":[2]}]]],["dso-ozon-content.cjs",[[0,"dso-ozon-content",{"content":[1]},[[0,"click","handleClick"]]]]],["dso-progress-bar.cjs",[[1,"dso-progress-bar",{"progress":[2],"min":[2],"max":[2]}]]],["dso-progress-indicator.cjs",[[1,"dso-progress-indicator",{"label":[1],"size":[1],"block":[4]}]]],["dso-tooltip.cjs",[[1,"dso-tooltip",{"position":[1],"for":[1],"noArrow":[4,"no-arrow"],"stateless":[4],"small":[4],"active":[1540],"hidden":[32],"activate":[64],"deactivate":[64]},[[0,"click","listenClick"]]]]],["dso-icon.cjs",[[1,"dso-icon",{"icon":[1]}]]],["dso-info-button.cjs",[[1,"dso-info-button",{"active":[1540],"secondary":[4],"label":[1]}]]],["dso-info_2.cjs",[[1,"dso-selectable",{"type":[1],"identifier":[1],"name":[1],"value":[1],"invalid":[4],"describedById":[1,"described-by-id"],"disabled":[4],"required":[4],"checked":[4],"indeterminate":[4],"infoFixed":[4,"info-fixed"],"infoActive":[32]}],[1,"dso-info",{"fixed":[516],"active":[516]}]]]], options);
   });
 };
 

package/dist/collection/collection-manifest.json

@@ -19,7 +19,9 @@
     "./components/ozon-content/ozon-content.js",
     "./components/progress-bar/progress-bar.js",
     "./components/progress-indicator/progress-indicator.js",
-    "./components/tooltip/tooltip.js"
+    "./components/toggletip/toggletip.js",
+    "./components/tooltip/tooltip.js",
+    "./components/tree-view/tree-view.js"
   ],
   "compiler": {
     "name": "@stencil/core",

package/dist/collection/components/alert/alert.css

@@ -17,6 +17,8 @@
   --di-status-danger: url("data:image/svg+xml,%3csvg id='status-danger-line' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3e %3cg%3e %3cpath d='M22.6%2c18.51c.86%2c1.37.29%2c2.49-1.25%2c2.49H2.65C1.11%2c21%2c.54%2c19.88%2c1.4%2c18.51L10.44%2c4a1.7%2c1.7%2c0%2c0%2c1%2c3.12%2c0Z' style='fill: %23ce3f51'/%3e %3cpath d='M12%2c3a1.9%2c1.9%2c0%2c0%2c1%2c1.56%2c1l9%2c14.48c.86%2c1.37.29%2c2.49-1.25%2c2.49H2.65C1.11%2c21%2c.54%2c19.88%2c1.4%2c18.51L10.44%2c4A1.9%2c1.9%2c0%2c0%2c1%2c12%2c3m0-1A2.89%2c2.89%2c0%2c0%2c0%2c9.6%2c3.5L.55%2c18a2.75%2c2.75%2c0%2c0%2c0-.28%2c2.81A2.59%2c2.59%2c0%2c0%2c0%2c2.65%2c22h18.7a2.59%2c2.59%2c0%2c0%2c0%2c2.38-1.21A2.75%2c2.75%2c0%2c0%2c0%2c23.45%2c18L14.4%2c3.5A2.89%2c2.89%2c0%2c0%2c0%2c12%2c2Z' style='fill: white'/%3e %3c/g%3e %3cpath d='M12%2c16a1%2c1%2c0%2c0%2c1-1-.91V8.91a1%2c1%2c0%2c0%2c1%2c2%2c0v6.18A1%2c1%2c0%2c0%2c1%2c12%2c16Zm0%2c1a1%2c1%2c0%2c1%2c0%2c1%2c1A1%2c1%2c0%2c0%2c0%2c12%2c17Z' style='fill: white'/%3e %3c/svg%3e");
   --di-status-warning: url("data:image/svg+xml,%3csvg id='status-warning' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3e %3cg%3e %3cpath d='M22.6%2c18.51c.86%2c1.37.29%2c2.49-1.25%2c2.49H2.65C1.11%2c21%2c.54%2c19.88%2c1.4%2c18.51L10.44%2c4a1.7%2c1.7%2c0%2c0%2c1%2c3.12%2c0Z' style='fill: %23dcd400'/%3e %3cpath d='M12%2c3a1.9%2c1.9%2c0%2c0%2c1%2c1.56%2c1l9%2c14.48c.86%2c1.37.29%2c2.49-1.25%2c2.49H2.65C1.11%2c21%2c.54%2c19.88%2c1.4%2c18.51L10.44%2c4A1.9%2c1.9%2c0%2c0%2c1%2c12%2c3m0-1A2.89%2c2.89%2c0%2c0%2c0%2c9.6%2c3.5L.55%2c18a2.75%2c2.75%2c0%2c0%2c0-.28%2c2.81A2.59%2c2.59%2c0%2c0%2c0%2c2.65%2c22h18.7a2.59%2c2.59%2c0%2c0%2c0%2c2.38-1.21A2.75%2c2.75%2c0%2c0%2c0%2c23.45%2c18L14.4%2c3.5A2.89%2c2.89%2c0%2c0%2c0%2c12%2c2Z' style='fill: white'/%3e %3c/g%3e %3cpath d='M11.73%2c15.85a1%2c1%2c0%2c0%2c1-1-.91V8.76a1%2c1%2c0%2c0%2c1%2c2%2c0v6.18A1%2c1%2c0%2c0%2c1%2c11.73%2c15.85Zm0%2c1a1%2c1%2c0%2c1%2c0%2c1%2c1A1%2c1%2c0%2c0%2c0%2c11.73%2c16.85Z'/%3e %3c/svg%3e");
   --di-status-info: url("data:image/svg+xml,%3csvg id='status-info' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3e %3cg%3e %3ccircle cx='12' cy='12' r='11' style='fill: %232b5780'/%3e %3cpath d='M12%2c1A11%2c11%2c0%2c1%2c1%2c1%2c12%2c11%2c11%2c0%2c0%2c1%2c12%2c1m0-1A12%2c12%2c0%2c1%2c0%2c24%2c12%2c12%2c12%2c0%2c0%2c0%2c12%2c0Z' style='fill: white'/%3e %3c/g%3e %3cpath d='M11%2c8a1%2c1%2c0%2c1%2c1%2c1%2c1A1%2c1%2c0%2c0%2c1%2c11%2c8Zm2%2c8.79V11.21A1.12%2c1.12%2c0%2c0%2c0%2c12%2c10a1.12%2c1.12%2c0%2c0%2c0-1%2c1.21v5.58A1.12%2c1.12%2c0%2c0%2c0%2c12%2c18%2c1.12%2c1.12%2c0%2c0%2c0%2c13%2c16.79Z' style='fill: white'/%3e %3c/svg%3e");
+  --di-download-grijs90: url("data:image/svg+xml,%3csvg id='download' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' style='color: %23191919%3b'%3e %3cpath fill='currentColor' d='M18.72%2c10.44%2c12%2c17l-6.7-6.52C4.8%2c10%2c5%2c9.63%2c5.63%2c9.63H8.5V1.82A.8.8%2c0%2c0%2c1%2c9.28%2c1h5.44a.8.8%2c0%2c0%2c1%2c.78.82V9.61h2.87C19%2c9.6%2c19.2%2c10%2c18.72%2c10.44ZM1%2c17v6H23V17Zm16%2c3a2%2c2%2c0%2c1%2c1-2-2A2%2c2%2c0%2c0%2c1%2c17%2c20Zm5%2c0a2%2c2%2c0%2c1%2c1-2-2A2%2c2%2c0%2c0%2c1%2c22%2c20Z'/%3e %3c/svg%3e");
+  --di-external-link-grijs90: url("data:image/svg+xml,%3csvg id='external-link' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' style='color: %23191919%3b'%3e %3cpath fill='currentColor' d='M19%2c6V9.69c0%2c.33-.2.41-.43.17L17.06%2c8.35l-3.35%2c3.36a1%2c1%2c0%2c0%2c1-1.42%2c0%2c1%2c1%2c0%2c0%2c1%2c0-1.42l3.36-3.35L14.14%2c5.43C13.9%2c5.19%2c14%2c5%2c14.31%2c5H19V6ZM18%2c17V13a1%2c1%2c0%2c0%2c0-2%2c0v4a1%2c1%2c0%2c0%2c1-1%2c1H7a1%2c1%2c0%2c0%2c1-1-1V9A1%2c1%2c0%2c0%2c1%2c7%2c8h4a1%2c1%2c0%2c0%2c0%2c0-2H7A3%2c3%2c0%2c0%2c0%2c4%2c9v8a3%2c3%2c0%2c0%2c0%2c3%2c3h8A3%2c3%2c0%2c0%2c0%2c18%2c17Z'/%3e %3c/svg%3e");
 }
 
 :host(:not(:first-child)) {

package/dist/collection/components/autosuggest/autosuggest.css

@@ -1,6 +1,11 @@
 /* stylelint-disable value-keyword-case */
 /* stylelint-disable string-no-newline */
 /* stylelint-enable */
+:host {
+  display: block;
+  position: relative;
+}
+
 ul {
   background-clip: padding-box;
   background-color: #fff;
@@ -10,6 +15,11 @@ ul {
   list-style-type: none;
   margin-top: 2px;
   padding: 4px 0;
+  position: absolute;
+  left: 0;
+  right: 0;
+  top: 100%;
+  z-index: 10;
 }
 ul li {
   display: flex;