@getflip/swirl-components 0.391.0 → 0.392.0

package/dist/components/media-query.service.js

@@ -1,4 +1,4 @@
-import { t as getDesktopMediaQuery } from './utils.js';
+import { u as getDesktopMediaQuery } from './utils.js';
 
 class DesktopMediaQueryService {
     constructor() {

package/dist/components/swirl-tooltip2.js

@@ -1,8 +1,9 @@
 import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
 import { u, P, N, D, k, b } from './floating-ui.dom.browser.min.js';
 import { c as classNames } from './index2.js';
+import { t as getPixelsFromRemToken } from './utils.js';
 
-const swirlTooltipCss = ":host{display:contents;font-weight:var(--s-font-weight-normal)}:host *{box-sizing:border-box}.tooltip{display:contents}.tooltip--active .tooltip__popper{display:block}.tooltip--visible .tooltip__popper{animation:tooltip-fade-in 0.15s;animation-delay:0.1s;animation-fill-mode:forwards;opacity:0}.tooltip--actual-placement-top .tooltip__arrow{top:calc(100% - 0.0625rem);transform:translate3d(0, -50%, 0) rotate(45deg)}.tooltip--actual-placement-bottom .tooltip__arrow{bottom:calc(100% - 0.0625rem);transform:translate3d(0, 50%, 0) rotate(45deg)}.tooltip--actual-placement-left .tooltip__arrow{left:calc(100% - 0.0625rem);transform:translate3d(-50%, 0, 0) rotate(45deg)}.tooltip--actual-placement-right .tooltip__arrow{right:calc(100% - 0.0625rem);transform:translate3d(50%, 0, 0) rotate(45deg)}.tooltip .tooltip__reference{display:contents}.tooltip__popper{position:absolute;z-index:var(--s-z-40);display:none;max-width:17.5rem;opacity:0}.tooltip__bubble{position:relative;display:block;padding-top:var(--s-space-8);padding-right:var(--s-space-12);padding-bottom:calc(var(--s-space-8) + 0.0625rem);padding-left:var(--s-space-12);border-radius:var(--s-border-radius-sm);color:var(--s-text-on-status);background-color:var(--s-surface-neutral-default);line-height:var(--s-line-height-base);box-shadow:var(--s-shadow-level-2)}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.tooltip__bubble{font-size:var(--s-font-size-sm);line-height:var(--s-line-height-sm)}}.tooltip__content{white-space:normal}.tooltip__arrow{position:absolute;width:0.6875rem;height:0.6875rem;border-radius:0.125rem;background-color:var(--s-surface-neutral-default)}@keyframes tooltip-fade-in{from{opacity:0}to{opacity:1}}";
+const swirlTooltipCss = ":host{display:contents;font-weight:var(--s-font-weight-normal)}:host *{box-sizing:border-box}.tooltip{display:contents}.tooltip--active .tooltip__popper{display:block}.tooltip--visible .tooltip__popper{animation:tooltip-fade-in 0.15s;animation-delay:0.1s;animation-fill-mode:forwards;opacity:0}.tooltip--actual-placement-top .tooltip__arrow{top:calc(100% - 0.0625rem);transform:translate3d(0, -50%, 0) rotate(45deg)}.tooltip--actual-placement-bottom .tooltip__arrow{bottom:calc(100% - 0.0625rem);transform:translate3d(0, 50%, 0) rotate(45deg)}.tooltip--actual-placement-left .tooltip__arrow{left:calc(100% - 0.0625rem);transform:translate3d(-50%, 0, 0) rotate(45deg)}.tooltip--actual-placement-right .tooltip__arrow{right:calc(100% - 0.0625rem);transform:translate3d(50%, 0, 0) rotate(45deg)}.tooltip .tooltip__reference{display:contents}.tooltip__popper{position:absolute;z-index:var(--s-z-40);display:none;max-width:17.5rem;opacity:0}.tooltip__bubble{position:relative;display:block;padding-top:var(--s-space-8);padding-right:var(--s-space-12);padding-bottom:calc(var(--s-space-8) + 0.0625rem);padding-left:var(--s-space-12);border-radius:var(--s-border-radius-sm);color:var(--s-text-on-status);background-color:var(--s-surface-neutral-default);line-height:var(--s-line-height-base);box-shadow:var(--s-shadow-level-2)}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.tooltip__bubble{font-size:var(--s-font-size-sm);line-height:var(--s-line-height-sm)}}.tooltip__content{white-space:normal}.tooltip__arrow{position:absolute;width:0.6875rem;height:0.6875rem;border-radius:0.125rem;background-color:var(--s-surface-neutral-default)}.tooltip--promo .tooltip__bubble,.tooltip--promo .tooltip__arrow{background-color:var(--s-surface-info-default)}@keyframes tooltip-fade-in{from{opacity:0}to{opacity:1}}";
 
 const SwirlTooltip = /*@__PURE__*/ proxyCustomElement(class SwirlTooltip extends HTMLElement {
     constructor() {
@@ -13,9 +14,16 @@ const SwirlTooltip = /*@__PURE__*/ proxyCustomElement(class SwirlTooltip extends
         this.delay = 200;
         this.position = "top";
         this.positioning = "absolute";
+        /**
+         * If set to true, tooltip will be initially visible.
+         * It will only be dismissible via a click and will not reappear.
+         * Tooltip will have a blue background color.
+         */
+        this.isPromo = false;
         this.visible = false;
+        this.isPromoShown = false;
         this.onKeydown = (event) => {
-            if (event.code === "Escape") {
+            if (event.code === "Escape" && !this.isPromo) {
                 this.hide();
             }
         };
@@ -37,7 +45,7 @@ const SwirlTooltip = /*@__PURE__*/ proxyCustomElement(class SwirlTooltip extends
             };
         };
         this.show = () => {
-            if (!this.active) {
+            if (!this.active || (this.isPromo && this.isPromoShown)) {
                 return;
             }
             this.visible = true;
@@ -71,11 +79,22 @@ const SwirlTooltip = /*@__PURE__*/ proxyCustomElement(class SwirlTooltip extends
             this.disableAutoUpdate?.();
         };
         this.updateOptions = () => {
-            const margin = +getComputedStyle(document.documentElement)
-                .getPropertyValue("--s-space-12")
-                .replace("rem", "") * 16;
+            const margin = getPixelsFromRemToken("--s-space-12");
+            const shiftPaddingY = getPixelsFromRemToken("--s-space-8");
+            const shiftPaddingX = getPixelsFromRemToken("--s-space-16");
             this.options = {
-                middleware: [D(margin), k(), b()],
+                middleware: [
+                    D(margin),
+                    k({
+                        padding: {
+                            top: shiftPaddingY,
+                            bottom: shiftPaddingY,
+                            left: shiftPaddingX,
+                            right: shiftPaddingX,
+                        },
+                    }),
+                    b(),
+                ],
                 placement: this.position,
                 strategy: this.positioning,
             };
@@ -88,7 +107,9 @@ const SwirlTooltip = /*@__PURE__*/ proxyCustomElement(class SwirlTooltip extends
         this.showWithDelay();
     }
     onMouseLeave() {
-        this.hide();
+        if (!this.isPromo) {
+            this.hide();
+        }
     }
     onWindowResize() {
         if (!this.active) {
@@ -107,13 +128,18 @@ const SwirlTooltip = /*@__PURE__*/ proxyCustomElement(class SwirlTooltip extends
     }
     componentDidLoad() {
         this.updateOptions();
+        if (this.isPromo) {
+            this.show();
+            this.isPromoShown = true;
+        }
     }
     render() {
         const className = classNames("tooltip", `tooltip--actual-placement-${this.actualPosition?.placement}`, {
             "tooltip--active": this.active,
             "tooltip--visible": this.visible,
+            "tooltip--promo": this.isPromo,
         });
-        return (h(Host, { key: '7d75b9d6c223d29e88edff512c881d5c7689e287', onKeydown: this.onKeydown }, h("span", { key: '3abb23525fee5aa69bf2bf67ea1d7f72601b5328', class: className }, h("span", { key: 'b79893b8952d4258edea494bc008a7b416a179af', class: "tooltip__reference", "aria-describedby": "tooltip", onFocusout: this.hide, onClick: this.hide, onFocusin: this.show }, h("slot", { key: '710c29070174874d6a6be6a08ed5a5dd97bb1230' })), h("span", { key: '4003d8b277fc55de2460ec8c63f51535f9f64760', class: "tooltip__popper", ref: (el) => (this.popperEl = el), style: {
+        return (h(Host, { key: '0fa9404559103428ce19831a0b45a5330d00c9fa', onKeydown: this.onKeydown }, h("span", { key: '3602318c40723c65c318cef0254dab0161439cc6', class: className }, h("span", { key: 'a9aaf081590bcf01ad2c82c99b8ea10bc9b8f8a5', class: "tooltip__reference", "aria-describedby": "tooltip", onFocusout: !this.isPromo && this.hide, onClick: this.hide, onFocusin: this.show }, h("slot", { key: '73ad565e8b91925bba6fcb490b542d74890926c1' })), h("span", { key: 'bd84b556b64f4d24f2064d00556070af818524f5', class: "tooltip__popper", ref: (el) => (this.popperEl = el), style: {
                 top: Boolean(this.actualPosition)
                     ? `${this.actualPosition?.y}px`
                     : "",
@@ -121,7 +147,7 @@ const SwirlTooltip = /*@__PURE__*/ proxyCustomElement(class SwirlTooltip extends
                     ? `${this.actualPosition?.x}px`
                     : "",
                 position: this.positioning,
-            } }, this.visible && (h("span", { key: '82c207a7951483894494abf1d7e46a1a997f1ff8', class: "tooltip__bubble", id: "tooltip", part: "tooltip__bubble", role: "tooltip" }, h("span", { key: '178678dc65ebe2d4232437b7f12564444c687510', class: "tooltip__content", innerHTML: this.content }))), h("span", { key: '0f97538a405da7b5fdf1b39cee2a7a4db82ece2f', class: "tooltip__arrow", ref: (el) => (this.arrowElement = el), style: {
+            } }, this.visible && (h("span", { key: '41fb5ef06491bfaf355d3fd5a98e00a92cd75a92', class: "tooltip__bubble", id: "tooltip", part: "tooltip__bubble", role: "tooltip" }, h("span", { key: 'a6a22b0bc86e87f2c7728fc3888ef109a8b9be8c', class: "tooltip__content", innerHTML: this.content }))), h("span", { key: 'b036d30ba31fbf5b4c8519b229aed70f20509874', class: "tooltip__arrow", ref: (el) => (this.arrowElement = el), style: {
                 ...this.arrowStyles,
                 visibility: this.visible ? "visible" : "hidden",
             } })))));
@@ -137,9 +163,11 @@ const SwirlTooltip = /*@__PURE__*/ proxyCustomElement(class SwirlTooltip extends
         "delay": [2],
         "position": [1],
         "positioning": [1],
+        "isPromo": [4, "is-promo"],
         "actualPosition": [32],
         "arrowStyles": [32],
-        "visible": [32]
+        "visible": [32],
+        "isPromoShown": [32]
     }, [[1, "mouseenter", "onMouseEnter"], [1, "mouseleave", "onMouseLeave"], [9, "resize", "onWindowResize"], [9, "scroll", "onWindowScroll"]], {
         "position": ["watchPosition"]
     }]);

package/dist/components/utils.js

@@ -182,5 +182,10 @@ function isDocumentMimeType(mimeType) {
         mimeType.startsWith("application/vnd.openxmlformats-officedocument.wordprocessingml.document") ||
         mimeType.startsWith("application/vnd.apple.pages"));
 }
+function getPixelsFromRemToken(token) {
+    return (+getComputedStyle(document.documentElement)
+        .getPropertyValue(token)
+        .replace("rem", "") * 16);
+}
 
-export { isSupportedImageMimeType as a, isVideoMimeType as b, isAudioMimeType as c, debounce as d, isPdfMimeType as e, isCompressedArchiveMimeType as f, getISODateString as g, isDocumentMimeType as h, isMobileViewport as i, isDescendantOf as j, getActiveElement as k, closestPassShadow as l, parentsPassShadow as m, isDesktopViewport as n, getCircularArrayIndex as o, prefersReducedMotion as p, querySelectorAllDeep as q, removeTimezoneOffset as r, getVisibleHeight as s, getDesktopMediaQuery as t };
+export { isSupportedImageMimeType as a, isVideoMimeType as b, isAudioMimeType as c, debounce as d, isPdfMimeType as e, isCompressedArchiveMimeType as f, getISODateString as g, isDocumentMimeType as h, isMobileViewport as i, isDescendantOf as j, getActiveElement as k, closestPassShadow as l, parentsPassShadow as m, isDesktopViewport as n, getCircularArrayIndex as o, prefersReducedMotion as p, querySelectorAllDeep as q, removeTimezoneOffset as r, getVisibleHeight as s, getPixelsFromRemToken as t, getDesktopMediaQuery as u };