@dso-toolkit/core 30.1.0 → 32.0.0

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

@@ -30,7 +30,8 @@ var default_fqdn_options = {
   require_tld: true,
   allow_underscores: false,
   allow_trailing_dot: false,
-  allow_numeric_tld: false
+  allow_numeric_tld: false,
+  allow_wildcard: false
 };
 function isFQDN(str, options) {
   assertString(str);
@@ -40,6 +41,12 @@ function isFQDN(str, options) {
   if (options.allow_trailing_dot && str[str.length - 1] === '.') {
     str = str.substring(0, str.length - 1);
   }
+  /* Remove the optional wildcard before checking validity */
+
+
+  if (options.allow_wildcard === true && str.indexOf('*.') === 0) {
+    str = str.substring(2);
+  }
 
   var parts = str.split('.');
   var tld = parts[parts.length - 1];
@@ -50,12 +57,12 @@ function isFQDN(str, options) {
       return false;
     }
 
-    if (!/^([a-z\u00a1-\uffff]{2,}|xn[a-z0-9-]{2,})$/i.test(tld)) {
+    if (!/^([a-z\u00A1-\u00A8\u00AA-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]{2,}|xn[a-z0-9-]{2,})$/i.test(tld)) {
       return false;
-    } // disallow spaces && special characers
+    } // disallow spaces
 
 
-    if (/[\s\u2002-\u200B\u202F\u205F\u3000\uFEFF\uDB40\uDC20\u00A9\uFFFD]/.test(tld)) {
+    if (/\s/.test(tld)) {
       return false;
     }
   } // reject numeric TLDs
@@ -154,6 +161,17 @@ function isIP(str) {
   return false;
 }
 
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
+
+function _iterableToArrayLimit(arr, i) { if (typeof Symbol === "undefined" || !(Symbol.iterator in Object(arr))) return; var _arr = []; var _n = true; var _d = false; var _e = undefined; try { for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
+
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 /*
 options for isURL method
 
@@ -177,6 +195,8 @@ var default_url_options = {
   allow_underscores: false,
   allow_trailing_dot: false,
   allow_protocol_relative_urls: false,
+  allow_fragments: true,
+  allow_query_components: true,
   validate_length: true
 };
 var wrapped_ipv6 = /^\[([^\]]+)\](?::([0-9]+))?$/;
@@ -214,6 +234,14 @@ function isURL(url, options) {
     return false;
   }
 
+  if (!options.allow_fragments && url.includes('#')) {
+    return false;
+  }
+
+  if (!options.allow_query_components && (url.includes('?') || url.includes('&'))) {
+    return false;
+  }
+
   var protocol, auth, host, hostname, port, port_str, split, ipv6;
   split = url.split('#');
   url = split.shift();
@@ -257,7 +285,7 @@ function isURL(url, options) {
       return false;
     }
 
-    if (split[0] === '' || split[0].substr(0, 1) === ':') {
+    if (split[0] === '') {
       return false;
     }
 
@@ -266,6 +294,15 @@ function isURL(url, options) {
     if (auth.indexOf(':') >= 0 && auth.split(':').length > 2) {
       return false;
     }
+
+    var _auth$split = auth.split(':'),
+        _auth$split2 = _slicedToArray(_auth$split, 2),
+        user = _auth$split2[0],
+        password = _auth$split2[1];
+
+    if (user === '' && password === '') {
+      return false;
+    }
   }
 
   hostname = split.join('@');
@@ -286,7 +323,7 @@ function isURL(url, options) {
     }
   }
 
-  if (port_str !== null) {
+  if (port_str !== null && port_str.length > 0) {
     port = parseInt(port_str, 10);
 
     if (!/^[0-9]+$/.test(port_str) || port <= 0 || port > 65535) {
@@ -296,16 +333,16 @@ function isURL(url, options) {
     return false;
   }
 
+  if (options.host_whitelist) {
+    return checkHost(host, options.host_whitelist);
+  }
+
   if (!isIP(host) && !isFQDN(host, options) && (!ipv6 || !isIP(ipv6, 6))) {
     return false;
   }
 
   host = host || ipv6;
 
-  if (options.host_whitelist && !checkHost(host, options.host_whitelist)) {
-    return false;
-  }
-
   if (options.host_blacklist && checkHost(host, options.host_blacklist)) {
     return false;
   }
@@ -314,7 +351,7 @@ function isURL(url, options) {
 }
 
 function transformDescriptionNote(body) {
-  body.querySelectorAll('.od-Al > div.noot').forEach((nootElement, index) => {
+  body.querySelectorAll('div.noot').forEach((nootElement, index) => {
     const contentElement = nootElement.nextElementSibling;
     if (!(contentElement instanceof HTMLDivElement && contentElement.classList.value === 'noot_popup')) {
       return;

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",{"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"],"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",{"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"],"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/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>;