@dso-toolkit/core 52.0.1 → 52.0.2

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

@@ -2,29 +2,17 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-ecec64a0.js');
+const index$1 = require('./index-ecec64a0.js');
 const clsx_m = require('./clsx.m-b81c6b86.js');
+const index = require('./index-794ad37a.js');
 
-const mutationObserver = new MutationObserver((entries) => {
-  entries.forEach((entry) => {
-    const component = entry.target;
-    if (isDsoLabelComponent$1(component)) {
-      component.updateTooltipText();
+const resizeObserver = new ResizeObserver(index.debounce_1.debounce((entries) => {
+  entries.forEach(({ target }) => {
+    if (isDsoLabelComponent(target)) {
+      target.truncateLabel();
     }
   });
-});
-function isDsoLabelComponent$1(element) {
-  return element.updateTooltipText !== undefined;
-}
-
-const resizeObserver = new ResizeObserver((entries) => {
-  entries.forEach((entry) => {
-    const component = entry.target;
-    if (isDsoLabelComponent(component)) {
-      component.truncateLabel();
-    }
-  });
-});
+}, 150));
 function isDsoLabelComponent(element) {
   return element.truncateLabel !== undefined;
 }
@@ -36,8 +24,8 @@ function hasEllipses(el) {
 }
 const Label = class {
   constructor(hostRef) {
-    index.registerInstance(this, hostRef);
-    this.dsoRemoveClick = index.createEvent(this, "dsoRemoveClick", 7);
+    index$1.registerInstance(this, hostRef);
+    this.dsoRemoveClick = index$1.createEvent(this, "dsoRemoveClick", 7);
     this.keydownListenerActive = false;
     this.keyDownListener = (event) => {
       if (event.key === "Escape") {
@@ -53,8 +41,8 @@ const Label = class {
     this.truncate = undefined;
     this.textHover = undefined;
     this.textFocus = undefined;
-    this.truncatedContent = undefined;
-    this.labelText = undefined;
+    this.isTruncated = undefined;
+    this.labelText = null;
   }
   watchTruncate(truncate) {
     if (truncate) {
@@ -76,54 +64,61 @@ const Label = class {
   }
   async truncateLabel() {
     setTimeout(() => {
-      if (this.labelContent) {
-        this.truncatedContent = hasEllipses(this.labelContent) ? this.host.innerText : undefined;
-      }
+      this.isTruncated = this.labelContent && hasEllipses(this.labelContent);
     });
   }
-  async updateTooltipText() {
-    this.labelText = this.host.innerText;
-    if (this.truncate) {
-      this.truncateLabel();
-    }
+  /** **[Internal]** Synchronizes the text on the remove button and tooltip. You should never have to use this. */
+  async syncLabelText() {
+    this.labelText = this.host.textContent;
   }
   componentDidLoad() {
-    this.labelText = this.host.innerText;
-    mutationObserver.observe(this.host, {
-      attributes: true,
-      subtree: true,
-    });
     if (this.truncate) {
       this.startTruncate();
     }
+    if (this.removable) {
+      this.startMutationObserver();
+    }
   }
   disconnectedCallback() {
-    mutationObserver === null || mutationObserver === void 0 ? void 0 : mutationObserver.disconnect();
     this.stopTruncate();
   }
+  /** The mutationObserver fetches the text placed inside the label, this is then used for the remove button and tooltip. */
+  startMutationObserver() {
+    if (this.mutationObserver) {
+      return;
+    }
+    this.mutationObserver = new MutationObserver((entries) => entries.forEach(() => this.syncLabelText()));
+    this.mutationObserver.observe(this.host, {
+      characterData: true,
+      subtree: true,
+      attributes: true,
+    });
+    this.labelText = this.host.textContent;
+  }
   startTruncate() {
     resizeObserver.observe(this.host);
+    this.startMutationObserver();
     this.truncateLabel();
   }
   stopTruncate() {
     document.removeEventListener("keydown", this.keyDownListener);
     resizeObserver.unobserve(this.host);
-    this.truncatedContent = undefined;
+    this.isTruncated = undefined;
     this.keydownListenerActive = false;
   }
   render() {
     const status = this.status && Label.statusMap.get(this.status);
-    return (index.h(index.Host, { "aria-roledescription": this.truncate && this.truncatedContent
+    return (index$1.h(index$1.Host, { "aria-roledescription": this.truncate && this.isTruncated
         ? "Deze tekst is visueel afgekapt en wordt volledig zichtbaar bij focus."
-        : undefined }, index.h("span", { "aria-describedby": "toggle-anchor", class: clsx_m.clsx("dso-label", {
+        : undefined }, index$1.h("span", { "aria-describedby": "toggle-anchor", class: clsx_m.clsx("dso-label", {
         [`dso-label-${this.status}`]: this.status,
         "dso-compact": this.compact && !this.removable,
         "dso-hover": this.removeHover || this.removeFocus,
-      }) }, index.h("slot", { name: "symbol" }), status && index.h("span", { class: "sr-only" }, status, ": "), index.h("span", { class: clsx_m.clsx("dso-label-content", {
+      }) }, index$1.h("slot", { name: "symbol" }), status && index$1.h("span", { class: "sr-only" }, status, ": "), index$1.h("span", { class: clsx_m.clsx("dso-label-content", {
         "dso-truncate": !!this.truncate,
-      }), ref: (element) => (this.labelContent = element), tabindex: this.truncate && this.truncatedContent ? 0 : undefined, onMouseEnter: () => (this.textHover = true), onMouseLeave: () => (this.textHover = false), onFocus: () => (this.textFocus = true), onBlur: () => (this.textFocus = false) }, index.h("slot", null)), this.removable && (index.h("button", { type: "button", onClick: (e) => this.dsoRemoveClick.emit(e), onMouseEnter: () => (this.removeHover = true), onMouseLeave: () => (this.removeHover = false), onFocus: () => (this.removeFocus = true), onBlur: () => (this.removeFocus = false) }, index.h("span", { class: "sr-only" }, "Verwijder: ", this.labelText), index.h("dso-icon", { icon: "times" })))), index.h("dso-tooltip", { stateless: true, id: "toggle-anchor", active: !!this.truncatedContent && (this.textHover || this.textFocus), position: "top", strategy: "absolute" }, this.truncatedContent)));
+      }), ref: (element) => (this.labelContent = element), tabindex: this.truncate && this.isTruncated ? 0 : undefined, onMouseEnter: () => (this.textHover = true), onMouseLeave: () => (this.textHover = false), onFocus: () => (this.textFocus = true), onBlur: () => (this.textFocus = false) }, index$1.h("slot", null)), this.removable && (index$1.h("button", { type: "button", onClick: (e) => this.dsoRemoveClick.emit(e), onMouseEnter: () => (this.removeHover = true), onMouseLeave: () => (this.removeHover = false), onFocus: () => (this.removeFocus = true), onBlur: () => (this.removeFocus = false) }, index$1.h("span", { class: "sr-only" }, "Verwijder: ", this.labelText), index$1.h("dso-icon", { icon: "times" })))), this.isTruncated && (index$1.h("dso-tooltip", { stateless: true, id: "toggle-anchor", active: this.textHover || this.textFocus, position: "top", strategy: "absolute" }, this.labelText))));
   }
-  get host() { return index.getElement(this); }
+  get host() { return index$1.getElement(this); }
   static get watchers() { return {
     "truncate": ["watchTruncate"],
     "textHover": ["watchTooltipActive"],

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

@@ -15,5 +15,5 @@ const patchBrowser = () => {
 };
 
 patchBrowser().then(options => {
-  return index.bootstrapLazy([["dso-icon.cjs",[[1,"dso-icon",{"icon":[1]}]]],["dso-map-base-layers.cjs",[[1,"dso-map-base-layers",{"group":[1],"baseLayers":[16]}]]],["dso-map-overlays.cjs",[[1,"dso-map-overlays",{"group":[1],"overlays":[16]}]]],["dso-annotation-output.cjs",[[4,"dso-annotation-output",{"identifier":[1],"annotationPrefix":[1,"annotation-prefix"],"toggleAnnotation":[64]}]]],["dso-toggletip.cjs",[[1,"dso-toggletip",{"label":[1],"position":[1],"small":[4],"secondary":[4],"active":[32]}]]],["dso-expandable-heading.cjs",[[1,"dso-expandable-heading",{"open":[4],"heading":[1],"color":[1]}]]],["dso-header.cjs",[[6,"dso-header",{"mainMenu":[16],"useDropDownMenu":[1,"use-drop-down-menu"],"authStatus":[1,"auth-status"],"loginUrl":[1,"login-url"],"logoutUrl":[1,"logout-url"],"userProfileName":[1,"user-profile-name"],"userProfileUrl":[1,"user-profile-url"],"userHomeUrl":[1,"user-home-url"],"showDropDown":[32],"hasSubLogo":[32],"overflowMenuItems":[32]}]]],["dso-label.cjs",[[1,"dso-label",{"compact":[4],"removable":[4],"status":[1],"truncate":[4],"removeHover":[32],"removeFocus":[32],"textHover":[32],"textFocus":[32],"truncatedContent":[32],"labelText":[32],"truncateLabel":[64],"updateTooltipText":[64]}]]],["dso-pagination.cjs",[[1,"dso-pagination",{"totalPages":[2,"total-pages"],"currentPage":[2,"current-page"],"formatHref":[16],"availablePositions":[32]},[[0,"dsoSizeChange","sizeChangeHandler"]]]]],["dso-tree-view.cjs",[[1,"dso-tree-view",{"collection":[16],"focusItem":[64]}]]],["dso-accordion-section.cjs",[[1,"dso-accordion-section",{"handleTitle":[1,"handle-title"],"heading":[1],"handleUrl":[1,"handle-url"],"state":[1],"attachmentCount":[2,"attachment-count"],"icon":[1],"status":[1],"open":[1540],"hasNestedSection":[32],"toggleSection":[64],"scrollSectionIntoView":[64]}]]],["dso-alert.cjs",[[1,"dso-alert",{"status":[1],"roleAlert":[4,"role-alert"]}]]],["dso-annotation-button.cjs",[[0,"dso-annotation-button",{"identifier":[1]}]]],["dso-attachments-counter.cjs",[[1,"dso-attachments-counter",{"count":[2]}]]],["dso-autosuggest.cjs",[[6,"dso-autosuggest",{"suggestions":[16],"loading":[4],"loadingLabel":[1,"loading-label"],"loadingDelayed":[2,"loading-delayed"],"notFoundLabel":[1,"not-found-label"],"suggestOnFocus":[4,"suggest-on-focus"],"showSuggestions":[32],"selectedSuggestion":[32],"notFound":[32],"showLoading":[32]},[[4,"click","onDocumentClick"]]]]],["dso-date-picker.cjs",[[2,"dso-date-picker",{"name":[1],"identifier":[1],"disabled":[516],"role":[1],"direction":[1],"required":[4],"invalid":[4],"dsoAutofocus":[4,"dso-autofocus"],"value":[1537],"min":[1],"max":[1],"activeFocus":[32],"focusedDay":[32],"open":[32],"visible":[32],"setFocus":[64],"show":[64],"hide":[64]},[[6,"click","handleDocumentClick"]]]]],["dso-helpcenter-panel.cjs",[[1,"dso-helpcenter-panel",{"label":[1],"url":[1],"visibility":[32],"isOpen":[32],"slideState":[32],"loadIframe":[32]},[[8,"keydown","keyDownListener"]]]]],["dso-image-overlay.cjs",[[1,"dso-image-overlay",{"active":[32],"zoomable":[32]},[[2,"load","loadListener"]]]]],["dso-list-button.cjs",[[1,"dso-list-button",{"label":[1],"sublabel":[1],"subcontent":[1],"count":[2],"min":[8],"max":[8],"checked":[516],"disabled":[516],"manualInputWrapperElement":[32],"manualCount":[32]}]]],["dso-map-controls.cjs",[[1,"dso-map-controls",{"open":[1540],"disableZoom":[1,"disable-zoom"],"hideContent":[32],"toggleVisibility":[64]}]]],["dso-modal.cjs",[[1,"dso-modal",{"modalTitle":[1,"modal-title"],"role":[1],"showCloseButton":[4,"show-close-button"],"initialFocus":[1,"initial-focus"],"ariaId":[32],"hasFooter":[32]}]]],["dso-table.cjs",[[1,"dso-table",{"noModal":[516,"no-modal"],"isResponsive":[516,"is-responsive"],"modalActive":[32],"placeholderHeight":[32]}]]],["dso-viewer-grid.cjs",[[1,"dso-viewer-grid",{"filterpanelOpen":[516,"filterpanel-open"],"overlayOpen":[516,"overlay-open"],"initialMainSize":[1,"initial-main-size"],"mainSize":[32]}]]],["dso-accordion.cjs",[[1,"dso-accordion",{"variant":[513],"reverseAlign":[516,"reverse-align"],"allowMultipleOpen":[516,"allow-multiple-open"],"getState":[64],"toggleSection":[64],"animationEnd":[64],"closeOpenSections":[64]}]]],["dso-badge.cjs",[[1,"dso-badge",{"status":[1]}]]],["dso-banner.cjs",[[1,"dso-banner",{"status":[513]}]]],["dso-card.cjs",[[1,"dso-card",{"isSelectable":[516,"is-selectable"],"hasImage":[516,"has-image"],"clickable":[4],"imageShape":[513,"image-shape"]}]]],["dso-card-container.cjs",[[1,"dso-card-container",{"mode":[513]}]]],["dso-highlight-box.cjs",[[1,"dso-highlight-box",{"yellow":[4],"border":[4],"white":[4],"dropShadow":[4,"drop-shadow"],"step":[2]}]]],["dso-ozon-content.cjs",[[6,"dso-ozon-content",{"content":[1],"inline":[516],"deleted":[516],"interactive":[520],"state":[32]}]]],["dso-progress-bar.cjs",[[1,"dso-progress-bar",{"progress":[2],"min":[2],"max":[2]}]]],["dso-slide-toggle.cjs",[[4,"dso-slide-toggle",{"checked":[4],"disabled":[4],"accessibleLabel":[1,"accessible-label"],"labelledbyId":[1,"labelledby-id"],"identifier":[1],"hasVisibleLabel":[32]}]]],["dso-dropdown-menu.cjs",[[1,"dso-dropdown-menu",{"open":[1540],"dropdownAlign":[1,"dropdown-align"],"checkable":[4],"boundary":[1],"strategy":[1]}]]],["dso-expandable.cjs",[[1,"dso-expandable",{"open":[516]}]]],["dso-progress-indicator.cjs",[[1,"dso-progress-indicator",{"label":[1],"size":[513],"block":[4]}]]],["dso-responsive-element.cjs",[[1,"dso-responsive-element",{"sizeAlias":[32],"sizeWidth":[32],"getSize":[64]}]]],["dso-tooltip.cjs",[[1,"dso-tooltip",{"descriptive":[516],"position":[1],"strategy":[1],"noArrow":[4,"no-arrow"],"stateless":[4],"small":[4],"active":[1540],"hidden":[32],"activate":[64],"deactivate":[64]},[[0,"click","listenClick"]]]]],["dso-info-button.cjs",[[1,"dso-info-button",{"active":[1540],"secondary":[4],"label":[1],"hover":[32],"setFocus":[64]}]]],["dso-info_2.cjs",[[6,"dso-selectable",{"type":[1],"identifier":[1],"name":[1],"value":[1],"invalid":[4],"describedById":[1,"described-by-id"],"labelledById":[1,"labelled-by-id"],"disabled":[4],"required":[4],"checked":[4],"indeterminate":[4],"infoFixed":[4,"info-fixed"],"infoActive":[32],"toggleInfo":[64]}],[1,"dso-info",{"fixed":[516],"active":[516]}]]]], options);
+  return index.bootstrapLazy([["dso-icon.cjs",[[1,"dso-icon",{"icon":[1]}]]],["dso-map-base-layers.cjs",[[1,"dso-map-base-layers",{"group":[1],"baseLayers":[16]}]]],["dso-map-overlays.cjs",[[1,"dso-map-overlays",{"group":[1],"overlays":[16]}]]],["dso-annotation-output.cjs",[[4,"dso-annotation-output",{"identifier":[1],"annotationPrefix":[1,"annotation-prefix"],"toggleAnnotation":[64]}]]],["dso-toggletip.cjs",[[1,"dso-toggletip",{"label":[1],"position":[1],"small":[4],"secondary":[4],"active":[32]}]]],["dso-expandable-heading.cjs",[[1,"dso-expandable-heading",{"open":[4],"heading":[1],"color":[1]}]]],["dso-header.cjs",[[6,"dso-header",{"mainMenu":[16],"useDropDownMenu":[1,"use-drop-down-menu"],"authStatus":[1,"auth-status"],"loginUrl":[1,"login-url"],"logoutUrl":[1,"logout-url"],"userProfileName":[1,"user-profile-name"],"userProfileUrl":[1,"user-profile-url"],"userHomeUrl":[1,"user-home-url"],"showDropDown":[32],"hasSubLogo":[32],"overflowMenuItems":[32]}]]],["dso-label.cjs",[[1,"dso-label",{"compact":[4],"removable":[4],"status":[1],"truncate":[4],"removeHover":[32],"removeFocus":[32],"textHover":[32],"textFocus":[32],"isTruncated":[32],"labelText":[32],"truncateLabel":[64],"syncLabelText":[64]}]]],["dso-pagination.cjs",[[1,"dso-pagination",{"totalPages":[2,"total-pages"],"currentPage":[2,"current-page"],"formatHref":[16],"availablePositions":[32]},[[0,"dsoSizeChange","sizeChangeHandler"]]]]],["dso-tree-view.cjs",[[1,"dso-tree-view",{"collection":[16],"focusItem":[64]}]]],["dso-accordion-section.cjs",[[1,"dso-accordion-section",{"handleTitle":[1,"handle-title"],"heading":[1],"handleUrl":[1,"handle-url"],"state":[1],"attachmentCount":[2,"attachment-count"],"icon":[1],"status":[1],"open":[1540],"hasNestedSection":[32],"toggleSection":[64],"scrollSectionIntoView":[64]}]]],["dso-alert.cjs",[[1,"dso-alert",{"status":[1],"roleAlert":[4,"role-alert"]}]]],["dso-annotation-button.cjs",[[0,"dso-annotation-button",{"identifier":[1]}]]],["dso-attachments-counter.cjs",[[1,"dso-attachments-counter",{"count":[2]}]]],["dso-autosuggest.cjs",[[6,"dso-autosuggest",{"suggestions":[16],"loading":[4],"loadingLabel":[1,"loading-label"],"loadingDelayed":[2,"loading-delayed"],"notFoundLabel":[1,"not-found-label"],"suggestOnFocus":[4,"suggest-on-focus"],"showSuggestions":[32],"selectedSuggestion":[32],"notFound":[32],"showLoading":[32]},[[4,"click","onDocumentClick"]]]]],["dso-date-picker.cjs",[[2,"dso-date-picker",{"name":[1],"identifier":[1],"disabled":[516],"role":[1],"direction":[1],"required":[4],"invalid":[4],"dsoAutofocus":[4,"dso-autofocus"],"value":[1537],"min":[1],"max":[1],"activeFocus":[32],"focusedDay":[32],"open":[32],"visible":[32],"setFocus":[64],"show":[64],"hide":[64]},[[6,"click","handleDocumentClick"]]]]],["dso-helpcenter-panel.cjs",[[1,"dso-helpcenter-panel",{"label":[1],"url":[1],"visibility":[32],"isOpen":[32],"slideState":[32],"loadIframe":[32]},[[8,"keydown","keyDownListener"]]]]],["dso-image-overlay.cjs",[[1,"dso-image-overlay",{"active":[32],"zoomable":[32]},[[2,"load","loadListener"]]]]],["dso-list-button.cjs",[[1,"dso-list-button",{"label":[1],"sublabel":[1],"subcontent":[1],"count":[2],"min":[8],"max":[8],"checked":[516],"disabled":[516],"manualInputWrapperElement":[32],"manualCount":[32]}]]],["dso-map-controls.cjs",[[1,"dso-map-controls",{"open":[1540],"disableZoom":[1,"disable-zoom"],"hideContent":[32],"toggleVisibility":[64]}]]],["dso-modal.cjs",[[1,"dso-modal",{"modalTitle":[1,"modal-title"],"role":[1],"showCloseButton":[4,"show-close-button"],"initialFocus":[1,"initial-focus"],"ariaId":[32],"hasFooter":[32]}]]],["dso-table.cjs",[[1,"dso-table",{"noModal":[516,"no-modal"],"isResponsive":[516,"is-responsive"],"modalActive":[32],"placeholderHeight":[32]}]]],["dso-viewer-grid.cjs",[[1,"dso-viewer-grid",{"filterpanelOpen":[516,"filterpanel-open"],"overlayOpen":[516,"overlay-open"],"initialMainSize":[1,"initial-main-size"],"mainSize":[32]}]]],["dso-accordion.cjs",[[1,"dso-accordion",{"variant":[513],"reverseAlign":[516,"reverse-align"],"allowMultipleOpen":[516,"allow-multiple-open"],"getState":[64],"toggleSection":[64],"animationEnd":[64],"closeOpenSections":[64]}]]],["dso-badge.cjs",[[1,"dso-badge",{"status":[1]}]]],["dso-banner.cjs",[[1,"dso-banner",{"status":[513]}]]],["dso-card.cjs",[[1,"dso-card",{"isSelectable":[516,"is-selectable"],"hasImage":[516,"has-image"],"clickable":[4],"imageShape":[513,"image-shape"]}]]],["dso-card-container.cjs",[[1,"dso-card-container",{"mode":[513]}]]],["dso-highlight-box.cjs",[[1,"dso-highlight-box",{"yellow":[4],"border":[4],"white":[4],"dropShadow":[4,"drop-shadow"],"step":[2]}]]],["dso-ozon-content.cjs",[[6,"dso-ozon-content",{"content":[1],"inline":[516],"deleted":[516],"interactive":[520],"state":[32]}]]],["dso-progress-bar.cjs",[[1,"dso-progress-bar",{"progress":[2],"min":[2],"max":[2]}]]],["dso-slide-toggle.cjs",[[4,"dso-slide-toggle",{"checked":[4],"disabled":[4],"accessibleLabel":[1,"accessible-label"],"labelledbyId":[1,"labelledby-id"],"identifier":[1],"hasVisibleLabel":[32]}]]],["dso-dropdown-menu.cjs",[[1,"dso-dropdown-menu",{"open":[1540],"dropdownAlign":[1,"dropdown-align"],"checkable":[4],"boundary":[1],"strategy":[1]}]]],["dso-expandable.cjs",[[1,"dso-expandable",{"open":[516]}]]],["dso-progress-indicator.cjs",[[1,"dso-progress-indicator",{"label":[1],"size":[513],"block":[4]}]]],["dso-responsive-element.cjs",[[1,"dso-responsive-element",{"sizeAlias":[32],"sizeWidth":[32],"getSize":[64]}]]],["dso-tooltip.cjs",[[1,"dso-tooltip",{"descriptive":[516],"position":[1],"strategy":[1],"noArrow":[4,"no-arrow"],"stateless":[4],"small":[4],"active":[1540],"hidden":[32],"activate":[64],"deactivate":[64]},[[0,"click","listenClick"]]]]],["dso-info-button.cjs",[[1,"dso-info-button",{"active":[1540],"secondary":[4],"label":[1],"hover":[32],"setFocus":[64]}]]],["dso-info_2.cjs",[[6,"dso-selectable",{"type":[1],"identifier":[1],"name":[1],"value":[1],"invalid":[4],"describedById":[1,"described-by-id"],"labelledById":[1,"labelled-by-id"],"disabled":[4],"required":[4],"checked":[4],"indeterminate":[4],"infoFixed":[4,"info-fixed"],"infoActive":[32],"toggleInfo":[64]}],[1,"dso-info",{"fixed":[516],"active":[516]}]]]], options);
 });

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

@@ -5,6 +5,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 const index = require('./index-ecec64a0.js');
 const hasOverflow = require('./has-overflow-b1b4f3f3.js');
 const clsx_m = require('./clsx.m-b81c6b86.js');
+const index$1 = require('./index-794ad37a.js');
 
 var maxSize = {
   name: 'maxSize',
@@ -42,29 +43,57 @@ var maxSize = {
 
 const tooltipCss = ":host(.hidden){visibility:hidden}:host-context(dso-toggletip){color:red !important}:host-context(dso-toggletip) *[data-popper-placement=top] .tooltip-arrow{margin-left:3px}:host-context(dso-toggletip) *[data-popper-placement=right] .tooltip-arrow{margin-top:0}:host-context(dso-toggletip) *[data-popper-placement=bottom] .tooltip-arrow{margin-left:3px}:host-context(dso-toggletip) *[data-popper-placement=left]{margin-right:-8px !important}:host-context(dso-toggletip) *[data-popper-placement=left] .tooltip-arrow{margin-top:0}*,*::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:410}.tooltip.in{opacity:1}.tooltip .tooltip-inner{background-color:#fff;border-radius:4px;color:#191919;display:inline-block;font-size:1rem;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;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}.tooltip[data-popper-placement=top] .tooltip-arrow{margin-left:-3px}.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}.tooltip[data-popper-placement=right] .tooltip-arrow{margin-top:-3px}.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;top:0}.tooltip[data-popper-placement=bottom] .tooltip-arrow{margin-left:-3px}.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;right:0}.tooltip[data-popper-placement=left] .tooltip-arrow{margin-top:-3px}";
 
+var __classPrivateFieldGet = (undefined && undefined.__classPrivateFieldGet) || function (receiver, state, kind, f) {
+  if (kind === "a" && !f)
+    throw new TypeError("Private accessor was defined without a getter");
+  if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver))
+    throw new TypeError("Cannot read private member from an object whose class did not declare it");
+  return kind === "m" ? f : kind === "a" ? f.call(receiver) : f ? f.value : state.get(receiver);
+};
+var __classPrivateFieldSet = (undefined && undefined.__classPrivateFieldSet) || function (receiver, state, value, kind, f) {
+  if (kind === "m")
+    throw new TypeError("Private method is not writable");
+  if (kind === "a" && !f)
+    throw new TypeError("Private accessor was defined without a setter");
+  if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver))
+    throw new TypeError("Cannot write private member to an object whose class did not declare it");
+  return (kind === "a" ? f.call(receiver, value) : f ? f.value = value : state.set(receiver, value)), value;
+};
+var _Tooltip_target;
 // Keep const in sync with $tooltip-transition-duration in dso-toolkit/src/components/tooltip/tooltip.scss tooltip_root() mixin
 const transitionDuration = 150;
+const applyMaxSize = {
+  name: "applyMaxSize",
+  enabled: true,
+  phase: hasOverflow.beforeWrite,
+  requires: ["maxSize"],
+  fn({ state }) {
+    let { width } = state.modifiersData.maxSize;
+    if (width < 160) {
+      width = 160;
+    }
+    state.styles.popper = Object.assign(Object.assign({}, state.styles.popper), { maxWidth: `${width}px` });
+  },
+};
 const Tooltip = class {
   constructor(hostRef) {
     index.registerInstance(this, hostRef);
-    this.applyMaxSize = {
-      name: "applyMaxSize",
-      enabled: true,
-      phase: hasOverflow.beforeWrite,
-      requires: ["maxSize"],
-      fn({ state }) {
-        let { width } = state.modifiersData.maxSize;
-        if (width < 160) {
-          width = 160;
-        }
-        state.styles.popper = Object.assign(Object.assign({}, state.styles.popper), { maxWidth: `${width}px` });
-      },
+    this.callbacks = {
+      activate: () => (this.active = true),
+      deactivate: () => (this.active = false),
     };
     this.keyDownListener = (event) => {
       if (event.key === "Escape") {
         this.deactivate();
       }
     };
+    this.deactivatePopper = index$1.debounce_1(() => {
+      var _a;
+      this.hidden = true;
+      (_a = this.popper) === null || _a === void 0 ? void 0 : _a.destroy();
+      this.popper = undefined;
+    }, transitionDuration);
+    _Tooltip_target.set(this, void 0);
     this.descriptive = false;
     this.position = "top";
     this.strategy = "auto";
@@ -122,9 +151,8 @@ const Tooltip = class {
     });
   }
   watchActive() {
-    var _a;
     if (this.active) {
-      this.hidden = false;
+      this.activatePopper();
       if (!this.stateless) {
         setTimeout(() => {
           var _a;
@@ -136,13 +164,8 @@ const Tooltip = class {
       }
     }
     else {
-      if (!this.stateless) {
-        (_a = this.popper) === null || _a === void 0 ? void 0 : _a.setOptions({
-          modifiers: [{ name: "eventListeners", enabled: false }],
-        });
-        document.removeEventListener("keydown", this.keyDownListener);
-      }
-      setTimeout(() => (this.hidden = true), transitionDuration);
+      document.removeEventListener("keydown", this.keyDownListener);
+      this.deactivatePopper();
     }
   }
   listenClick(e) {
@@ -150,25 +173,10 @@ const Tooltip = class {
   }
   componentDidLoad() {
     var _a;
-    if (this.popper) {
-      return;
-    }
     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");
     }
-    if (!this.element.id) {
-      throw new Error("Unable to find reference tooltip has no [id] attribute.");
-    }
-    this.target = this.getTarget(this.element.id);
-    this.popper = hasOverflow.createPopper(this.target, tooltip, {
-      placement: this.position,
-      modifiers: [maxSize, this.applyMaxSize],
-    });
-    this.callbacks = {
-      activate: () => (this.active = true),
-      deactivate: () => (this.active = false),
-    };
     if (!this.stateless) {
       this.target.addEventListener("mouseenter", this.callbacks.activate);
       this.target.addEventListener("mouseleave", this.callbacks.deactivate);
@@ -179,18 +187,16 @@ const Tooltip = class {
   disconnectedCallback() {
     var _a;
     (_a = this.popper) === null || _a === void 0 ? void 0 : _a.destroy();
-    if (!this.stateless && this.target && this.callbacks) {
+    if (!this.stateless && this.target) {
       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;
   }
   componentDidRender() {
     var _a;
-    this.setStrategy();
     if (this.active) {
       (_a = this.popper) === null || _a === void 0 ? void 0 : _a.update();
     }
@@ -198,7 +204,34 @@ const Tooltip = class {
   render() {
     return (index.h(index.Host, { class: { hidden: this.hidden }, role: "tooltip" }, index.h("div", { class: clsx_m.clsx("tooltip", { in: this.active }) }, !this.noArrow && index.h("div", { "data-popper-arrow": true, class: "tooltip-arrow" }), index.h("div", { "aria-hidden": !this.descriptive || undefined, class: clsx_m.clsx("tooltip-inner", { "dso-small": this.small }) }, index.h("slot", null)))));
   }
-  getTarget(id) {
+  activatePopper() {
+    var _a;
+    this.hidden = false;
+    if (this.popper) {
+      return;
+    }
+    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");
+    }
+    this.popper = hasOverflow.createPopper(this.target, tooltip, {
+      placement: this.position,
+      modifiers: [maxSize, applyMaxSize, { name: "eventListeners", enabled: false }],
+    });
+    this.setStrategy();
+  }
+  get target() {
+    var _a;
+    return (_a = __classPrivateFieldGet(this, _Tooltip_target, "f")) !== null && _a !== void 0 ? _a : this.initializeTarget();
+  }
+  set target(element) {
+    __classPrivateFieldSet(this, _Tooltip_target, element, "f");
+  }
+  initializeTarget() {
+    const id = this.element.id;
+    if (!id) {
+      throw new Error("Unable to find reference tooltip has no [id] attribute.");
+    }
     const rootNode = this.element.getRootNode();
     if (!(rootNode instanceof Document || rootNode instanceof ShadowRoot)) {
       throw new Error(`rootNode is not instance of Document or ShadowRoot`);
@@ -207,6 +240,7 @@ const Tooltip = class {
     if (!reference) {
       throw new Error(`Unable to find reference with aria-describedby ${id}`);
     }
+    __classPrivateFieldSet(this, _Tooltip_target, reference, "f");
     return reference;
   }
   get element() { return index.getElement(this); }
@@ -216,6 +250,7 @@ const Tooltip = class {
     "active": ["watchActive"]
   }; }
 };
+_Tooltip_target = new WeakMap();
 Tooltip.style = tooltipCss;
 
 exports.dso_tooltip = Tooltip;

package/dist/cjs/dso-viewer-grid.cjs.entry.js

@@ -135,7 +135,7 @@ const ViewerGrid = class {
     this.dsoFilterpanelCancel.emit({ originalEvent: mouseEvent });
   }
   render() {
-    return (index.h(index.Host, Object.assign({}, { [this.mainSize]: true }), index.h("div", { class: "dso-map-panel", ref: (element) => (this.mapPanel = element) }, index.h("div", { class: "sizing-buttons" }, index.h("span", { class: "sr-only", "aria-live": "polite", "aria-atomic": "true" }, "breedte tekstpaneel: ", this.sizeLabelMap[this.mainSize]), index.h("button", { type: "button", class: "shrink", disabled: this.mainSize === "small", onClick: this.shrinkMain }, index.h("span", { class: "sr-only" }, "Kaartpaneel smaller maken"), index.h("dso-icon", { icon: "chevron-left" })), index.h("button", { type: "button", class: "expand", disabled: this.mainSize === "large", onClick: this.expandMain }, index.h("span", { class: "sr-only" }, "Kaartpaneel breder maken"), index.h("dso-icon", { icon: "chevron-right" }))), index.h("div", { class: "main" }, index.h("slot", { name: "main" }))), index.h("div", { id: "filterpanel", class: "filterpanel", hidden: !this.filterpanelOpen || !this.filterpanelSlot, ref: (element) => (this.filterpanel = element) }, index.h("h2", null, "Uw keuzes"), index.h(ViewerGridFilterpanelButtons, { onApply: (e) => this.handleFilterpanelApply(e), onCancel: (e) => this.handleFilterpanelCancel(e) }), index.h("slot", { name: "filterpanel" }), index.h(ViewerGridFilterpanelButtons, { onApply: (e) => this.handleFilterpanelApply(e), onCancel: (e) => this.handleFilterpanelCancel(e) })), index.h("div", { class: "map" }, index.h("slot", { name: "map" })), index.h("div", { hidden: !this.overlayOpen || !this.overlaySlot, class: "dimscreen" }), index.h("div", { class: "overlay", hidden: !this.overlayOpen || !this.overlaySlot, ref: (element) => (this.overlay = element) }, index.h("button", { type: "button", class: "overlay-close-button", onClick: (e) => this.dsoCloseOverlay.emit(e) }, index.h("dso-icon", { icon: "times" }), index.h("span", { class: "sr-only" }, "sluiten")), index.h("slot", { name: "overlay" }), index.h("button", { "aria-hidden": "true", type: "button", class: "overlay-close-button", style: { zIndex: "-100" } }, index.h("dso-icon", { icon: "times" }), index.h("span", { class: "sr-only" }, "sluiten")))));
+    return (index.h(index.Host, Object.assign({}, { [this.mainSize]: true }), index.h("div", { class: "dso-map-panel", ref: (element) => (this.mapPanel = element) }, index.h("div", { class: "sizing-buttons" }, index.h("span", { class: "sr-only", "aria-live": "polite", "aria-atomic": "true" }, "breedte tekstpaneel: ", this.sizeLabelMap[this.mainSize]), index.h("button", { type: "button", class: "shrink", disabled: this.mainSize === "small", onClick: this.shrinkMain }, index.h("span", { class: "sr-only" }, "Kaartpaneel smaller maken"), index.h("dso-icon", { icon: "chevron-left" })), index.h("button", { type: "button", class: "expand", disabled: this.mainSize === "large", onClick: this.expandMain }, index.h("span", { class: "sr-only" }, "Kaartpaneel breder maken"), index.h("dso-icon", { icon: "chevron-right" }))), index.h("div", { class: "main" }, index.h("slot", { name: "main" }))), index.h("div", { id: "filterpanel", class: "filterpanel", hidden: !this.filterpanelOpen || !this.filterpanelSlot, ref: (element) => (this.filterpanel = element) }, index.h("h1", null, "Uw keuzes"), index.h(ViewerGridFilterpanelButtons, { onApply: (e) => this.handleFilterpanelApply(e), onCancel: (e) => this.handleFilterpanelCancel(e) }), index.h("slot", { name: "filterpanel" }), index.h(ViewerGridFilterpanelButtons, { onApply: (e) => this.handleFilterpanelApply(e), onCancel: (e) => this.handleFilterpanelCancel(e) })), index.h("div", { class: "map" }, index.h("slot", { name: "map" })), index.h("div", { hidden: !this.overlayOpen || !this.overlaySlot, class: "dimscreen" }), index.h("div", { class: "overlay", hidden: !this.overlayOpen || !this.overlaySlot, ref: (element) => (this.overlay = element) }, index.h("button", { type: "button", class: "overlay-close-button", onClick: (e) => this.dsoCloseOverlay.emit(e) }, index.h("dso-icon", { icon: "times" }), index.h("span", { class: "sr-only" }, "sluiten")), index.h("slot", { name: "overlay" }), index.h("button", { "aria-hidden": "true", type: "button", class: "overlay-close-button", style: { zIndex: "-100" } }, index.h("dso-icon", { icon: "times" }), index.h("span", { class: "sr-only" }, "sluiten")))));
   }
   get host() { return index.getElement(this); }
   static get watchers() { return {

package/dist/cjs/loader.cjs.js

@@ -14,7 +14,7 @@ const patchEsm = () => {
 const defineCustomElements = (win, options) => {
   if (typeof window === 'undefined') return Promise.resolve();
   return patchEsm().then(() => {
-  return index.bootstrapLazy([["dso-icon.cjs",[[1,"dso-icon",{"icon":[1]}]]],["dso-map-base-layers.cjs",[[1,"dso-map-base-layers",{"group":[1],"baseLayers":[16]}]]],["dso-map-overlays.cjs",[[1,"dso-map-overlays",{"group":[1],"overlays":[16]}]]],["dso-annotation-output.cjs",[[4,"dso-annotation-output",{"identifier":[1],"annotationPrefix":[1,"annotation-prefix"],"toggleAnnotation":[64]}]]],["dso-toggletip.cjs",[[1,"dso-toggletip",{"label":[1],"position":[1],"small":[4],"secondary":[4],"active":[32]}]]],["dso-expandable-heading.cjs",[[1,"dso-expandable-heading",{"open":[4],"heading":[1],"color":[1]}]]],["dso-header.cjs",[[6,"dso-header",{"mainMenu":[16],"useDropDownMenu":[1,"use-drop-down-menu"],"authStatus":[1,"auth-status"],"loginUrl":[1,"login-url"],"logoutUrl":[1,"logout-url"],"userProfileName":[1,"user-profile-name"],"userProfileUrl":[1,"user-profile-url"],"userHomeUrl":[1,"user-home-url"],"showDropDown":[32],"hasSubLogo":[32],"overflowMenuItems":[32]}]]],["dso-label.cjs",[[1,"dso-label",{"compact":[4],"removable":[4],"status":[1],"truncate":[4],"removeHover":[32],"removeFocus":[32],"textHover":[32],"textFocus":[32],"truncatedContent":[32],"labelText":[32],"truncateLabel":[64],"updateTooltipText":[64]}]]],["dso-pagination.cjs",[[1,"dso-pagination",{"totalPages":[2,"total-pages"],"currentPage":[2,"current-page"],"formatHref":[16],"availablePositions":[32]},[[0,"dsoSizeChange","sizeChangeHandler"]]]]],["dso-tree-view.cjs",[[1,"dso-tree-view",{"collection":[16],"focusItem":[64]}]]],["dso-accordion-section.cjs",[[1,"dso-accordion-section",{"handleTitle":[1,"handle-title"],"heading":[1],"handleUrl":[1,"handle-url"],"state":[1],"attachmentCount":[2,"attachment-count"],"icon":[1],"status":[1],"open":[1540],"hasNestedSection":[32],"toggleSection":[64],"scrollSectionIntoView":[64]}]]],["dso-alert.cjs",[[1,"dso-alert",{"status":[1],"roleAlert":[4,"role-alert"]}]]],["dso-annotation-button.cjs",[[0,"dso-annotation-button",{"identifier":[1]}]]],["dso-attachments-counter.cjs",[[1,"dso-attachments-counter",{"count":[2]}]]],["dso-autosuggest.cjs",[[6,"dso-autosuggest",{"suggestions":[16],"loading":[4],"loadingLabel":[1,"loading-label"],"loadingDelayed":[2,"loading-delayed"],"notFoundLabel":[1,"not-found-label"],"suggestOnFocus":[4,"suggest-on-focus"],"showSuggestions":[32],"selectedSuggestion":[32],"notFound":[32],"showLoading":[32]},[[4,"click","onDocumentClick"]]]]],["dso-date-picker.cjs",[[2,"dso-date-picker",{"name":[1],"identifier":[1],"disabled":[516],"role":[1],"direction":[1],"required":[4],"invalid":[4],"dsoAutofocus":[4,"dso-autofocus"],"value":[1537],"min":[1],"max":[1],"activeFocus":[32],"focusedDay":[32],"open":[32],"visible":[32],"setFocus":[64],"show":[64],"hide":[64]},[[6,"click","handleDocumentClick"]]]]],["dso-helpcenter-panel.cjs",[[1,"dso-helpcenter-panel",{"label":[1],"url":[1],"visibility":[32],"isOpen":[32],"slideState":[32],"loadIframe":[32]},[[8,"keydown","keyDownListener"]]]]],["dso-image-overlay.cjs",[[1,"dso-image-overlay",{"active":[32],"zoomable":[32]},[[2,"load","loadListener"]]]]],["dso-list-button.cjs",[[1,"dso-list-button",{"label":[1],"sublabel":[1],"subcontent":[1],"count":[2],"min":[8],"max":[8],"checked":[516],"disabled":[516],"manualInputWrapperElement":[32],"manualCount":[32]}]]],["dso-map-controls.cjs",[[1,"dso-map-controls",{"open":[1540],"disableZoom":[1,"disable-zoom"],"hideContent":[32],"toggleVisibility":[64]}]]],["dso-modal.cjs",[[1,"dso-modal",{"modalTitle":[1,"modal-title"],"role":[1],"showCloseButton":[4,"show-close-button"],"initialFocus":[1,"initial-focus"],"ariaId":[32],"hasFooter":[32]}]]],["dso-table.cjs",[[1,"dso-table",{"noModal":[516,"no-modal"],"isResponsive":[516,"is-responsive"],"modalActive":[32],"placeholderHeight":[32]}]]],["dso-viewer-grid.cjs",[[1,"dso-viewer-grid",{"filterpanelOpen":[516,"filterpanel-open"],"overlayOpen":[516,"overlay-open"],"initialMainSize":[1,"initial-main-size"],"mainSize":[32]}]]],["dso-accordion.cjs",[[1,"dso-accordion",{"variant":[513],"reverseAlign":[516,"reverse-align"],"allowMultipleOpen":[516,"allow-multiple-open"],"getState":[64],"toggleSection":[64],"animationEnd":[64],"closeOpenSections":[64]}]]],["dso-badge.cjs",[[1,"dso-badge",{"status":[1]}]]],["dso-banner.cjs",[[1,"dso-banner",{"status":[513]}]]],["dso-card.cjs",[[1,"dso-card",{"isSelectable":[516,"is-selectable"],"hasImage":[516,"has-image"],"clickable":[4],"imageShape":[513,"image-shape"]}]]],["dso-card-container.cjs",[[1,"dso-card-container",{"mode":[513]}]]],["dso-highlight-box.cjs",[[1,"dso-highlight-box",{"yellow":[4],"border":[4],"white":[4],"dropShadow":[4,"drop-shadow"],"step":[2]}]]],["dso-ozon-content.cjs",[[6,"dso-ozon-content",{"content":[1],"inline":[516],"deleted":[516],"interactive":[520],"state":[32]}]]],["dso-progress-bar.cjs",[[1,"dso-progress-bar",{"progress":[2],"min":[2],"max":[2]}]]],["dso-slide-toggle.cjs",[[4,"dso-slide-toggle",{"checked":[4],"disabled":[4],"accessibleLabel":[1,"accessible-label"],"labelledbyId":[1,"labelledby-id"],"identifier":[1],"hasVisibleLabel":[32]}]]],["dso-dropdown-menu.cjs",[[1,"dso-dropdown-menu",{"open":[1540],"dropdownAlign":[1,"dropdown-align"],"checkable":[4],"boundary":[1],"strategy":[1]}]]],["dso-expandable.cjs",[[1,"dso-expandable",{"open":[516]}]]],["dso-progress-indicator.cjs",[[1,"dso-progress-indicator",{"label":[1],"size":[513],"block":[4]}]]],["dso-responsive-element.cjs",[[1,"dso-responsive-element",{"sizeAlias":[32],"sizeWidth":[32],"getSize":[64]}]]],["dso-tooltip.cjs",[[1,"dso-tooltip",{"descriptive":[516],"position":[1],"strategy":[1],"noArrow":[4,"no-arrow"],"stateless":[4],"small":[4],"active":[1540],"hidden":[32],"activate":[64],"deactivate":[64]},[[0,"click","listenClick"]]]]],["dso-info-button.cjs",[[1,"dso-info-button",{"active":[1540],"secondary":[4],"label":[1],"hover":[32],"setFocus":[64]}]]],["dso-info_2.cjs",[[6,"dso-selectable",{"type":[1],"identifier":[1],"name":[1],"value":[1],"invalid":[4],"describedById":[1,"described-by-id"],"labelledById":[1,"labelled-by-id"],"disabled":[4],"required":[4],"checked":[4],"indeterminate":[4],"infoFixed":[4,"info-fixed"],"infoActive":[32],"toggleInfo":[64]}],[1,"dso-info",{"fixed":[516],"active":[516]}]]]], options);
+  return index.bootstrapLazy([["dso-icon.cjs",[[1,"dso-icon",{"icon":[1]}]]],["dso-map-base-layers.cjs",[[1,"dso-map-base-layers",{"group":[1],"baseLayers":[16]}]]],["dso-map-overlays.cjs",[[1,"dso-map-overlays",{"group":[1],"overlays":[16]}]]],["dso-annotation-output.cjs",[[4,"dso-annotation-output",{"identifier":[1],"annotationPrefix":[1,"annotation-prefix"],"toggleAnnotation":[64]}]]],["dso-toggletip.cjs",[[1,"dso-toggletip",{"label":[1],"position":[1],"small":[4],"secondary":[4],"active":[32]}]]],["dso-expandable-heading.cjs",[[1,"dso-expandable-heading",{"open":[4],"heading":[1],"color":[1]}]]],["dso-header.cjs",[[6,"dso-header",{"mainMenu":[16],"useDropDownMenu":[1,"use-drop-down-menu"],"authStatus":[1,"auth-status"],"loginUrl":[1,"login-url"],"logoutUrl":[1,"logout-url"],"userProfileName":[1,"user-profile-name"],"userProfileUrl":[1,"user-profile-url"],"userHomeUrl":[1,"user-home-url"],"showDropDown":[32],"hasSubLogo":[32],"overflowMenuItems":[32]}]]],["dso-label.cjs",[[1,"dso-label",{"compact":[4],"removable":[4],"status":[1],"truncate":[4],"removeHover":[32],"removeFocus":[32],"textHover":[32],"textFocus":[32],"isTruncated":[32],"labelText":[32],"truncateLabel":[64],"syncLabelText":[64]}]]],["dso-pagination.cjs",[[1,"dso-pagination",{"totalPages":[2,"total-pages"],"currentPage":[2,"current-page"],"formatHref":[16],"availablePositions":[32]},[[0,"dsoSizeChange","sizeChangeHandler"]]]]],["dso-tree-view.cjs",[[1,"dso-tree-view",{"collection":[16],"focusItem":[64]}]]],["dso-accordion-section.cjs",[[1,"dso-accordion-section",{"handleTitle":[1,"handle-title"],"heading":[1],"handleUrl":[1,"handle-url"],"state":[1],"attachmentCount":[2,"attachment-count"],"icon":[1],"status":[1],"open":[1540],"hasNestedSection":[32],"toggleSection":[64],"scrollSectionIntoView":[64]}]]],["dso-alert.cjs",[[1,"dso-alert",{"status":[1],"roleAlert":[4,"role-alert"]}]]],["dso-annotation-button.cjs",[[0,"dso-annotation-button",{"identifier":[1]}]]],["dso-attachments-counter.cjs",[[1,"dso-attachments-counter",{"count":[2]}]]],["dso-autosuggest.cjs",[[6,"dso-autosuggest",{"suggestions":[16],"loading":[4],"loadingLabel":[1,"loading-label"],"loadingDelayed":[2,"loading-delayed"],"notFoundLabel":[1,"not-found-label"],"suggestOnFocus":[4,"suggest-on-focus"],"showSuggestions":[32],"selectedSuggestion":[32],"notFound":[32],"showLoading":[32]},[[4,"click","onDocumentClick"]]]]],["dso-date-picker.cjs",[[2,"dso-date-picker",{"name":[1],"identifier":[1],"disabled":[516],"role":[1],"direction":[1],"required":[4],"invalid":[4],"dsoAutofocus":[4,"dso-autofocus"],"value":[1537],"min":[1],"max":[1],"activeFocus":[32],"focusedDay":[32],"open":[32],"visible":[32],"setFocus":[64],"show":[64],"hide":[64]},[[6,"click","handleDocumentClick"]]]]],["dso-helpcenter-panel.cjs",[[1,"dso-helpcenter-panel",{"label":[1],"url":[1],"visibility":[32],"isOpen":[32],"slideState":[32],"loadIframe":[32]},[[8,"keydown","keyDownListener"]]]]],["dso-image-overlay.cjs",[[1,"dso-image-overlay",{"active":[32],"zoomable":[32]},[[2,"load","loadListener"]]]]],["dso-list-button.cjs",[[1,"dso-list-button",{"label":[1],"sublabel":[1],"subcontent":[1],"count":[2],"min":[8],"max":[8],"checked":[516],"disabled":[516],"manualInputWrapperElement":[32],"manualCount":[32]}]]],["dso-map-controls.cjs",[[1,"dso-map-controls",{"open":[1540],"disableZoom":[1,"disable-zoom"],"hideContent":[32],"toggleVisibility":[64]}]]],["dso-modal.cjs",[[1,"dso-modal",{"modalTitle":[1,"modal-title"],"role":[1],"showCloseButton":[4,"show-close-button"],"initialFocus":[1,"initial-focus"],"ariaId":[32],"hasFooter":[32]}]]],["dso-table.cjs",[[1,"dso-table",{"noModal":[516,"no-modal"],"isResponsive":[516,"is-responsive"],"modalActive":[32],"placeholderHeight":[32]}]]],["dso-viewer-grid.cjs",[[1,"dso-viewer-grid",{"filterpanelOpen":[516,"filterpanel-open"],"overlayOpen":[516,"overlay-open"],"initialMainSize":[1,"initial-main-size"],"mainSize":[32]}]]],["dso-accordion.cjs",[[1,"dso-accordion",{"variant":[513],"reverseAlign":[516,"reverse-align"],"allowMultipleOpen":[516,"allow-multiple-open"],"getState":[64],"toggleSection":[64],"animationEnd":[64],"closeOpenSections":[64]}]]],["dso-badge.cjs",[[1,"dso-badge",{"status":[1]}]]],["dso-banner.cjs",[[1,"dso-banner",{"status":[513]}]]],["dso-card.cjs",[[1,"dso-card",{"isSelectable":[516,"is-selectable"],"hasImage":[516,"has-image"],"clickable":[4],"imageShape":[513,"image-shape"]}]]],["dso-card-container.cjs",[[1,"dso-card-container",{"mode":[513]}]]],["dso-highlight-box.cjs",[[1,"dso-highlight-box",{"yellow":[4],"border":[4],"white":[4],"dropShadow":[4,"drop-shadow"],"step":[2]}]]],["dso-ozon-content.cjs",[[6,"dso-ozon-content",{"content":[1],"inline":[516],"deleted":[516],"interactive":[520],"state":[32]}]]],["dso-progress-bar.cjs",[[1,"dso-progress-bar",{"progress":[2],"min":[2],"max":[2]}]]],["dso-slide-toggle.cjs",[[4,"dso-slide-toggle",{"checked":[4],"disabled":[4],"accessibleLabel":[1,"accessible-label"],"labelledbyId":[1,"labelledby-id"],"identifier":[1],"hasVisibleLabel":[32]}]]],["dso-dropdown-menu.cjs",[[1,"dso-dropdown-menu",{"open":[1540],"dropdownAlign":[1,"dropdown-align"],"checkable":[4],"boundary":[1],"strategy":[1]}]]],["dso-expandable.cjs",[[1,"dso-expandable",{"open":[516]}]]],["dso-progress-indicator.cjs",[[1,"dso-progress-indicator",{"label":[1],"size":[513],"block":[4]}]]],["dso-responsive-element.cjs",[[1,"dso-responsive-element",{"sizeAlias":[32],"sizeWidth":[32],"getSize":[64]}]]],["dso-tooltip.cjs",[[1,"dso-tooltip",{"descriptive":[516],"position":[1],"strategy":[1],"noArrow":[4,"no-arrow"],"stateless":[4],"small":[4],"active":[1540],"hidden":[32],"activate":[64],"deactivate":[64]},[[0,"click","listenClick"]]]]],["dso-info-button.cjs",[[1,"dso-info-button",{"active":[1540],"secondary":[4],"label":[1],"hover":[32],"setFocus":[64]}]]],["dso-info_2.cjs",[[6,"dso-selectable",{"type":[1],"identifier":[1],"name":[1],"value":[1],"invalid":[4],"describedById":[1,"described-by-id"],"labelledById":[1,"labelled-by-id"],"disabled":[4],"required":[4],"checked":[4],"indeterminate":[4],"infoFixed":[4,"info-fixed"],"infoActive":[32],"toggleInfo":[64]}],[1,"dso-info",{"fixed":[516],"active":[516]}]]]], options);
   });
 };
 

package/dist/collection/components/label/label.js

@@ -1,6 +1,5 @@
 import { h, Host, } from "@stencil/core";
 import clsx from "clsx";
-import { mutationObserver } from "./mutation-observer";
 import { resizeObserver } from "./resize-observer";
 function hasEllipses(el) {
   return el.scrollWidth > el.clientWidth;
@@ -22,8 +21,8 @@ export class Label {
     this.truncate = undefined;
     this.textHover = undefined;
     this.textFocus = undefined;
-    this.truncatedContent = undefined;
-    this.labelText = undefined;
+    this.isTruncated = undefined;
+    this.labelText = null;
   }
   watchTruncate(truncate) {
     if (truncate) {
@@ -45,44 +44,51 @@ export class Label {
   }
   async truncateLabel() {
     setTimeout(() => {
-      if (this.labelContent) {
-        this.truncatedContent = hasEllipses(this.labelContent) ? this.host.innerText : undefined;
-      }
+      this.isTruncated = this.labelContent && hasEllipses(this.labelContent);
     });
   }
-  async updateTooltipText() {
-    this.labelText = this.host.innerText;
-    if (this.truncate) {
-      this.truncateLabel();
-    }
+  /** **[Internal]** Synchronizes the text on the remove button and tooltip. You should never have to use this. */
+  async syncLabelText() {
+    this.labelText = this.host.textContent;
   }
   componentDidLoad() {
-    this.labelText = this.host.innerText;
-    mutationObserver.observe(this.host, {
-      attributes: true,
-      subtree: true,
-    });
     if (this.truncate) {
       this.startTruncate();
     }
+    if (this.removable) {
+      this.startMutationObserver();
+    }
   }
   disconnectedCallback() {
-    mutationObserver === null || mutationObserver === void 0 ? void 0 : mutationObserver.disconnect();
     this.stopTruncate();
   }
+  /** The mutationObserver fetches the text placed inside the label, this is then used for the remove button and tooltip. */
+  startMutationObserver() {
+    if (this.mutationObserver) {
+      return;
+    }
+    this.mutationObserver = new MutationObserver((entries) => entries.forEach(() => this.syncLabelText()));
+    this.mutationObserver.observe(this.host, {
+      characterData: true,
+      subtree: true,
+      attributes: true,
+    });
+    this.labelText = this.host.textContent;
+  }
   startTruncate() {
     resizeObserver.observe(this.host);
+    this.startMutationObserver();
     this.truncateLabel();
   }
   stopTruncate() {
     document.removeEventListener("keydown", this.keyDownListener);
     resizeObserver.unobserve(this.host);
-    this.truncatedContent = undefined;
+    this.isTruncated = undefined;
     this.keydownListenerActive = false;
   }
   render() {
     const status = this.status && Label.statusMap.get(this.status);
-    return (h(Host, { "aria-roledescription": this.truncate && this.truncatedContent
+    return (h(Host, { "aria-roledescription": this.truncate && this.isTruncated
         ? "Deze tekst is visueel afgekapt en wordt volledig zichtbaar bij focus."
         : undefined }, h("span", { "aria-describedby": "toggle-anchor", class: clsx("dso-label", {
         [`dso-label-${this.status}`]: this.status,
@@ -90,7 +96,7 @@ export class Label {
         "dso-hover": this.removeHover || this.removeFocus,
       }) }, h("slot", { name: "symbol" }), status && h("span", { class: "sr-only" }, status, ": "), h("span", { class: clsx("dso-label-content", {
         "dso-truncate": !!this.truncate,
-      }), ref: (element) => (this.labelContent = element), tabindex: this.truncate && this.truncatedContent ? 0 : undefined, onMouseEnter: () => (this.textHover = true), onMouseLeave: () => (this.textHover = false), onFocus: () => (this.textFocus = true), onBlur: () => (this.textFocus = false) }, h("slot", null)), this.removable && (h("button", { type: "button", onClick: (e) => this.dsoRemoveClick.emit(e), onMouseEnter: () => (this.removeHover = true), onMouseLeave: () => (this.removeHover = false), onFocus: () => (this.removeFocus = true), onBlur: () => (this.removeFocus = false) }, h("span", { class: "sr-only" }, "Verwijder: ", this.labelText), h("dso-icon", { icon: "times" })))), h("dso-tooltip", { stateless: true, id: "toggle-anchor", active: !!this.truncatedContent && (this.textHover || this.textFocus), position: "top", strategy: "absolute" }, this.truncatedContent)));
+      }), ref: (element) => (this.labelContent = element), tabindex: this.truncate && this.isTruncated ? 0 : undefined, onMouseEnter: () => (this.textHover = true), onMouseLeave: () => (this.textHover = false), onFocus: () => (this.textFocus = true), onBlur: () => (this.textFocus = false) }, h("slot", null)), this.removable && (h("button", { type: "button", onClick: (e) => this.dsoRemoveClick.emit(e), onMouseEnter: () => (this.removeHover = true), onMouseLeave: () => (this.removeHover = false), onFocus: () => (this.removeFocus = true), onBlur: () => (this.removeFocus = false) }, h("span", { class: "sr-only" }, "Verwijder: ", this.labelText), h("dso-icon", { icon: "times" })))), this.isTruncated && (h("dso-tooltip", { stateless: true, id: "toggle-anchor", active: this.textHover || this.textFocus, position: "top", strategy: "absolute" }, this.labelText))));
   }
   static get is() { return "dso-label"; }
   static get encapsulation() { return "shadow"; }
@@ -182,7 +188,7 @@ export class Label {
       "removeFocus": {},
       "textHover": {},
       "textFocus": {},
-      "truncatedContent": {},
+      "isTruncated": {},
       "labelText": {}
     };
   }
@@ -226,7 +232,7 @@ export class Label {
           "tags": []
         }
       },
-      "updateTooltipText": {
+      "syncLabelText": {
         "complexType": {
           "signature": "() => Promise<void>",
           "parameters": [],
@@ -238,7 +244,7 @@ export class Label {
           "return": "Promise<void>"
         },
         "docs": {
-          "text": "",
+          "text": "**[Internal]** Synchronizes the text on the remove button and tooltip. You should never have to use this.",
           "tags": []
         }
       }

package/dist/collection/components/label/resize-observer.js

@@ -1,11 +1,11 @@
-export const resizeObserver = new ResizeObserver((entries) => {
-  entries.forEach((entry) => {
-    const component = entry.target;
-    if (isDsoLabelComponent(component)) {
-      component.truncateLabel();
+import { debounce } from "debounce";
+export const resizeObserver = new ResizeObserver(debounce((entries) => {
+  entries.forEach(({ target }) => {
+    if (isDsoLabelComponent(target)) {
+      target.truncateLabel();
     }
   });
-});
+}, 150));
 function isDsoLabelComponent(element) {
   return element.truncateLabel !== undefined;
 }