@dso-toolkit/core 45.1.0 → 46.0.0

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

@@ -1,5 +1,5 @@
-import { r as registerInstance, h, H as Host, a as getElement } from './index-771c1291.js';
-import { c as clsx } from './clsx.m-071989db.js';
+import { r as registerInstance, h, H as Host, a as getElement } from './index-1a4dda48.js';
+import { c as clsx } from './clsx.m-25174a58.js';
 
 var top = 'top';
 var bottom = 'bottom';
@@ -161,38 +161,57 @@ var max = Math.max;
 var min = Math.min;
 var round = Math.round;
 
-function getBoundingClientRect(element, includeScale) {
+function getUAString() {
+  var uaData = navigator.userAgentData;
+
+  if (uaData != null && uaData.brands) {
+    return uaData.brands.map(function (item) {
+      return item.brand + "/" + item.version;
+    }).join(' ');
+  }
+
+  return navigator.userAgent;
+}
+
+function isLayoutViewport() {
+  return !/^((?!chrome|android).)*safari/i.test(getUAString());
+}
+
+function getBoundingClientRect(element, includeScale, isFixedStrategy) {
   if (includeScale === void 0) {
     includeScale = false;
   }
 
-  var rect = element.getBoundingClientRect();
+  if (isFixedStrategy === void 0) {
+    isFixedStrategy = false;
+  }
+
+  var clientRect = element.getBoundingClientRect();
   var scaleX = 1;
   var scaleY = 1;
 
-  if (isHTMLElement(element) && includeScale) {
-    var offsetHeight = element.offsetHeight;
-    var offsetWidth = element.offsetWidth; // Do not attempt to divide by 0, otherwise we get `Infinity` as scale
-    // Fallback to 1 in case both values are `0`
-
-    if (offsetWidth > 0) {
-      scaleX = round(rect.width) / offsetWidth || 1;
-    }
-
-    if (offsetHeight > 0) {
-      scaleY = round(rect.height) / offsetHeight || 1;
-    }
+  if (includeScale && isHTMLElement(element)) {
+    scaleX = element.offsetWidth > 0 ? round(clientRect.width) / element.offsetWidth || 1 : 1;
+    scaleY = element.offsetHeight > 0 ? round(clientRect.height) / element.offsetHeight || 1 : 1;
   }
 
+  var _ref = isElement(element) ? getWindow(element) : window,
+      visualViewport = _ref.visualViewport;
+
+  var addVisualOffsets = !isLayoutViewport() && isFixedStrategy;
+  var x = (clientRect.left + (addVisualOffsets && visualViewport ? visualViewport.offsetLeft : 0)) / scaleX;
+  var y = (clientRect.top + (addVisualOffsets && visualViewport ? visualViewport.offsetTop : 0)) / scaleY;
+  var width = clientRect.width / scaleX;
+  var height = clientRect.height / scaleY;
   return {
-    width: rect.width / scaleX,
-    height: rect.height / scaleY,
-    top: rect.top / scaleY,
-    right: rect.right / scaleX,
-    bottom: rect.bottom / scaleY,
-    left: rect.left / scaleX,
-    x: rect.left / scaleX,
-    y: rect.top / scaleY
+    width: width,
+    height: height,
+    top: y,
+    right: x + width,
+    bottom: y + height,
+    left: x,
+    x: x,
+    y: y
   };
 }
 
@@ -287,8 +306,8 @@ function getTrueOffsetParent(element) {
 
 
 function getContainingBlock(element) {
-  var isFirefox = navigator.userAgent.toLowerCase().indexOf('firefox') !== -1;
-  var isIE = navigator.userAgent.indexOf('Trident') !== -1;
+  var isFirefox = /firefox/i.test(getUAString());
+  var isIE = /Trident/i.test(getUAString());
 
   if (isIE && isHTMLElement(element)) {
     // In IE 9, 10 and 11 fixed elements containing block is always established by the viewport
@@ -709,31 +728,21 @@ function getWindowScrollBarX(element) {
   return getBoundingClientRect(getDocumentElement(element)).left + getWindowScroll(element).scrollLeft;
 }
 
-function getViewportRect(element) {
+function getViewportRect(element, strategy) {
   var win = getWindow(element);
   var html = getDocumentElement(element);
   var visualViewport = win.visualViewport;
   var width = html.clientWidth;
   var height = html.clientHeight;
   var x = 0;
-  var y = 0; // NB: This isn't supported on iOS <= 12. If the keyboard is open, the popper
-  // can be obscured underneath it.
-  // Also, `html.clientHeight` adds the bottom bar height in Safari iOS, even
-  // if it isn't open, so if this isn't available, the popper will be detected
-  // to overflow the bottom of the screen too early.
+  var y = 0;
 
   if (visualViewport) {
     width = visualViewport.width;
-    height = visualViewport.height; // Uses Layout Viewport (like Chrome; Safari does not currently)
-    // In Chrome, it returns a value very close to 0 (+/-) but contains rounding
-    // errors due to floating point numbers, so we need to check precision.
-    // Safari returns a number <= 0, usually < -1 when pinch-zoomed
-    // Feature detection fails in mobile emulation mode in Chrome.
-    // Math.abs(win.innerWidth / visualViewport.scale - visualViewport.width) <
-    // 0.001
-    // Fallback here: "Not Safari" userAgent
-
-    if (!/^((?!chrome|android).)*safari/i.test(navigator.userAgent)) {
+    height = visualViewport.height;
+    var layoutViewport = isLayoutViewport();
+
+    if (layoutViewport || !layoutViewport && strategy === 'fixed') {
       x = visualViewport.offsetLeft;
       y = visualViewport.offsetTop;
     }
@@ -827,8 +836,8 @@ function rectToClientRect(rect) {
   });
 }
 
-function getInnerBoundingClientRect(element) {
-  var rect = getBoundingClientRect(element);
+function getInnerBoundingClientRect(element, strategy) {
+  var rect = getBoundingClientRect(element, false, strategy === 'fixed');
   rect.top = rect.top + element.clientTop;
   rect.left = rect.left + element.clientLeft;
   rect.bottom = rect.top + element.clientHeight;
@@ -840,8 +849,8 @@ function getInnerBoundingClientRect(element) {
   return rect;
 }
 
-function getClientRectFromMixedType(element, clippingParent) {
-  return clippingParent === viewport ? rectToClientRect(getViewportRect(element)) : isElement(clippingParent) ? getInnerBoundingClientRect(clippingParent) : rectToClientRect(getDocumentRect(getDocumentElement(element)));
+function getClientRectFromMixedType(element, clippingParent, strategy) {
+  return clippingParent === viewport ? rectToClientRect(getViewportRect(element, strategy)) : isElement(clippingParent) ? getInnerBoundingClientRect(clippingParent, strategy) : rectToClientRect(getDocumentRect(getDocumentElement(element)));
 } // A "clipping parent" is an overflowable container with the characteristic of
 // clipping (or hiding) overflowing elements with a position different from
 // `initial`
@@ -864,18 +873,18 @@ function getClippingParents(element) {
 // clipping parents
 
 
-function getClippingRect(element, boundary, rootBoundary) {
+function getClippingRect(element, boundary, rootBoundary, strategy) {
   var mainClippingParents = boundary === 'clippingParents' ? getClippingParents(element) : [].concat(boundary);
   var clippingParents = [].concat(mainClippingParents, [rootBoundary]);
   var firstClippingParent = clippingParents[0];
   var clippingRect = clippingParents.reduce(function (accRect, clippingParent) {
-    var rect = getClientRectFromMixedType(element, clippingParent);
+    var rect = getClientRectFromMixedType(element, clippingParent, strategy);
     accRect.top = max(rect.top, accRect.top);
     accRect.right = min(rect.right, accRect.right);
     accRect.bottom = min(rect.bottom, accRect.bottom);
     accRect.left = max(rect.left, accRect.left);
     return accRect;
-  }, getClientRectFromMixedType(element, firstClippingParent));
+  }, getClientRectFromMixedType(element, firstClippingParent, strategy));
   clippingRect.width = clippingRect.right - clippingRect.left;
   clippingRect.height = clippingRect.bottom - clippingRect.top;
   clippingRect.x = clippingRect.left;
@@ -956,6 +965,8 @@ function detectOverflow(state, options) {
   var _options = options,
       _options$placement = _options.placement,
       placement = _options$placement === void 0 ? state.placement : _options$placement,
+      _options$strategy = _options.strategy,
+      strategy = _options$strategy === void 0 ? state.strategy : _options$strategy,
       _options$boundary = _options.boundary,
       boundary = _options$boundary === void 0 ? clippingParents : _options$boundary,
       _options$rootBoundary = _options.rootBoundary,
@@ -970,7 +981,7 @@ function detectOverflow(state, options) {
   var altContext = elementContext === popper ? reference : popper;
   var popperRect = state.rects.popper;
   var element = state.elements[altBoundary ? altContext : elementContext];
-  var clippingClientRect = getClippingRect(isElement(element) ? element : element.contextElement || getDocumentElement(state.elements.popper), boundary, rootBoundary);
+  var clippingClientRect = getClippingRect(isElement(element) ? element : element.contextElement || getDocumentElement(state.elements.popper), boundary, rootBoundary, strategy);
   var referenceClientRect = getBoundingClientRect(state.elements.reference);
   var popperOffsets = computeOffsets({
     reference: referenceClientRect,
@@ -1484,7 +1495,7 @@ function getCompositeRect(elementOrVirtualElement, offsetParent, isFixed) {
   var isOffsetParentAnElement = isHTMLElement(offsetParent);
   var offsetParentIsScaled = isHTMLElement(offsetParent) && isElementScaled(offsetParent);
   var documentElement = getDocumentElement(offsetParent);
-  var rect = getBoundingClientRect(elementOrVirtualElement, offsetParentIsScaled);
+  var rect = getBoundingClientRect(elementOrVirtualElement, offsetParentIsScaled, isFixed);
   var scroll = {
     scrollLeft: 0,
     scrollTop: 0
@@ -1828,40 +1839,19 @@ const tooltipCss = ":host(.hidden){visibility:hidden}:host-context(dso-toggletip
 const transitionDuration = 150;
 function hasOverflow(el) {
   const style = window.getComputedStyle(el);
-  const overflowX = style.getPropertyValue('overflow-x');
-  const overflowY = style.getPropertyValue('overflow-y');
-  const overflowValues = ['hidden', 'clip'];
-  return overflowValues.indexOf(overflowX) != -1 || overflowValues.indexOf(overflowY) != -1;
+  const overflowX = style.getPropertyValue("overflow-x");
+  const overflowY = style.getPropertyValue("overflow-y");
+  const overflowValues = ["hidden", "clip"];
+  return overflowValues.indexOf(overflowX) !== -1 || overflowValues.indexOf(overflowY) !== -1;
 }
-let Tooltip = class {
+const Tooltip = class {
   constructor(hostRef) {
     registerInstance(this, hostRef);
-    /**
-     * Defines if the tooltip is descriptive. A descriptive tooltip contains a meaningful message. Tooltips that are not descriptive are hidden from screenreaders using `aria-hidden`.
-     */
-    this.descriptive = false;
-    /**
-     * Set position of tooltip relative to target
-     */
-    this.position = 'top';
-    /**
-     * Set position strategy of tooltip
-     */
-    this.strategy = 'auto';
-    /**
-     * Set attribute `no-arrow` to hide the arrow
-     */
-    this.noArrow = false;
-    /**
-     * Whether or not to show the tooltip. To control the tooltip add the `active` attribute or use the `activate()` and `deactivate()` instance methods.
-     */
-    this.active = false;
-    this.hidden = true;
     this.applyMaxSize = {
-      name: 'applyMaxSize',
+      name: "applyMaxSize",
       enabled: true,
       phase: beforeWrite,
-      requires: ['maxSize'],
+      requires: ["maxSize"],
       fn({ state }) {
         let { width } = state.modifiersData.maxSize;
         if (width < 160) {
@@ -1871,10 +1861,19 @@ let Tooltip = class {
       },
     };
     this.keyDownListener = (event) => {
-      if (event.key === 'Escape') {
+      if (event.key === "Escape") {
         this.deactivate();
       }
     };
+    this.descriptive = false;
+    this.position = "top";
+    this.strategy = "auto";
+    this.for = undefined;
+    this.noArrow = false;
+    this.stateless = undefined;
+    this.small = undefined;
+    this.active = false;
+    this.hidden = true;
   }
   /**
    * Activate the tooltip (Sets the `active` attribute)
@@ -1893,7 +1892,7 @@ let Tooltip = class {
       return;
     }
     this.popper.setOptions({
-      placement: this.position
+      placement: this.position,
     });
   }
   watchStrategy() {
@@ -1903,24 +1902,24 @@ let Tooltip = class {
     if (!this.popper) {
       return;
     }
-    if (this.strategy == 'absolute' || this.strategy == 'fixed') {
+    if (this.strategy === "absolute" || this.strategy === "fixed") {
       this.popper.setOptions({
         strategy: this.strategy,
       });
       return;
     }
     let element = this.element;
-    while ((element === null || element === void 0 ? void 0 : element.parentNode) != null && element.parentNode != document) {
+    while (element && element.parentNode !== document) {
       element = element.parentNode instanceof ShadowRoot ? element.parentNode.host : element.parentElement;
-      if (element != null && hasOverflow(element)) {
+      if (element !== null && hasOverflow(element)) {
         this.popper.setOptions({
-          strategy: 'fixed',
+          strategy: "fixed",
         });
         return;
       }
     }
     this.popper.setOptions({
-      strategy: 'absolute',
+      strategy: "absolute",
     });
   }
   watchActive() {
@@ -1931,18 +1930,18 @@ let Tooltip = class {
         setTimeout(() => {
           var _a;
           (_a = this.popper) === null || _a === void 0 ? void 0 : _a.setOptions({
-            modifiers: [{ name: 'eventListeners', enabled: true }]
+            modifiers: [{ name: "eventListeners", enabled: true }],
           });
-          document.addEventListener('keydown', this.keyDownListener);
+          document.addEventListener("keydown", this.keyDownListener);
         });
       }
     }
     else {
       if (!this.stateless) {
         (_a = this.popper) === null || _a === void 0 ? void 0 : _a.setOptions({
-          modifiers: [{ name: 'eventListeners', enabled: false }]
+          modifiers: [{ name: "eventListeners", enabled: false }],
         });
-        document.removeEventListener('keydown', this.keyDownListener);
+        document.removeEventListener("keydown", this.keyDownListener);
       }
       setTimeout(() => (this.hidden = true), transitionDuration);
     }
@@ -1955,9 +1954,9 @@ let Tooltip = class {
     if (this.popper) {
       return;
     }
-    const tooltip = (_a = this.element.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('.tooltip');
+    const tooltip = (_a = this.element.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector(".tooltip");
     if (!(tooltip instanceof HTMLElement)) {
-      throw new Error('tooltip element is not instanceof HTMLElement');
+      throw new Error("tooltip element is not instanceof HTMLElement");
     }
     this.target = this.getTarget();
     this.popper = createPopper(this.target, tooltip, {
@@ -1966,23 +1965,23 @@ let Tooltip = class {
     });
     this.callbacks = {
       activate: () => (this.active = true),
-      deactivate: () => (this.active = false)
+      deactivate: () => (this.active = false),
     };
     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);
+      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.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);
-      this.target.removeEventListener('blur', this.callbacks.deactivate);
+      this.target.removeEventListener("mouseenter", this.callbacks.activate);
+      this.target.removeEventListener("mouseleave", this.callbacks.deactivate);
+      this.target.removeEventListener("focus", this.callbacks.activate);
+      this.target.removeEventListener("blur", this.callbacks.deactivate);
     }
     this.callbacks = undefined;
     this.target = undefined;
@@ -1995,13 +1994,13 @@ let Tooltip = class {
     }
   }
   render() {
-    return (h(Host, { class: { 'hidden': this.hidden } }, h("div", { class: clsx('tooltip', { in: this.active }) }, !this.noArrow && h("div", { "data-popper-arrow": true, class: "tooltip-arrow" }), h("div", { "aria-hidden": !this.descriptive || undefined, class: clsx('tooltip-inner', { 'dso-small': this.small }) }, h("slot", null)))));
+    return (h(Host, { class: { hidden: this.hidden } }, h("div", { class: clsx("tooltip", { in: this.active }) }, !this.noArrow && h("div", { "data-popper-arrow": true, class: "tooltip-arrow" }), h("div", { "aria-hidden": !this.descriptive || undefined, 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') {
+    if (typeof this.for === "string") {
       const rootNode = this.element.getRootNode();
       if (!(rootNode instanceof Document || rootNode instanceof ShadowRoot)) {
         throw new Error(`rootNode is not instance of Document or ShadowRoot`);
@@ -2014,7 +2013,7 @@ let Tooltip = class {
     }
     const { parentElement } = this.element;
     if (!parentElement) {
-      throw new Error('No reference given with [for] attribute but no parent found either');
+      throw new Error("No reference given with [for] attribute but no parent found either");
     }
     return parentElement;
   }

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

@@ -1,29 +1,21 @@
-import { h, F as Fragment, r as registerInstance, c as createEvent } from './index-771c1291.js';
-import { c as clsx } from './clsx.m-071989db.js';
+import { h, F as Fragment, r as registerInstance, c as createEvent } from './index-1a4dda48.js';
+import { c as clsx } from './clsx.m-25174a58.js';
 
-const DsoTreeItem = ({ owner, ancestors, item, index, level, setSize }) => {
+const DsoTreeItem = ({ owner, ancestors, item, index, level, setSize, }) => {
   var _a, _b, _c, _d;
-  return (h("li", { key: item.id, class: clsx('tree-item', { 'has-child': item.hasItems, 'is-expanded': (!!item.open && !!((_a = item.items) === null || _a === void 0 ? void 0 : _a.length)) }), 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 ? 'minus-square' : 'plus-square' }))
-      : h("dso-icon", null)),
-    h("p", { class: clsx('tree-content', { 'active': item.active }, { 'selected': item.selected }), tabindex: level === 1 && index === 0 ? 0 : -1, role: "treeitem", "aria-expanded": item.hasItems ? '' + (!!item.open && !!((_b = item.items) === null || _b === void 0 ? void 0 : _b.length)) : undefined, "aria-current": item.active ? 'true' : undefined, "aria-level": level, "aria-setsize": setSize, "aria-posinset": index + 1, "aria-busy": item.loading ? 'true' : undefined, "data-item-id": item.id, onClick: (e) => owner.itemClick(e, ancestors, item) },
+  return (h("li", { key: item.id, class: clsx("tree-item", { "has-child": item.hasItems, "is-expanded": !!item.open && !!((_a = item.items) === null || _a === void 0 ? void 0 : _a.length) }), 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 ? "minus-square" : "plus-square" }))) : (h("dso-icon", null))),
+    h("p", { class: clsx("tree-content", { active: item.active }, { selected: item.selected }), tabindex: level === 1 && index === 0 ? 0 : -1, role: "treeitem", "aria-expanded": item.hasItems ? "" + (!!item.open && !!((_b = item.items) === null || _b === void 0 ? void 0 : _b.length)) : undefined, "aria-current": item.active ? "true" : undefined, "aria-level": level, "aria-setsize": setSize, "aria-posinset": index + 1, "aria-busy": item.loading ? "true" : undefined, "data-item-id": item.id, onClick: (e) => owner.itemClick(e, ancestors, item) },
       item.selected && h("span", { class: "sr-only" }, "Resultaat: "),
-      item.href
-        ? h("a", { href: item.href, tabindex: "-1" }, item.label)
-        : h("span", null, item.label), (_c = item.icons) === null || _c === void 0 ? void 0 :
-      _c.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" }, (_d = item.items) === null || _d === void 0 ? void 0 : _d.map((childItem, index, org) => h(DsoTreeItem, { owner: owner, ancestors: [...ancestors, item], item: childItem, index: index, level: level + 1, setSize: org.length }))))));
+      item.href ? (h("a", { href: item.href, tabindex: "-1" }, item.label)) : (h("span", null, item.label)), (_c = item.icons) === null || _c === void 0 ? void 0 :
+      _c.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" }, (_d = item.items) === null || _d === void 0 ? void 0 : _d.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;padding-inline-start:32px;position:relative}:host li{position:relative}:host ul[role=tree]{padding-left:0}:host ul[role=group]::before{border-left:1px solid #275937;content:\"\";height:8px;left:44px;position:absolute;top:0;width:0}:host li:not(.has-child)::before{border-top:1px solid #275937;content:\"\";height:0;left:12px;position:absolute;top:20px;width:16px}:host li:not(.has-child)::after{border-left:1px solid #275937;content:\"\";height:100%;left:12px;position:absolute;top:8px;width:0}:host li:not(.has-child):last-child::after{height:20px;top:0}:host li.has-child::before{border-top:1px solid #275937;content:\"\";height:0;left:24px;position:absolute;top:20px;width:4px}:host li.has-child:not(:last-child)::after{border-left:1px solid #275937;content:\"\";height:calc(100% - 24px);left:12px;position:absolute;top:32px;width:0}:host li.has-child.is-expanded:last-child::after{border-left:1px solid #275937;content:\"\";height:calc(100% - 32px);left:12px;position:absolute;top:32px;width:0}:host .tree-branch-control{color:#39870c;display:inline-block;font-size:16px;margin:8px 8px 8px 0;vertical-align:top}:host .tree-branch-control>div{cursor:pointer}:host .tree-content{cursor:pointer;display:inline-block;margin:8px 0;max-width:calc(100% - 40px)}:host .tree-content a{color:#191919;text-decoration:underline}:host .tree-content a:hover,:host .tree-content a:focus{color:#191919;text-decoration:none}:host .tree-content a:active{text-decoration:none}:host .tree-content.selected{color:#191919;font-weight:700;text-decoration:underline}:host .tree-content.selected:hover,:host .tree-content.selected:focus{text-decoration:none}:host .tree-content.active{color:#8b4a6a;font-style:italic;font-weight:700;text-decoration:underline}:host .tree-content.active:hover,:host .tree-content.active:focus{text-decoration:none}:host .tree-content.active a{color:#8b4a6a}:host .tree-content.active a:hover,:host .tree-content.active a:focus{text-decoration:none}:host .tree-content dso-icon{color:#39870c;font-size:0.75em;margin-left:0.5em;vertical-align:text-bottom}*,*::after,*::before{box-sizing:border-box}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);border:0}";
 
-let TreeView = class {
+const TreeView = class {
   constructor(hostRef) {
     registerInstance(this, hostRef);
     this.dsoOpenItem = createEvent(this, "dsoOpenItem", 7);
@@ -34,16 +26,18 @@ let TreeView = class {
         return;
       }
       const isIndexLetter = (str) => str.length === 1 && str.match(/\S/);
-      const tree = event.composedPath().find(item => (item instanceof HTMLElement) ? item.className === 'dso-tree' : false);
+      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');
+          TreeView.moveFocus(tree, event.target, "next");
           break;
         case "ArrowUp":
-          TreeView.moveFocus(tree, event.target, 'previous');
+          TreeView.moveFocus(tree, event.target, "previous");
           break;
         case "ArrowRight":
           TreeView.expandItemOrFocusChild(tree, event.target);
@@ -52,10 +46,10 @@ let TreeView = class {
           TreeView.collapseItemOrFocusParent(tree, event.target);
           break;
         case "End":
-          TreeView.moveFocus(tree, event.target, 'last');
+          TreeView.moveFocus(tree, event.target, "last");
           break;
         case "Home":
-          TreeView.moveFocus(tree, event.target, 'first');
+          TreeView.moveFocus(tree, event.target, "first");
           break;
         case "Enter":
         case " ":
@@ -75,9 +69,11 @@ let TreeView = class {
       if (!(event.target instanceof HTMLElement)) {
         return;
       }
-      const contentElement = event.target.closest('.tree-content');
+      const contentElement = event.target.closest(".tree-content");
       if (contentElement) {
-        const tree = event.composedPath().find(item => (item instanceof HTMLElement) ? item.className === 'dso-tree' : false);
+        const tree = event
+          .composedPath()
+          .find((item) => (item instanceof HTMLElement ? item.className === "dso-tree" : false));
         if (!(contentElement instanceof HTMLParagraphElement) || !(tree instanceof HTMLElement)) {
           return;
         }
@@ -92,6 +88,7 @@ let TreeView = class {
         this.dsoOpenItem.emit([...ancestors, item]);
       }
     };
+    this.collection = undefined;
   }
   /**
    * Set focus on the last item in the specified path.
@@ -106,9 +103,9 @@ let TreeView = class {
       return false;
     }
     const itemToFocus = path[path.length - 1];
-    const elementToFocus = Array.from((_a = tree.querySelectorAll('p')) !== null && _a !== void 0 ? _a : [])
-      .filter(item => item.offsetWidth > 0 && item.offsetHeight > 0)
-      .find(item => item.dataset['itemId'] === itemToFocus.id);
+    const elementToFocus = Array.from((_a = tree.querySelectorAll("p")) !== null && _a !== void 0 ? _a : [])
+      .filter((item) => item.offsetWidth > 0 && item.offsetHeight > 0)
+      .find((item) => item.dataset["itemId"] === itemToFocus.id);
     if (!elementToFocus) {
       return false;
     }
@@ -117,28 +114,27 @@ let TreeView = class {
   }
   static setFocus(tree, target) {
     if (target) {
-      Array.from(tree.querySelectorAll('p'))
-        .filter(item => item.tabIndex === 0)
-        .forEach(item => item.tabIndex = -1);
+      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);
+    const focusableItems = Array.from(tree.querySelectorAll("p")).filter((item) => item.offsetWidth > 0 && item.offsetHeight > 0);
     let index = 0;
     switch (moveTo) {
-      case 'first':
+      case "first":
         index = 0;
         break;
-      case 'previous':
+      case "previous":
         index = focusableItems.indexOf(el) - 1;
         break;
-      case 'next':
+      case "next":
         index = focusableItems.indexOf(el) + 1;
         break;
-      case 'last':
+      case "last":
         index = focusableItems.length - 1;
         break;
     }
@@ -146,8 +142,8 @@ let TreeView = class {
   }
   static expandItemOrFocusChild(tree, target) {
     var _a;
-    if ((target === null || target === void 0 ? void 0 : target.getAttribute('aria-expanded')) === 'true') {
-      TreeView.moveFocus(tree, target, 'next');
+    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;
@@ -158,7 +154,7 @@ let TreeView = class {
   }
   static collapseItemOrFocusParent(tree, target) {
     var _a, _b, _c;
-    if ((target === null || target === void 0 ? void 0 : target.getAttribute('aria-expanded')) === 'true') {
+    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();
@@ -172,8 +168,7 @@ let TreeView = class {
     }
   }
   static setFocusByFirstCharacter(tree, el, char, backwards) {
-    const focusableItems = Array.from(tree.querySelectorAll('p'))
-      .filter(item => item.offsetWidth > 0 && item.offsetHeight > 0);
+    const focusableItems = Array.from(tree.querySelectorAll("p")).filter((item) => item.offsetWidth > 0 && item.offsetHeight > 0);
     if (backwards) {
       focusableItems.reverse();
     }
@@ -191,7 +186,7 @@ let TreeView = class {
   }
   render() {
     var _a;
-    return (h("div", { id: "tree", class: "dso-tree", onKeyDown: (e) => this.keyDownListener(e), ref: element => this.tree = element }, 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 })))));
+    return (h("div", { id: "tree", class: "dso-tree", onKeyDown: (e) => this.keyDownListener(e), ref: (element) => (this.tree = element) }, 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;