@dso-toolkit/core 29.0.1 → 31.1.0

package/dist/esm/dso-ozon-content.entry.js

@@ -314,21 +314,34 @@ function isURL(url, options) {
 }
 
 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;
 }
@@ -398,7 +411,7 @@ 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/esm/dso-toggletip.entry.js

@@ -0,0 +1,58 @@
+import { r as registerInstance, h, F as Fragment, g as getElement } from './index-61410be2.js';
+
+const toggletipCss = "*,*::after,*::before{box-sizing:border-box}";
+
+let Toggletip = class {
+  constructor(hostRef) {
+    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 (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))));
+  }
+  get host() { return getElement(this); }
+};
+Toggletip.style = toggletipCss;
+
+export { Toggletip as dso_toggletip };

package/dist/esm/dso-toolkit.js

@@ -13,5 +13,5 @@ const patchBrowser = () => {
 };
 
 patchBrowser().then(options => {
-  return bootstrapLazy([["dso-map-base-layers",[[1,"dso-map-base-layers",{"baseLayers":[16],"selectedBaseLayer":[1040]}]]],["dso-map-overlays",[[1,"dso-map-overlays",{"overlays":[16],"checkedOverlays":[1040]}]]],["dso-date-picker",[[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",[[1,"dso-label",{"compact":[4],"removable":[4],"status":[1],"hover":[32]}]]],["dso-map-controls",[[1,"dso-map-controls",{"open":[1540],"disableZoom":[1,"disable-zoom"],"hideContent":[32]}]]],["dso-alert",[[1,"dso-alert",{"status":[1],"roleAlert":[4,"role-alert"]}]]],["dso-attachments-counter",[[1,"dso-attachments-counter",{"count":[2]}]]],["dso-autosuggest",[[6,"dso-autosuggest",{"fetchSuggestions":[16],"suggestOnFocus":[4,"suggest-on-focus"],"suggestions":[32],"showSuggestions":[32]},[[4,"click","onDocumentClick"]]]]],["dso-badge",[[1,"dso-badge",{"status":[1]}]]],["dso-banner",[[1,"dso-banner",{"status":[1]}]]],["dso-dropdown-menu",[[1,"dso-dropdown-menu",{"open":[1540],"dropdownAlign":[1,"dropdown-align"],"checkable":[4]}]]],["dso-highlight-box",[[1,"dso-highlight-box",{"yellow":[4],"border":[4],"white":[4],"dropShadow":[4,"drop-shadow"],"step":[2]}]]],["dso-ozon-content",[[0,"dso-ozon-content",{"content":[1]},[[0,"click","handleClick"]]]]],["dso-progress-bar",[[1,"dso-progress-bar",{"progress":[2],"min":[2],"max":[2]}]]],["dso-progress-indicator",[[1,"dso-progress-indicator",{"label":[1],"size":[1],"block":[4]}]]],["dso-tooltip",[[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",[[1,"dso-icon",{"icon":[1]}]]],["dso-info_3",[[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 bootstrapLazy([["dso-map-base-layers",[[1,"dso-map-base-layers",{"baseLayers":[16],"selectedBaseLayer":[1040]}]]],["dso-map-overlays",[[1,"dso-map-overlays",{"overlays":[16],"checkedOverlays":[1040]}]]],["dso-toggletip",[[1,"dso-toggletip",{"label":[1],"position":[1],"small":[4],"secondary":[4],"active":[32]}]]],["dso-tree-view",[[1,"dso-tree-view",{"collection":[16]}]]],["dso-date-picker",[[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",[[1,"dso-label",{"compact":[4],"removable":[4],"status":[1],"hover":[32]}]]],["dso-map-controls",[[1,"dso-map-controls",{"open":[1540],"disableZoom":[1,"disable-zoom"],"hideContent":[32]}]]],["dso-alert",[[1,"dso-alert",{"status":[1],"roleAlert":[4,"role-alert"]}]]],["dso-attachments-counter",[[1,"dso-attachments-counter",{"count":[2]}]]],["dso-autosuggest",[[6,"dso-autosuggest",{"suggestions":[16],"suggestOnFocus":[4,"suggest-on-focus"],"showSuggestions":[32],"selectedSuggestion":[32]},[[4,"click","onDocumentClick"]]]]],["dso-badge",[[1,"dso-badge",{"status":[1]}]]],["dso-banner",[[1,"dso-banner",{"status":[1]}]]],["dso-dropdown-menu",[[1,"dso-dropdown-menu",{"open":[1540],"dropdownAlign":[1,"dropdown-align"],"checkable":[4]}]]],["dso-highlight-box",[[1,"dso-highlight-box",{"yellow":[4],"border":[4],"white":[4],"dropShadow":[4,"drop-shadow"],"step":[2]}]]],["dso-ozon-content",[[0,"dso-ozon-content",{"content":[1]},[[0,"click","handleClick"]]]]],["dso-progress-bar",[[1,"dso-progress-bar",{"progress":[2],"min":[2],"max":[2]}]]],["dso-progress-indicator",[[1,"dso-progress-indicator",{"label":[1],"size":[1],"block":[4]}]]],["dso-tooltip",[[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",[[1,"dso-icon",{"icon":[1]}]]],["dso-info-button",[[1,"dso-info-button",{"active":[1540],"secondary":[4],"label":[1]}]]],["dso-info_2",[[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/esm/dso-tooltip.entry.js

@@ -1739,7 +1739,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;
@@ -1781,8 +1781,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) {
@@ -1802,34 +1819,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);
@@ -1845,14 +1848,18 @@ let Tooltip = class {
     }
   }
   render() {
-    return (h(Host, { hidden: this.hidden }, h("div", { class: clsx('tooltip', { in: this.active }), role: "tooltip" }, !this.noArrow && (h("div", { class: "tooltip-arrow" })), h("div", { class: clsx('tooltip-inner', { 'dso-small': this.small }) }, h("slot", null)))));
+    return (h(Host, { hidden: this.hidden }, h("div", { class: clsx('tooltip', { in: this.active }), role: "tooltip" }, !this.noArrow && h("div", { class: "tooltip-arrow" }), h("div", { class: clsx('tooltip-inner', { 'dso-small': this.small }) }, 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/esm/dso-tree-view.entry.js

@@ -0,0 +1,176 @@
+import { h, F as Fragment, r as registerInstance, c as createEvent } from './index-61410be2.js';
+import { c as clsx } from './clsx.m-071989db.js';
+
+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 }))))));
+};
+
+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) {
+    registerInstance(this, hostRef);
+    this.openItem = createEvent(this, "openItem", 7);
+    this.closeItem = createEvent(this, "closeItem", 7);
+    this.clickItem = 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 (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 })))));
+  }
+};
+TreeView.style = treeViewCss;
+
+export { TreeView as dso_tree_view };

package/dist/esm/loader.js

@@ -10,7 +10,7 @@ const patchEsm = () => {
 const defineCustomElements = (win, options) => {
   if (typeof window === 'undefined') return Promise.resolve();
   return patchEsm().then(() => {
-  return bootstrapLazy([["dso-map-base-layers",[[1,"dso-map-base-layers",{"baseLayers":[16],"selectedBaseLayer":[1040]}]]],["dso-map-overlays",[[1,"dso-map-overlays",{"overlays":[16],"checkedOverlays":[1040]}]]],["dso-date-picker",[[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",[[1,"dso-label",{"compact":[4],"removable":[4],"status":[1],"hover":[32]}]]],["dso-map-controls",[[1,"dso-map-controls",{"open":[1540],"disableZoom":[1,"disable-zoom"],"hideContent":[32]}]]],["dso-alert",[[1,"dso-alert",{"status":[1],"roleAlert":[4,"role-alert"]}]]],["dso-attachments-counter",[[1,"dso-attachments-counter",{"count":[2]}]]],["dso-autosuggest",[[6,"dso-autosuggest",{"fetchSuggestions":[16],"suggestOnFocus":[4,"suggest-on-focus"],"suggestions":[32],"showSuggestions":[32]},[[4,"click","onDocumentClick"]]]]],["dso-badge",[[1,"dso-badge",{"status":[1]}]]],["dso-banner",[[1,"dso-banner",{"status":[1]}]]],["dso-dropdown-menu",[[1,"dso-dropdown-menu",{"open":[1540],"dropdownAlign":[1,"dropdown-align"],"checkable":[4]}]]],["dso-highlight-box",[[1,"dso-highlight-box",{"yellow":[4],"border":[4],"white":[4],"dropShadow":[4,"drop-shadow"],"step":[2]}]]],["dso-ozon-content",[[0,"dso-ozon-content",{"content":[1]},[[0,"click","handleClick"]]]]],["dso-progress-bar",[[1,"dso-progress-bar",{"progress":[2],"min":[2],"max":[2]}]]],["dso-progress-indicator",[[1,"dso-progress-indicator",{"label":[1],"size":[1],"block":[4]}]]],["dso-tooltip",[[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",[[1,"dso-icon",{"icon":[1]}]]],["dso-info_3",[[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 bootstrapLazy([["dso-map-base-layers",[[1,"dso-map-base-layers",{"baseLayers":[16],"selectedBaseLayer":[1040]}]]],["dso-map-overlays",[[1,"dso-map-overlays",{"overlays":[16],"checkedOverlays":[1040]}]]],["dso-toggletip",[[1,"dso-toggletip",{"label":[1],"position":[1],"small":[4],"secondary":[4],"active":[32]}]]],["dso-tree-view",[[1,"dso-tree-view",{"collection":[16]}]]],["dso-date-picker",[[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",[[1,"dso-label",{"compact":[4],"removable":[4],"status":[1],"hover":[32]}]]],["dso-map-controls",[[1,"dso-map-controls",{"open":[1540],"disableZoom":[1,"disable-zoom"],"hideContent":[32]}]]],["dso-alert",[[1,"dso-alert",{"status":[1],"roleAlert":[4,"role-alert"]}]]],["dso-attachments-counter",[[1,"dso-attachments-counter",{"count":[2]}]]],["dso-autosuggest",[[6,"dso-autosuggest",{"suggestions":[16],"suggestOnFocus":[4,"suggest-on-focus"],"showSuggestions":[32],"selectedSuggestion":[32]},[[4,"click","onDocumentClick"]]]]],["dso-badge",[[1,"dso-badge",{"status":[1]}]]],["dso-banner",[[1,"dso-banner",{"status":[1]}]]],["dso-dropdown-menu",[[1,"dso-dropdown-menu",{"open":[1540],"dropdownAlign":[1,"dropdown-align"],"checkable":[4]}]]],["dso-highlight-box",[[1,"dso-highlight-box",{"yellow":[4],"border":[4],"white":[4],"dropShadow":[4,"drop-shadow"],"step":[2]}]]],["dso-ozon-content",[[0,"dso-ozon-content",{"content":[1]},[[0,"click","handleClick"]]]]],["dso-progress-bar",[[1,"dso-progress-bar",{"progress":[2],"min":[2],"max":[2]}]]],["dso-progress-indicator",[[1,"dso-progress-indicator",{"label":[1],"size":[1],"block":[4]}]]],["dso-tooltip",[[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",[[1,"dso-icon",{"icon":[1]}]]],["dso-info-button",[[1,"dso-info-button",{"active":[1540],"secondary":[4],"label":[1]}]]],["dso-info_2",[[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/types/components/autosuggest/autosuggest.d.ts

@@ -3,17 +3,11 @@ export interface Suggestion {
   value: string;
   type?: string;
 }
-interface SuggestionState extends Suggestion {
-  selected: boolean;
-  id: string;
-}
 export declare class Autosuggest {
   /**
-   * A method that will be called debounced with the input value as its first parameter.
-   * This method will also be called when the input is reduced to an empty string.
-   * @returns A promise with an array of `Suggestion`s. You should limit this array to ten items.
+   * The suggestions for the value of the slotted input element
    */
-  fetchSuggestions?: (value: string) => Promise<Array<Suggestion>>;
+  readonly suggestions: Suggestion[];
   /**
    * Whether the previous suggestions will be presented when the input gets focus again.
    */
@@ -22,18 +16,21 @@ export declare class Autosuggest {
    * Emitted when a suggestion is selected.
    * The `detail` property of the `CustomEvent` will contain the selected suggestion.
    */
-  selected: EventEmitter<string> | undefined;
+  selectEmitter: EventEmitter<Suggestion>;
+  /**
+   * This is emitted debounced for every change for the slotted input type=text element.
+   */
+  changeEmitter: EventEmitter<string>;
   host: HTMLElement;
-  suggestions: Array<SuggestionState>;
-  selectedIndex: number;
-  terms: string[];
   showSuggestions: boolean;
+  selectedSuggestion: Suggestion | undefined;
+  suggestionsWatcher(): void;
   input: HTMLInputElement;
+  listbox: HTMLUListElement | undefined;
   listboxId: string;
   inputId: string;
   labelId: string;
-  listbox: HTMLUListElement | undefined;
-  debouncedFetchSuggestions: ((terms: string[]) => Promise<void>) & {
+  debouncedEmitValue: ((value: string) => CustomEvent<string>) & {
     clear(): void;
   } & {
     flush(): void;
@@ -44,14 +41,16 @@ export declare class Autosuggest {
   connectedCallback(): void;
   disconnectedCallback(): void;
   markTerms(suggestionValue: string, terms: string[]): (VNode | string)[];
-  setSelectedSuggestion(index: number): void;
-  onMouseEnterOption: (event: MouseEvent) => void;
-  onMouseLeaveOption: () => void;
-  onClickOption: () => void;
-  openSuggestions(): void;
+  selectSuggestion(suggestion: Suggestion): void;
+  selectFirstSuggestion(): void;
+  selectLastSuggestion(): void;
+  selectNextSuggestion(): void;
+  selectPreviousSuggestion(): void;
+  resetSelectedSuggestion(): void;
+  openSuggestions(selectSuggestion?: 'first' | 'last'): void;
   closeSuggestions(): void;
   pickSelectedValue(): void;
   onKeyDown: (event: KeyboardEvent) => void;
+  listboxItemId(suggestion: Suggestion): string;
   render(): any;
 }
-export {};

package/dist/types/components/autosuggest/autosuggest.template.d.ts

@@ -1,2 +1,3 @@
-import { Autosuggest } from "@dso-toolkit/sources";
-export declare function autosuggestTemplate({ fetchSuggestions, onSelected, suggestOnFocus, }: Autosuggest): import("lit-html").TemplateResult<1>;
+import { Autosuggest } from '@dso-toolkit/sources';
+import { TemplateResult } from 'lit-html';
+export declare function autosuggestTemplate({ suggestions, onSelect, onChange, suggestOnFocus }: Autosuggest, children: TemplateResult): TemplateResult<1>;

package/dist/types/components/date-picker/date-picker.d.ts

@@ -3,10 +3,15 @@ export declare type DsoDatePickerChangeEvent = {
   component: "dso-date-picker";
   valueAsDate: Date | undefined;
   value: string;
+  error?: "invalid" | "required";
 };
 export declare type DsoDatePickerFocusEvent = {
   component: "dso-date-picker";
 };
+export declare type DsoDatePickerKeyboardEvent = {
+  component: "dso-date-picker";
+  originalEvent: KeyboardEvent;
+};
 export declare type DsoDatePickerDirection = "left" | "right";
 export declare class DsoDatePicker implements ComponentInterface {
   /**
@@ -65,6 +70,10 @@ export declare class DsoDatePicker implements ComponentInterface {
    * Should the input be marked as required?
    */
   required: boolean;
+  /**
+   * Should the input be focused on load?
+   */
+  dsoAutofocus: boolean;
   /**
    * Date value. Must be in Dutch date format: DD-MM-YYYY.
    */
@@ -90,6 +99,14 @@ export declare class DsoDatePicker implements ComponentInterface {
    * Event emitted the date picker input is blurred.
    */
   dsoBlur: EventEmitter<DsoDatePickerFocusEvent>;
+  /**
+   * Event emitted on key up in the date picker input.
+   */
+  dsoKeyUp: EventEmitter<DsoDatePickerKeyboardEvent>;
+  /**
+   * Event emitted on key down in the date picker input.
+   */
+  dsoKeyDown: EventEmitter<DsoDatePickerKeyboardEvent>;
   /**
    * Event emitted the date picker input is focused.
    */
@@ -130,6 +147,8 @@ export declare class DsoDatePicker implements ComponentInterface {
   private toggleOpen;
   private handleEscKey;
   private handleBlur;
+  private handleKeyUp;
+  private handleKeyDown;
   private handleFocus;
   private handleTouchStart;
   private handleTouchMove;
@@ -144,6 +163,7 @@ export declare class DsoDatePicker implements ComponentInterface {
   private handleInputChange;
   private setValue;
   private processFocusedDayNode;
+  componentDidLoad(): void;
   /**
    * render() function
    * Always the last one in the class.

package/dist/types/components/date-picker/date-picker.template.d.ts

@@ -1,5 +1,5 @@
 import { DatePicker } from '@dso-toolkit/sources';
 import { TemplateResult } from 'lit-html';
-export declare function datePickerTemplate({ id, onDateChange, value, min, max, disabled }: DatePicker): TemplateResult<1>;
+export declare function datePickerTemplate({ id, onDateChange, value, min, max, disabled, autofocus }: DatePicker): TemplateResult<1>;
 export declare function datePickerWithLabelTemplate(datePicker: TemplateResult, id: string, label: string): TemplateResult<1>;
 export declare function datePickerShowByScriptingTemplate(datePicker: TemplateResult, id: string): TemplateResult<1>;

package/dist/types/components/icon/icon.d.ts

@@ -1,4 +1,4 @@
 export declare class Icon {
-  icon: string;
+  icon?: string;
   render(): any;
 }

package/dist/types/components/info-button/info-button.d.ts

@@ -5,6 +5,7 @@ export interface InfoButtonToggleEvent {
 }
 export declare class InfoButton {
   active?: boolean;
+  secondary?: boolean;
   label: string;
   toggle: EventEmitter<InfoButtonToggleEvent>;
   private handleToggle;

package/dist/types/components/info-button/info-button.template.d.ts

@@ -1,2 +1,2 @@
 import { InfoButton } from '@dso-toolkit/sources';
-export declare function infoButtonTemplate({ label, active, onClick }: InfoButton): import("lit-html").TemplateResult<1>;
+export declare function infoButtonTemplate({ label, active, secondary, onClick }: InfoButton): import("lit-html").TemplateResult<1>;

package/dist/types/components/label/label.decorator.d.ts

@@ -0,0 +1,3 @@
+import { LabelParameters } from '@dso-toolkit/sources';
+import { TemplateResult } from 'lit-html';
+export declare const decorator: LabelParameters<TemplateResult>['decorator'];

package/dist/types/components/label/label.template.d.ts

@@ -1,2 +1,2 @@
 import { Label } from '@dso-toolkit/sources';
-export declare function labelTemplate({ status, label, button, compact }: Label): import("lit-html").TemplateResult<1>;
+export declare function labelTemplate({ status, label, button, compact, symbol }: Label): import("lit-html").TemplateResult<1>;

package/dist/types/components/toggletip/toggletip.d.ts

@@ -0,0 +1,17 @@
+export declare class Toggletip {
+  host: HTMLElement;
+  active: boolean;
+  label: string;
+  position: "top" | "right" | "bottom" | "left";
+  small?: boolean;
+  secondary?: boolean;
+  infoButton: HTMLDsoInfoButtonElement;
+  button: HTMLButtonElement;
+  componentDidRender(): void;
+  click: () => void;
+  open: () => void;
+  close: () => void;
+  focusOutListener: (event: FocusEvent) => void;
+  keyDownListener: (event: KeyboardEvent) => void;
+  render(): any;
+}

package/dist/types/components/toggletip/toggletip.template.d.ts

@@ -0,0 +1,2 @@
+import { Toggletip } from "@dso-toolkit/sources";
+export declare function toggletipTemplate({ children, label, position, small, secondary, }: Toggletip): import("lit-html").TemplateResult<1>;