@dso-toolkit/core 76.0.0 → 78.0.0

package/dist/{esm/has-overflow-CsY83cJO.js → bundle/p-DNULhBX2.js}

@@ -1,3 +1,7 @@
+import { p as proxyCustomElement, H, h, d as Host } from './p-Dm38fPV4.js';
+import { c as clsx } from './p-ChV9xqsO.js';
+import { d as debounce$1 } from './p-BxvZeNWe.js';
+
 var top = 'top';
 var bottom = 'bottom';
 var right = 'right';
@@ -1787,6 +1791,40 @@ var createPopper = /*#__PURE__*/popperGenerator({
   defaultModifiers: defaultModifiers
 }); // eslint-disable-next-line import/no-unused-modules
 
+var maxSize = {
+  name: 'maxSize',
+  enabled: true,
+  phase: 'main',
+  requiresIfExists: ['offset', 'preventOverflow', 'flip'],
+  fn: function fn(_ref) {
+    var state = _ref.state,
+        name = _ref.name,
+        options = _ref.options;
+    var overflow = detectOverflow(state, options);
+
+    var _ref2 = state.modifiersData.preventOverflow || {
+      x: 0,
+      y: 0
+    },
+        x = _ref2.x,
+        y = _ref2.y;
+
+    var _state$rects$popper = state.rects.popper,
+        width = _state$rects$popper.width,
+        height = _state$rects$popper.height;
+
+    var _state$placement$spli = state.placement.split('-'),
+        basePlacement = _state$placement$spli[0];
+
+    var widthProp = basePlacement === 'left' ? 'left' : 'right';
+    var heightProp = basePlacement === 'top' ? 'top' : 'bottom';
+    state.modifiersData[name] = {
+      width: width - overflow[widthProp] - x,
+      height: height - overflow[heightProp] - y
+    };
+  }
+};
+
 function hasOverflow(el) {
     const style = window.getComputedStyle(el);
     const overflowX = style.getPropertyValue("overflow-x");
@@ -1795,7 +1833,278 @@ function hasOverflow(el) {
     return overflowValues.indexOf(overflowX) !== -1 || overflowValues.indexOf(overflowY) !== -1;
 }
 
-export { beforeWrite as b, createPopper as c, detectOverflow as d, hasOverflow as h };
-//# sourceMappingURL=has-overflow-CsY83cJO.js.map
+const tooltipCss = "@charset \"UTF-8\";:host(.hidden){visibility:hidden}*,*::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:start;text-decoration:none;text-shadow:none;text-transform:none;letter-spacing:normal;overflow-wrap:anywhere;word-spacing:normal;word-wrap:normal;white-space:normal;--link-color:#39870c;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.in .tooltip-inner{max-block-size:200vh;overflow:auto;visibility:visible;padding-block:8px;padding-inline:16px}.tooltip:not(.in) .tooltip-inner{max-block-size:0;overflow:hidden;visibility:hidden;transition:all 0s linear 0.15s}.tooltip .tooltip-inner{background-color:#fff;border-radius:4px;color:#191919;display:inline-block;font-size:1rem;max-inline-size:640px;position:relative}.tooltip .tooltip-inner.dso-small{max-inline-size:320px}.tooltip .tooltip-arrow{border-color:transparent;border-style:solid;block-size:0;inline-size:0}.tooltip[data-popper-placement=top]{margin-block-start:-3px;padding-inline:0}.tooltip[data-popper-placement=top] .tooltip-arrow{inset-block-end:0;border-block-start-color:#fff;border-width:6px;border-block-end-width:0;margin-inline-start:var(--tooltip-margin-inline-start, -3px)}.tooltip[data-popper-placement=right]{margin-inline-start:3px;padding-inline-start:6px}.tooltip[data-popper-placement=right] .tooltip-arrow{inset-inline-start:0;border-inline-end-color:#fff;border-width:6px;border-inline-start-width:0;margin-block-start:var(--tooltip-margin-block-start, -3px)}.tooltip[data-popper-placement=bottom]{margin-block-start:3px;padding-block-start:6px;padding-inline:0}.tooltip[data-popper-placement=bottom] .tooltip-arrow{inset-block-start:0;border-block-end-color:#fff;border-width:6px;border-block-start-width:0;margin-inline-start:var(--tooltip-margin-inline-start, -3px)}.tooltip[data-popper-placement=left]{margin-inline-start:-3px;margin-inline-end:var(--tooltip-margin-inline-end, unset);padding-block:0;padding-inline-end:6px}.tooltip[data-popper-placement=left] .tooltip-arrow{inset-inline-end:0;border-inline-start-color:#fff;border-width:6px;border-inline-end-width:0;margin-block-start:var(--tooltip-margin-block-start, -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 Tooltip extends H {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.__attachShadow();
+        /**
+         * Defines if the tooltip is descriptive. A descriptive tooltip contains a meaningful message. Tooltips that are not descriptive are hidden from screenreaders using `aria-hidden`.
+         */
+        this.descriptive = false;
+        /**
+         * Set position of tooltip relative to target
+         */
+        this.position = "top";
+        /**
+         * Set position strategy of tooltip
+         */
+        this.strategy = "auto";
+        /**
+         * Set attribute `no-arrow` to hide the arrow
+         */
+        this.noArrow = false;
+        /**
+         * Whether or not to show the tooltip. To control the tooltip add the `active` attribute or use the `activate()` and `deactivate()` instance methods.
+         */
+        this.active = false;
+        this.callbacks = {
+            activate: () => (this.active = true),
+            deactivate: () => {
+                // Zie https://github.com/dso-toolkit/dso-toolkit/issues/2997#issuecomment-2654330094 voor de aanleiding
+                // van setTimeout() met 2ms.
+                setTimeout(() => {
+                    if (this.element.isConnected) {
+                        this.active = false;
+                    }
+                }, 2);
+            },
+        };
+        this.onMouseLeave = () => {
+            var _a;
+            if (!this.element.matches(":hover") && !((_a = this.target) === null || _a === void 0 ? void 0 : _a.matches(":hover"))) {
+                this.callbacks.deactivate();
+            }
+        };
+        this.hidden = true;
+        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);
+    }
+    /**
+     * Activate the tooltip (Sets the `active` attribute)
+     */
+    async activate() {
+        this.active = true;
+    }
+    /**
+     * Deactivate the tooltip (Removes the `active` attribute)
+     */
+    async deactivate() {
+        this.active = false;
+    }
+    watchPosition() {
+        if (!this.popper) {
+            return;
+        }
+        this.popper.setOptions({
+            placement: this.position,
+        });
+    }
+    watchStrategy() {
+        this.setStrategy();
+    }
+    setStrategy() {
+        if (!this.popper) {
+            return;
+        }
+        if (this.strategy === "absolute" || this.strategy === "fixed") {
+            this.popper.setOptions({
+                strategy: this.strategy,
+            });
+            return;
+        }
+        let element = this.element;
+        while (element && element.parentNode !== document) {
+            element = element.parentNode instanceof ShadowRoot ? element.parentNode.host : element.parentElement;
+            if (element !== null && hasOverflow(element)) {
+                this.popper.setOptions({
+                    strategy: "fixed",
+                });
+                return;
+            }
+        }
+        this.popper.setOptions({
+            strategy: "absolute",
+        });
+    }
+    watchActive() {
+        if (this.active) {
+            this.activatePopper();
+            if (!this.stateless) {
+                setTimeout(() => {
+                    var _a;
+                    (_a = this.popper) === null || _a === void 0 ? void 0 : _a.setOptions({
+                        modifiers: [{ name: "eventListeners", enabled: true }],
+                    });
+                    document.addEventListener("keydown", this.keyDownListener);
+                });
+            }
+        }
+        else {
+            document.removeEventListener("keydown", this.keyDownListener);
+            this.deactivatePopper();
+        }
+    }
+    listenClick(e) {
+        e.stopPropagation();
+    }
+    componentDidLoad() {
+        var _a;
+        const tooltip = (_a = this.element.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector(".tooltip");
+        if (!(tooltip instanceof H)) {
+            throw new Error("tooltip element is not instanceof HTMLElement");
+        }
+        if (!this.stateless && this.target) {
+            this.target.addEventListener("mouseenter", this.callbacks.activate);
+            [this.element, this.target].forEach((element) => element.addEventListener("mouseleave", this.onMouseLeave));
+            this.target.addEventListener("focus", this.callbacks.activate);
+            this.target.addEventListener("blur", this.callbacks.deactivate);
+        }
+    }
+    disconnectedCallback() {
+        var _a;
+        (_a = this.popper) === null || _a === void 0 ? void 0 : _a.destroy();
+        if (!this.stateless && this.target) {
+            this.target.removeEventListener("mouseenter", this.callbacks.activate);
+            [this.element, this.target].forEach((element) => element.removeEventListener("mouseleave", this.onMouseLeave));
+            this.target.removeEventListener("focus", this.callbacks.activate);
+            this.target.removeEventListener("blur", this.callbacks.deactivate);
+        }
+        this.target = undefined;
+    }
+    componentDidRender() {
+        var _a;
+        if (this.active) {
+            (_a = this.popper) === null || _a === void 0 ? void 0 : _a.update();
+        }
+    }
+    render() {
+        return (h(Host, { key: 'eff3b2b70b8a7dcf3a0cf044b455493eb150bb56', class: { hidden: this.hidden }, role: "tooltip", onClick: this.listenClick }, h("div", { key: 'f01664821ef0389bb10e30a5029e9e0d01dd4718', class: clsx("tooltip", { in: this.active }) }, !this.noArrow && h("div", { key: 'fd4b1942cf719a4df49049cd07383ae16f485d9f', "data-popper-arrow": true, class: "tooltip-arrow" }), h("div", { key: 'ad7b70bd41618de9b834cd8259f3485ac1b4670c', "aria-hidden": !this.descriptive || undefined, class: clsx("tooltip-inner", { "dso-small": this.small }) }, h("slot", { key: 'f3a11c6f3fa1c575295d7efeaa0992355245b59c' })))));
+    }
+    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 (this.target && tooltip instanceof H) {
+            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) {
+            console.warn("Unable to find reference tooltip has no [id] attribute.");
+            return;
+        }
+        const rootNode = this.element.getRootNode();
+        if (!(rootNode instanceof Document || rootNode instanceof ShadowRoot)) {
+            console.warn(`rootNode is not instance of Document or ShadowRoot`);
+            return;
+        }
+        const reference = rootNode.querySelector(`[aria-describedBy="${id}`);
+        if (!reference) {
+            console.warn(`Unable to find reference with aria-describedby ${id}`);
+            return;
+        }
+        __classPrivateFieldSet(this, _Tooltip_target, reference, "f");
+        return reference;
+    }
+    get element() { return this; }
+    static get watchers() { return {
+        "position": ["watchPosition"],
+        "strategy": ["watchStrategy"],
+        "active": ["watchActive"]
+    }; }
+    static get style() { return tooltipCss; }
+}, [257, "dso-tooltip", {
+        "descriptive": [516],
+        "position": [1],
+        "strategy": [1],
+        "noArrow": [4, "no-arrow"],
+        "stateless": [4],
+        "small": [4],
+        "active": [1540],
+        "hidden": [32],
+        "activate": [64],
+        "deactivate": [64]
+    }, undefined, {
+        "position": ["watchPosition"],
+        "strategy": ["watchStrategy"],
+        "active": ["watchActive"]
+    }]);
+_Tooltip_target = new WeakMap();
+function defineCustomElement() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["dso-tooltip"];
+    components.forEach(tagName => { switch (tagName) {
+        case "dso-tooltip":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, Tooltip);
+            }
+            break;
+    } });
+}
+
+export { Tooltip as T, defineCustomElement as d };
+//# sourceMappingURL=p-DNULhBX2.js.map
 
-//# sourceMappingURL=has-overflow-CsY83cJO.js.map
+//# sourceMappingURL=p-DNULhBX2.js.map