@dso-toolkit/core 88.1.1 → 90.0.0

package/dist/components/tooltip.functional-component.js

@@ -1,118 +1 @@
-import { a as autoUpdate, c as computePosition, o as offset, f as flip, s as shift, b as arrow, h as hide, d as size } from './floating-ui.dom.js';
-import { h } from '@stencil/core/internal/client';
-import { c as clsx } from './clsx.js';
-
-/**
- * Positions the Tooltip relative to its reference element.
- * The position is recalculated automatically on scroll, resize, or
- * element changes via `autoUpdate`, but is otherwise based only on the
- * provided arguments 'placementTip', 'topPositionSmallViewPort' and 'halfMainAxisOffset'.
- */
-function positionTooltip(options) {
-    const { referenceElement, tipRef, tipArrowRef, placementTip, topPositionSmallViewPort, halfMainAxisOffset, forceVisible, restrictContentElement, } = options;
-    return autoUpdate(referenceElement, tipRef, () => {
-        const padding = 5;
-        const arrowOffsetWidth = tipArrowRef.offsetWidth;
-        const axisOffsetCalc = Math.sqrt(2 * arrowOffsetWidth ** 2);
-        const mainAxisOffset = halfMainAxisOffset ? axisOffsetCalc / 2 : axisOffsetCalc;
-        const arrowPadding = arrowOffsetWidth * Math.sqrt(2) * 1.5;
-        const smallViewport = topPositionSmallViewPort && document.body.clientWidth < 992;
-        // Set placement to top if viewport is small and topPositionSmallViewPort is set to true
-        const placement = smallViewport ? "top" : placementTip;
-        computePosition(referenceElement, tipRef, {
-            strategy: "fixed",
-            middleware: [
-                offset({
-                    mainAxis: mainAxisOffset,
-                    alignmentAxis: -arrowPadding,
-                }),
-                flip({
-                    padding,
-                }),
-                shift({
-                    padding,
-                }),
-                arrow({
-                    padding: arrowOffsetWidth,
-                    element: tipArrowRef,
-                }),
-                hide({
-                    padding: arrowOffsetWidth + padding,
-                }),
-                restrictContentElement &&
-                    size({
-                        apply({ availableHeight, availableWidth }) {
-                            Object.assign(restrictContentElement.style, {
-                                maxHeight: `${availableHeight - padding}px`,
-                                maxWidth: `${availableWidth - padding * 2}px`,
-                            });
-                        },
-                    }),
-            ],
-            placement,
-        }).then(({ x, y, middlewareData, placement: computedPlacement, strategy }) => {
-            if (middlewareData.hide) {
-                // Tooltip needs to be visible at all times on small viewports or when forceVisible is true
-                const disappear = !smallViewport && !forceVisible && middlewareData.hide.referenceHidden;
-                Object.assign(tipRef.style, {
-                    // Both of these properties have a CSS transition
-                    visibility: disappear ? "hidden" : "visible",
-                    opacity: disappear ? 0 : 1,
-                });
-            }
-            Object.assign(tipRef.style, {
-                left: `${x}px`,
-                top: `${y}px`,
-                strategy,
-            });
-            const side = computedPlacement.split("-")[0];
-            const staticSide = side
-                ? {
-                    top: "bottom",
-                    right: "left",
-                    bottom: "top",
-                    left: "right",
-                }[side]
-                : "top";
-            let angle;
-            switch (staticSide) {
-                default:
-                case "top":
-                    angle = 45;
-                    break;
-                case "right":
-                    angle = 135;
-                    break;
-                case "bottom":
-                    angle = 225;
-                    break;
-                case "left":
-                    angle = 315;
-                    break;
-            }
-            if (middlewareData.arrow && staticSide) {
-                const { x: arrowX, y: arrowY } = middlewareData.arrow;
-                Object.assign(tipArrowRef.style, {
-                    right: "",
-                    bottom: "",
-                    left: arrowX ? `${arrowX}px` : "",
-                    top: arrowY ? `${arrowY}px` : "",
-                    [staticSide]: `${-arrowOffsetWidth / 2}px`,
-                    transform: `rotate(${angle}deg)`,
-                });
-            }
-        });
-    });
-}
-
-const Tooltip = ({ visible, onAfterHidden, tipElementRef, tipArrowElementRef }, children) => (h("div", { popover: "manual", id: "tooltip", class: clsx(["dso-tooltip", { visible }]), ref: tipElementRef, onTransitionEnd: (e) => {
-        e.stopPropagation();
-        if (e.propertyName === "opacity" && !visible) {
-            onAfterHidden === null || onAfterHidden === void 0 ? void 0 : onAfterHidden();
-        }
-    } }, h("span", { class: "tooltip-arrow", ref: tipArrowElementRef }), h("div", { class: "tooltip-inner" }, children)));
-
-export { Tooltip as T, positionTooltip as p };
-//# sourceMappingURL=tooltip.functional-component.js.map
-
-//# sourceMappingURL=tooltip.functional-component.js.map
+import{a as t,c as e,o as i,f as a,s as o,b as s,h as n,d as l}from"./floating-ui.dom.js";import{h as r}from"@stencil/core/internal/client";import{c as p}from"./clsx.js";function c(r){const{referenceElement:p,tipRef:c,tipArrowRef:d,placementTip:m,topPositionSmallViewPort:f,halfMainAxisOffset:b,forceVisible:x,restrictContentElement:g}=r;return t(p,c,(()=>{const t=d.offsetWidth,r=Math.sqrt(2*t**2),h=b?r/2:r,v=t*Math.sqrt(2)*1.5,y=f&&document.body.clientWidth<992,w=y?"top":m;e(p,c,{strategy:"fixed",middleware:[i({mainAxis:h,alignmentAxis:-v}),a({padding:5}),o({padding:5}),s({padding:t,element:d}),n({padding:t+5}),g&&l({apply({availableHeight:t,availableWidth:e}){Object.assign(g.style,{maxHeight:t-5+"px",maxWidth:e-10+"px"})}})],placement:w}).then((({x:e,y:i,middlewareData:a,placement:o,strategy:s})=>{if(a.hide){const t=!y&&!x&&a.hide.referenceHidden;Object.assign(c.style,{visibility:t?"hidden":"visible",opacity:t?0:1})}Object.assign(c.style,{left:`${e}px`,top:`${i}px`,strategy:s});const n=o.split("-")[0],l=n?{top:"bottom",right:"left",bottom:"top",left:"right"}[n]:"top";let r;switch(l){default:case"top":r=45;break;case"right":r=135;break;case"bottom":r=225;break;case"left":r=315}if(a.arrow&&l){const{x:e,y:i}=a.arrow;Object.assign(d.style,{right:"",bottom:"",left:e?`${e}px`:"",top:i?`${i}px`:"",[l]:-t/2+"px",transform:`rotate(${r}deg)`})}}))}))}const d=({visible:t,onAfterHidden:e,tipElementRef:i,tipArrowElementRef:a},o)=>r("div",{popover:"manual",id:"tooltip",class:p(["dso-tooltip",{visible:t}]),ref:i,onTransitionEnd:i=>{i.stopPropagation(),"opacity"!==i.propertyName||t||e?.()}},r("span",{class:"tooltip-arrow",ref:a}),r("div",{class:"tooltip-inner"},o));export{d as T,c as p}