@dso-toolkit/core 73.2.1 → 73.3.0

package/dist/cjs/dso-onboarding-tip.cjs.entry.js

@@ -1661,7 +1661,7 @@ const computePosition = (reference, floating, options) => {
   });
 };
 
-const onboardingTipCss = "*,*::after,*::before{box-sizing:border-box}.sr-only{position:absolute;inline-size:1px;block-size:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);border:0}::slotted([slot=heading]){display:flex !important;align-items:center !important;margin-block-end:0 !important;margin-block-start:0 !important;color:#fff !important;line-height:1.375 !important}:host{--_dso-button-primary-background-color:#fff;--_dso-button-primary-border-color:#fff;--_dso-button-primary-color:#000;--_dso-button-primary-hover-background-color:#ccc;--_dso-button-primary-hover-border-color:#ccc;--_dso-button-primary-hover-color:#000;--_dso-button-primary-active-background-color:#999;--_dso-button-primary-active-border-color:#999;--_dso-button-primary-active-color:#000;--_dso-button-primary-disabled-background-color:#fff;--_dso-button-primary-disabled-border-color:#fff;--_dso-button-primary-disabled-color:#b2b2b2;--_dso-button-secondary-background-color:#fff;--_dso-button-secondary-border-color:#fff;--_dso-button-secondary-color:#000;--_dso-button-secondary-hover-background-color:#ccc;--_dso-button-secondary-hover-border-color:#ccc;--_dso-button-secondary-hover-color:#000;--_dso-button-secondary-active-background-color:#999;--_dso-button-secondary-active-border-color:#999;--_dso-button-secondary-active-color:#000;--_dso-button-secondary-disabled-background-color:#fff;--_dso-button-secondary-disabled-border-color:#fff;--_dso-button-secondary-disabled-color:#b2b2b2;display:block;filter:drop-shadow(2px 2px 16px rgba(0, 0, 0, 0.4))}:host([popover]){margin:0 !important;border:0;padding:0;background-color:transparent;overflow:unset}.onboarding-tip{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;font-size:14px;inset-block-start:0;inset-inline-start:0;z-index:410}@media screen and (max-width: 360px){.onboarding-tip{padding-inline-start:8px !important}}.dso-close{-webkit-appearance:button;color:inherit;cursor:pointer;font:inherit;font-family:inherit;font-size:inherit;line-height:inherit;margin:0;overflow:visible;text-transform:none;position:absolute;inset-block-start:0;inset-inline-end:0;block-size:32px;inline-size:32px;padding:0;background-color:transparent;border:0;text-align:center}.dso-close[disabled]{cursor:default}.dso-close::-moz-focus-inner{border:0;padding:0}.onboarding-tip-inner{--link-color:#fff;--link-hover-color:#b2b2b2;--link-visited-color:#7f7f7f;max-inline-size:min(360px, 100vw - 2 * 8px);max-block-size:40vh;overflow:auto;padding-block:32px 8px;padding-inline:8px;border-radius:4px;display:block;font-size:1rem;position:relative;z-index:2}.onboarding-tip-inner{background-color:#2b5780;border-color:#2b5780;color:#fff}.onboarding-tip-arrow{border-start-start-radius:4px;position:absolute;block-size:20px;inline-size:20px;background:#2b5780;z-index:1;pointer-events:none}.onboarding-tip-content-wrapper{padding-inline:16px;padding-block-end:16px}.onboarding-tip-content-heading{display:flex}.onboarding-tip-content-heading dso-icon{margin-inline-end:8px}";
+const onboardingTipCss = "*,*::after,*::before{box-sizing:border-box}.sr-only{position:absolute;inline-size:1px;block-size:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);border:0}::slotted([slot=heading]){display:flex !important;align-items:center !important;margin-block-end:0 !important;margin-block-start:0 !important;color:#fff !important;line-height:1.375 !important}:host{--_dso-button-primary-background-color:#fff;--_dso-button-primary-border-color:#fff;--_dso-button-primary-color:#000;--_dso-button-primary-hover-background-color:#ccc;--_dso-button-primary-hover-border-color:#ccc;--_dso-button-primary-hover-color:#000;--_dso-button-primary-active-background-color:#999;--_dso-button-primary-active-border-color:#999;--_dso-button-primary-active-color:#000;--_dso-button-primary-disabled-background-color:#fff;--_dso-button-primary-disabled-border-color:#fff;--_dso-button-primary-disabled-color:#b2b2b2;--_dso-button-secondary-background-color:#fff;--_dso-button-secondary-border-color:#fff;--_dso-button-secondary-color:#000;--_dso-button-secondary-hover-background-color:#ccc;--_dso-button-secondary-hover-border-color:#ccc;--_dso-button-secondary-hover-color:#000;--_dso-button-secondary-active-background-color:#999;--_dso-button-secondary-active-border-color:#999;--_dso-button-secondary-active-color:#000;--_dso-button-secondary-disabled-background-color:#fff;--_dso-button-secondary-disabled-border-color:#fff;--_dso-button-secondary-disabled-color:#b2b2b2;display:block;filter:drop-shadow(2px 2px 16px rgba(0, 0, 0, 0.4));transition:visibility 400ms, opacity 400ms}:host(:not([ready])){opacity:1;animation:400ms ease-in 1 normal both fadeInOpacity}:host([popover]){margin:0 !important;border:0;padding:0;background-color:transparent;overflow:unset}.onboarding-tip{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;font-size:14px;inset-block-start:0;inset-inline-start:0;z-index:410}@media screen and (max-width: 360px){.onboarding-tip{padding-inline-start:8px !important}}.dso-close{-webkit-appearance:button;color:inherit;cursor:pointer;font:inherit;font-family:inherit;font-size:inherit;line-height:inherit;margin:0;overflow:visible;text-transform:none;position:absolute;inset-block-start:0;inset-inline-end:0;block-size:32px;inline-size:32px;padding:0;background-color:transparent;border:0;text-align:center}.dso-close[disabled]{cursor:default}.dso-close::-moz-focus-inner{border:0;padding:0}.onboarding-tip-inner{--link-color:#fff;--link-hover-color:#b2b2b2;--link-visited-color:#7f7f7f;max-inline-size:min(360px, 100vw - 2 * 8px);max-block-size:calc(100vh - 10px);overflow:auto;padding-block:32px 8px;padding-inline:8px;border-radius:4px;display:block;font-size:1rem;position:relative;z-index:2}.onboarding-tip-inner{background-color:#2b5780;border-color:#2b5780;color:#fff}@media screen and (max-width: 991px){.onboarding-tip-inner{max-block-size:unset}}.onboarding-tip-arrow{border-start-start-radius:4px;position:absolute;block-size:20px;inline-size:20px;background:#2b5780;z-index:1;pointer-events:none}.onboarding-tip-content-wrapper{padding-inline:16px;padding-block-end:16px}.onboarding-tip-content-heading{display:flex}.onboarding-tip-content-heading dso-icon{margin-inline-end:8px}@keyframes fadeInOpacity{0%{opacity:0}100%{opacity:1}}";
 
 const OnboardingTip = class {
     constructor(hostRef) {
@@ -1671,6 +1671,7 @@ const OnboardingTip = class {
          * Where to place the Onboarding Tip relative to its reference element.
          */
         this.placement = "right";
+        this.ready = false;
     }
     componentDidRender() {
         if (!this.host.matches(":popover-open")) {
@@ -1692,16 +1693,25 @@ const OnboardingTip = class {
      * This function positions the Onboarding Tip relative to its reference element. It is static so the position is calculated
      * only using the passed arguments.
      */
-    static positionTip(referenceElement, tipRef, tipArrowRef, placement) {
-        // Get half the arrow box's hypotenuse length
-        const arrowLength = tipArrowRef.offsetWidth;
-        const floatingOffset = Math.sqrt(2 * arrowLength ** 2) / 2;
+    static positionTip(referenceElement, tipRef, tipArrowRef, position) {
         const padding = 5;
         return autoUpdate(referenceElement, tipRef, () => {
+            const arrowLength = tipArrowRef.offsetWidth;
+            // Get half the arrow box's hypotenuse length
+            const mainAxisOffset = Math.sqrt(2 * arrowLength ** 2) / 2;
+            // 1.5 times the diagonal of the arrow box
+            const arrowPadding = arrowLength * Math.sqrt(2) * 1.5;
+            // Same as media-query-breakpoints.$screen-md-min
+            const smallViewport = document.body.clientWidth < 992;
+            // Only use top and bottom placement when the viewport is small
+            const placement = smallViewport ? "top" : `${position}-start`;
             computePosition(referenceElement, tipRef, {
                 strategy: "fixed",
                 middleware: [
-                    offset(floatingOffset),
+                    offset({
+                        mainAxis: mainAxisOffset,
+                        alignmentAxis: -arrowPadding,
+                    }),
                     flip({
                         padding,
                     }),
@@ -1709,18 +1719,22 @@ const OnboardingTip = class {
                         padding,
                     }),
                     arrow({
-                        padding: padding + arrowLength,
+                        padding: arrowPadding,
                         element: tipArrowRef,
                     }),
                     hide({
-                        padding: 42,
+                        padding: arrowPadding + arrowLength + padding,
                     }),
                 ],
                 placement,
             }).then(({ x, y, middlewareData, placement: computedPlacement }) => {
                 if (middlewareData.hide) {
+                    // Tooltip needs to be visible at all times on small viewports
+                    const disappear = !smallViewport && middlewareData.hide.referenceHidden;
                     Object.assign(tipRef.style, {
-                        visibility: middlewareData.hide.referenceHidden ? "hidden" : "visible",
+                        // Both of these properties have a CSS transition
+                        visibility: disappear ? "hidden" : "visible",
+                        opacity: disappear ? 0 : 1,
                     });
                 }
                 Object.assign(tipRef.style, {
@@ -1767,7 +1781,7 @@ const OnboardingTip = class {
         });
     }
     render() {
-        return (index.h(index.Host, { key: '7c5150901a9ecbe69c373333009130db322d2303', popover: "manual" }, index.h("div", { key: 'ea013d32e5d7b74da14d420ca37a4eaffe377270', class: "onboarding-tip", role: "tooltip" }, index.h("div", { key: 'adb76bcf17737a81ff9a84e091b95c706261588a', class: "onboarding-tip-inner" }, index.h("div", { key: '9485bf312830f8788e3768719ced93d589c35de0', class: "onboarding-tip-content-wrapper" }, this.headingSlottedElement !== null && (index.h("div", { key: '545450463fbf1c144481f5fa0cdf2b80744d3771', class: "onboarding-tip-content-heading" }, index.h("dso-icon", { key: '9c2ae3b0e5c6f3eb496dbbd46168ad10f417f4ab', icon: "light-bulb" }), index.h("slot", { key: 'a1db25995416339c41d1d2828a8b9257222a0917', name: "heading" }))), index.h("button", { key: '0a54cb67e9927602923fbda804f0839b1d995c4f', type: "button", class: "dso-close", onClick: (e) => this.dsoClose.emit({ originalEvent: e }) }, index.h("dso-icon", { key: 'e6c5d482f8ec171a6dd2969b66ac92b71d24bf8c', icon: "times" }), index.h("span", { key: '569fd4ac7d43b90c9c85d245636f34101dd28184', class: "sr-only" }, "Sluiten")), index.h("slot", { key: '984b8f980fa33e8d82a479c8c2a3b27a6645ee05' }))), index.h("div", { key: '7d0158f6329dec134ae9e049ce2110cbb4f27adf', class: "onboarding-tip-arrow", ref: (ref) => (this.tipArrowRef = ref) }))));
+        return (index.h(index.Host, { key: 'f8cf37b8d7e355da0d6405553d9b711a342ff35b', popover: "manual", ready: this.ready, onAnimationend: () => (this.ready = true) }, index.h("div", { key: '2c24f70065a1739ac15645a2b95d0d1e7170bd69', class: "onboarding-tip", role: "tooltip" }, index.h("div", { key: '36ff549f3ee6540d95253aef4d42073f82c4e6ff', class: "onboarding-tip-inner" }, index.h("div", { key: '1679ac6427bf11e5204bd0558c2e3eb97e79f565', class: "onboarding-tip-content-wrapper" }, this.headingSlottedElement !== null && (index.h("div", { key: 'cd2ed8f12e580239a9f3b17f0c68e3cc47a354e3', class: "onboarding-tip-content-heading" }, index.h("dso-icon", { key: '75a04ff5bcf97b13350be0f9b73a1c4a2551469b', icon: "light-bulb" }), index.h("slot", { key: 'befb042560938e167ce7a4ddded30589cba74837', name: "heading" }))), index.h("button", { key: 'a39a55d736676f329ae0fb491dd20468c7a8ef90', type: "button", class: "dso-close", onClick: (e) => this.dsoClose.emit({ originalEvent: e }) }, index.h("dso-icon", { key: '32bd8339c3df104862246bc984ae590fe9134041', icon: "times" }), index.h("span", { key: '96e88dded1b34e9acee34a7e5a17416aee068f25', class: "sr-only" }, "Sluiten")), index.h("slot", { key: 'bdcee07fc2629e1026c8eb3a525d215305dcdb93' }))), index.h("div", { key: '2ce90e310b4e3b5b09bf155617b7280508551d72', class: "onboarding-tip-arrow", ref: (ref) => (this.tipArrowRef = ref) }))));
     }
     get headingSlottedElement() {
         return this.host.querySelector("[slot='heading']");