@dso-toolkit/core 52.0.1 → 52.0.2

package/dist/collection/components/tooltip/tooltip.js

@@ -1,30 +1,59 @@
+var __classPrivateFieldGet = (this && this.__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 = (this && this.__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;
 import { beforeWrite, createPopper } from "@popperjs/core";
 import maxSize from "popper-max-size-modifier";
 import { h, Host } from "@stencil/core";
 import clsx from "clsx";
 import { hasOverflow } from "../../utils/has-overflow";
+import debounce from "debounce";
 // 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: 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` });
+  },
+};
 export class Tooltip {
   constructor() {
-    this.applyMaxSize = {
-      name: "applyMaxSize",
-      enabled: true,
-      phase: 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 = debounce(() => {
+      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";
@@ -82,9 +111,8 @@ export class Tooltip {
     });
   }
   watchActive() {
-    var _a;
     if (this.active) {
-      this.hidden = false;
+      this.activatePopper();
       if (!this.stateless) {
         setTimeout(() => {
           var _a;
@@ -96,13 +124,8 @@ export class Tooltip {
       }
     }
     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) {
@@ -110,25 +133,10 @@ export class Tooltip {
   }
   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 = 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);
@@ -139,18 +147,16 @@ export class Tooltip {
   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();
     }
@@ -158,7 +164,34 @@ export class Tooltip {
   render() {
     return (h(Host, { class: { hidden: this.hidden }, role: "tooltip" }, 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(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 = 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`);
@@ -167,6 +200,7 @@ export class Tooltip {
     if (!reference) {
       throw new Error(`Unable to find reference with aria-describedby ${id}`);
     }
+    __classPrivateFieldSet(this, _Tooltip_target, reference, "f");
     return reference;
   }
   static get is() { return "dso-tooltip"; }
@@ -373,3 +407,4 @@ export class Tooltip {
       }];
   }
 }
+_Tooltip_target = new WeakMap();

package/dist/collection/components/viewer-grid/viewer-grid.js

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

package/dist/components/dso-label.js

@@ -1,28 +1,16 @@
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
 import { c as clsx } from './clsx.m.js';
+import { d as debounce_1 } from './index3.js';
 import { d as defineCustomElement$3 } from './icon.js';
 import { d as defineCustomElement$2 } from './tooltip.js';
 
-const mutationObserver = new MutationObserver((entries) => {
-  entries.forEach((entry) => {
-    const component = entry.target;
-    if (isDsoLabelComponent$1(component)) {
-      component.updateTooltipText();
+const resizeObserver = new ResizeObserver(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;
 }
@@ -53,8 +41,8 @@ const Label = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     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,44 +64,51 @@ const Label = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   }
   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,
@@ -121,7 +116,7 @@ const Label = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
         "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))));
   }
   get host() { return this; }
   static get watchers() { return {
@@ -139,10 +134,10 @@ const Label = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     "removeFocus": [32],
     "textHover": [32],
     "textFocus": [32],
-    "truncatedContent": [32],
+    "isTruncated": [32],
     "labelText": [32],
     "truncateLabel": [64],
-    "updateTooltipText": [64]
+    "syncLabelText": [64]
   }]);
 Label.statusMap = new Map([
   ["info", "Opmerking"],

package/dist/components/dso-viewer-grid.js

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

package/dist/components/tooltip.js

@@ -1,6 +1,7 @@
 import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
-import { d as detectOverflow, b as beforeWrite, h as hasOverflow, c as createPopper } from './has-overflow.js';
+import { d as detectOverflow, h as hasOverflow, c as createPopper, b as beforeWrite } from './has-overflow.js';
 import { c as clsx } from './clsx.m.js';
+import { d as debounce_1 } from './index3.js';
 
 var maxSize = {
   name: 'maxSize',
@@ -38,31 +39,59 @@ 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: 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 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   constructor() {
     super();
     this.__registerHost();
     this.__attachShadow();
-    this.applyMaxSize = {
-      name: "applyMaxSize",
-      enabled: true,
-      phase: 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 = 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";
@@ -120,9 +149,8 @@ const Tooltip = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     });
   }
   watchActive() {
-    var _a;
     if (this.active) {
-      this.hidden = false;
+      this.activatePopper();
       if (!this.stateless) {
         setTimeout(() => {
           var _a;
@@ -134,13 +162,8 @@ const Tooltip = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
       }
     }
     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) {
@@ -148,25 +171,10 @@ const Tooltip = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   }
   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 = 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);
@@ -177,18 +185,16 @@ const Tooltip = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   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();
     }
@@ -196,7 +202,34 @@ const Tooltip = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   render() {
     return (h(Host, { class: { hidden: this.hidden }, role: "tooltip" }, 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(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 = 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`);
@@ -205,6 +238,7 @@ const Tooltip = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     if (!reference) {
       throw new Error(`Unable to find reference with aria-describedby ${id}`);
     }
+    __classPrivateFieldSet(this, _Tooltip_target, reference, "f");
     return reference;
   }
   get element() { return this; }
@@ -226,6 +260,7 @@ const Tooltip = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     "activate": [64],
     "deactivate": [64]
   }, [[0, "click", "listenClick"]]]);
+_Tooltip_target = new WeakMap();
 function defineCustomElement() {
   if (typeof customElements === "undefined") {
     return;

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

@@ -1 +1 @@
-import{p as e,b as o}from"./p-98fd1658.js";(()=>{const o=import.meta.url,a={};return""!==o&&(a.resourcesUrl=new URL(".",o).href),e(a)})().then((e=>o([["p-efdf5c91",[[1,"dso-icon",{icon:[1]}]]],["p-0fce0861",[[1,"dso-map-base-layers",{group:[1],baseLayers:[16]}]]],["p-f8a08ba1",[[1,"dso-map-overlays",{group:[1],overlays:[16]}]]],["p-f3f0d6c9",[[4,"dso-annotation-output",{identifier:[1],annotationPrefix:[1,"annotation-prefix"],toggleAnnotation:[64]}]]],["p-d4772fb0",[[1,"dso-toggletip",{label:[1],position:[1],small:[4],secondary:[4],active:[32]}]]],["p-9984079e",[[1,"dso-expandable-heading",{open:[4],heading:[1],color:[1]}]]],["p-4c8426b7",[[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]}]]],["p-0f37693a",[[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]}]]],["p-09424a1d",[[1,"dso-pagination",{totalPages:[2,"total-pages"],currentPage:[2,"current-page"],formatHref:[16],availablePositions:[32]},[[0,"dsoSizeChange","sizeChangeHandler"]]]]],["p-588bc4d7",[[1,"dso-tree-view",{collection:[16],focusItem:[64]}]]],["p-147ec7bd",[[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]}]]],["p-5082d823",[[1,"dso-alert",{status:[1],roleAlert:[4,"role-alert"]}]]],["p-ee1acb32",[[0,"dso-annotation-button",{identifier:[1]}]]],["p-d6ea8670",[[1,"dso-attachments-counter",{count:[2]}]]],["p-c54ad578",[[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"]]]]],["p-d05ea304",[[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"]]]]],["p-43f3d736",[[1,"dso-helpcenter-panel",{label:[1],url:[1],visibility:[32],isOpen:[32],slideState:[32],loadIframe:[32]},[[8,"keydown","keyDownListener"]]]]],["p-9b07b034",[[1,"dso-image-overlay",{active:[32],zoomable:[32]},[[2,"load","loadListener"]]]]],["p-ba0da696",[[1,"dso-list-button",{label:[1],sublabel:[1],subcontent:[1],count:[2],min:[8],max:[8],checked:[516],disabled:[516],manualInputWrapperElement:[32],manualCount:[32]}]]],["p-4b18389c",[[1,"dso-map-controls",{open:[1540],disableZoom:[1,"disable-zoom"],hideContent:[32],toggleVisibility:[64]}]]],["p-e4f667b3",[[1,"dso-modal",{modalTitle:[1,"modal-title"],role:[1],showCloseButton:[4,"show-close-button"],initialFocus:[1,"initial-focus"],ariaId:[32],hasFooter:[32]}]]],["p-96efc763",[[1,"dso-table",{noModal:[516,"no-modal"],isResponsive:[516,"is-responsive"],modalActive:[32],placeholderHeight:[32]}]]],["p-4d70d9c0",[[1,"dso-viewer-grid",{filterpanelOpen:[516,"filterpanel-open"],overlayOpen:[516,"overlay-open"],initialMainSize:[1,"initial-main-size"],mainSize:[32]}]]],["p-ad0b38cf",[[1,"dso-accordion",{variant:[513],reverseAlign:[516,"reverse-align"],allowMultipleOpen:[516,"allow-multiple-open"],getState:[64],toggleSection:[64],animationEnd:[64],closeOpenSections:[64]}]]],["p-07952ece",[[1,"dso-badge",{status:[1]}]]],["p-1cb94d7d",[[1,"dso-banner",{status:[513]}]]],["p-61ac8d40",[[1,"dso-card",{isSelectable:[516,"is-selectable"],hasImage:[516,"has-image"],clickable:[4],imageShape:[513,"image-shape"]}]]],["p-22f9240a",[[1,"dso-card-container",{mode:[513]}]]],["p-c1226b66",[[1,"dso-highlight-box",{yellow:[4],border:[4],white:[4],dropShadow:[4,"drop-shadow"],step:[2]}]]],["p-e6e9f613",[[6,"dso-ozon-content",{content:[1],inline:[516],deleted:[516],interactive:[520],state:[32]}]]],["p-494fe8e5",[[1,"dso-progress-bar",{progress:[2],min:[2],max:[2]}]]],["p-82465cdc",[[4,"dso-slide-toggle",{checked:[4],disabled:[4],accessibleLabel:[1,"accessible-label"],labelledbyId:[1,"labelledby-id"],identifier:[1],hasVisibleLabel:[32]}]]],["p-e3bd7689",[[1,"dso-dropdown-menu",{open:[1540],dropdownAlign:[1,"dropdown-align"],checkable:[4],boundary:[1],strategy:[1]}]]],["p-452c7fbb",[[1,"dso-expandable",{open:[516]}]]],["p-0af9bfb1",[[1,"dso-progress-indicator",{label:[1],size:[513],block:[4]}]]],["p-d987ef37",[[1,"dso-responsive-element",{sizeAlias:[32],sizeWidth:[32],getSize:[64]}]]],["p-bdc3b14b",[[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"]]]]],["p-3914ad70",[[1,"dso-info-button",{active:[1540],secondary:[4],label:[1],hover:[32],setFocus:[64]}]]],["p-4ae40ddc",[[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]}]]]],e)));
+import{p as e,b as o}from"./p-98fd1658.js";(()=>{const o=import.meta.url,a={};return""!==o&&(a.resourcesUrl=new URL(".",o).href),e(a)})().then((e=>o([["p-efdf5c91",[[1,"dso-icon",{icon:[1]}]]],["p-0fce0861",[[1,"dso-map-base-layers",{group:[1],baseLayers:[16]}]]],["p-f8a08ba1",[[1,"dso-map-overlays",{group:[1],overlays:[16]}]]],["p-f3f0d6c9",[[4,"dso-annotation-output",{identifier:[1],annotationPrefix:[1,"annotation-prefix"],toggleAnnotation:[64]}]]],["p-d4772fb0",[[1,"dso-toggletip",{label:[1],position:[1],small:[4],secondary:[4],active:[32]}]]],["p-9984079e",[[1,"dso-expandable-heading",{open:[4],heading:[1],color:[1]}]]],["p-4c8426b7",[[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]}]]],["p-8a0a97de",[[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]}]]],["p-09424a1d",[[1,"dso-pagination",{totalPages:[2,"total-pages"],currentPage:[2,"current-page"],formatHref:[16],availablePositions:[32]},[[0,"dsoSizeChange","sizeChangeHandler"]]]]],["p-588bc4d7",[[1,"dso-tree-view",{collection:[16],focusItem:[64]}]]],["p-147ec7bd",[[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]}]]],["p-5082d823",[[1,"dso-alert",{status:[1],roleAlert:[4,"role-alert"]}]]],["p-ee1acb32",[[0,"dso-annotation-button",{identifier:[1]}]]],["p-d6ea8670",[[1,"dso-attachments-counter",{count:[2]}]]],["p-c54ad578",[[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"]]]]],["p-d05ea304",[[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"]]]]],["p-43f3d736",[[1,"dso-helpcenter-panel",{label:[1],url:[1],visibility:[32],isOpen:[32],slideState:[32],loadIframe:[32]},[[8,"keydown","keyDownListener"]]]]],["p-9b07b034",[[1,"dso-image-overlay",{active:[32],zoomable:[32]},[[2,"load","loadListener"]]]]],["p-ba0da696",[[1,"dso-list-button",{label:[1],sublabel:[1],subcontent:[1],count:[2],min:[8],max:[8],checked:[516],disabled:[516],manualInputWrapperElement:[32],manualCount:[32]}]]],["p-4b18389c",[[1,"dso-map-controls",{open:[1540],disableZoom:[1,"disable-zoom"],hideContent:[32],toggleVisibility:[64]}]]],["p-e4f667b3",[[1,"dso-modal",{modalTitle:[1,"modal-title"],role:[1],showCloseButton:[4,"show-close-button"],initialFocus:[1,"initial-focus"],ariaId:[32],hasFooter:[32]}]]],["p-96efc763",[[1,"dso-table",{noModal:[516,"no-modal"],isResponsive:[516,"is-responsive"],modalActive:[32],placeholderHeight:[32]}]]],["p-1ab86eed",[[1,"dso-viewer-grid",{filterpanelOpen:[516,"filterpanel-open"],overlayOpen:[516,"overlay-open"],initialMainSize:[1,"initial-main-size"],mainSize:[32]}]]],["p-ad0b38cf",[[1,"dso-accordion",{variant:[513],reverseAlign:[516,"reverse-align"],allowMultipleOpen:[516,"allow-multiple-open"],getState:[64],toggleSection:[64],animationEnd:[64],closeOpenSections:[64]}]]],["p-07952ece",[[1,"dso-badge",{status:[1]}]]],["p-1cb94d7d",[[1,"dso-banner",{status:[513]}]]],["p-61ac8d40",[[1,"dso-card",{isSelectable:[516,"is-selectable"],hasImage:[516,"has-image"],clickable:[4],imageShape:[513,"image-shape"]}]]],["p-22f9240a",[[1,"dso-card-container",{mode:[513]}]]],["p-c1226b66",[[1,"dso-highlight-box",{yellow:[4],border:[4],white:[4],dropShadow:[4,"drop-shadow"],step:[2]}]]],["p-e6e9f613",[[6,"dso-ozon-content",{content:[1],inline:[516],deleted:[516],interactive:[520],state:[32]}]]],["p-494fe8e5",[[1,"dso-progress-bar",{progress:[2],min:[2],max:[2]}]]],["p-82465cdc",[[4,"dso-slide-toggle",{checked:[4],disabled:[4],accessibleLabel:[1,"accessible-label"],labelledbyId:[1,"labelledby-id"],identifier:[1],hasVisibleLabel:[32]}]]],["p-e3bd7689",[[1,"dso-dropdown-menu",{open:[1540],dropdownAlign:[1,"dropdown-align"],checkable:[4],boundary:[1],strategy:[1]}]]],["p-452c7fbb",[[1,"dso-expandable",{open:[516]}]]],["p-0af9bfb1",[[1,"dso-progress-indicator",{label:[1],size:[513],block:[4]}]]],["p-d987ef37",[[1,"dso-responsive-element",{sizeAlias:[32],sizeWidth:[32],getSize:[64]}]]],["p-3b83e9c6",[[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"]]]]],["p-3914ad70",[[1,"dso-info-button",{active:[1540],secondary:[4],label:[1],hover:[32],setFocus:[64]}]]],["p-4ae40ddc",[[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]}]]]],e)));