@getflip/swirl-components 0.391.0 → 0.392.0

package/dist/cjs/swirl-tooltip.cjs.entry.js

@@ -3,8 +3,9 @@
 var index = require('./index-DM-IG6w2.js');
 var floatingUi_dom_browser_min = require('./floating-ui.dom.browser.min-PA1q-Uql.js');
 var index$1 = require('./index-DcAhLZUH.js');
+var utils = require('./utils-UfZG-xPD.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 = class {
     constructor(hostRef) {
@@ -13,9 +14,16 @@ const SwirlTooltip = class {
         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 = class {
             };
         };
         this.show = () => {
-            if (!this.active) {
+            if (!this.active || (this.isPromo && this.isPromoShown)) {
                 return;
             }
             this.visible = true;
@@ -71,11 +79,22 @@ const SwirlTooltip = class {
             this.disableAutoUpdate?.();
         };
         this.updateOptions = () => {
-            const margin = +getComputedStyle(document.documentElement)
-                .getPropertyValue("--s-space-12")
-                .replace("rem", "") * 16;
+            const margin = utils.getPixelsFromRemToken("--s-space-12");
+            const shiftPaddingY = utils.getPixelsFromRemToken("--s-space-8");
+            const shiftPaddingX = utils.getPixelsFromRemToken("--s-space-16");
             this.options = {
-                middleware: [floatingUi_dom_browser_min.D(margin), floatingUi_dom_browser_min.k(), floatingUi_dom_browser_min.b()],
+                middleware: [
+                    floatingUi_dom_browser_min.D(margin),
+                    floatingUi_dom_browser_min.k({
+                        padding: {
+                            top: shiftPaddingY,
+                            bottom: shiftPaddingY,
+                            left: shiftPaddingX,
+                            right: shiftPaddingX,
+                        },
+                    }),
+                    floatingUi_dom_browser_min.b(),
+                ],
                 placement: this.position,
                 strategy: this.positioning,
             };
@@ -88,7 +107,9 @@ const SwirlTooltip = class {
         this.showWithDelay();
     }
     onMouseLeave() {
-        this.hide();
+        if (!this.isPromo) {
+            this.hide();
+        }
     }
     onWindowResize() {
         if (!this.active) {
@@ -107,13 +128,18 @@ const SwirlTooltip = class {
     }
     componentDidLoad() {
         this.updateOptions();
+        if (this.isPromo) {
+            this.show();
+            this.isPromoShown = true;
+        }
     }
     render() {
         const className = index$1.classnames("tooltip", `tooltip--actual-placement-${this.actualPosition?.placement}`, {
             "tooltip--active": this.active,
             "tooltip--visible": this.visible,
+            "tooltip--promo": this.isPromo,
         });
-        return (index.h(index.Host, { key: '7d75b9d6c223d29e88edff512c881d5c7689e287', onKeydown: this.onKeydown }, index.h("span", { key: '3abb23525fee5aa69bf2bf67ea1d7f72601b5328', class: className }, index.h("span", { key: 'b79893b8952d4258edea494bc008a7b416a179af', class: "tooltip__reference", "aria-describedby": "tooltip", onFocusout: this.hide, onClick: this.hide, onFocusin: this.show }, index.h("slot", { key: '710c29070174874d6a6be6a08ed5a5dd97bb1230' })), index.h("span", { key: '4003d8b277fc55de2460ec8c63f51535f9f64760', class: "tooltip__popper", ref: (el) => (this.popperEl = el), style: {
+        return (index.h(index.Host, { key: '0fa9404559103428ce19831a0b45a5330d00c9fa', onKeydown: this.onKeydown }, index.h("span", { key: '3602318c40723c65c318cef0254dab0161439cc6', class: className }, index.h("span", { key: 'a9aaf081590bcf01ad2c82c99b8ea10bc9b8f8a5', class: "tooltip__reference", "aria-describedby": "tooltip", onFocusout: !this.isPromo && this.hide, onClick: this.hide, onFocusin: this.show }, index.h("slot", { key: '73ad565e8b91925bba6fcb490b542d74890926c1' })), index.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 = class {
                     ? `${this.actualPosition?.x}px`
                     : "",
                 position: this.positioning,
-            } }, this.visible && (index.h("span", { key: '82c207a7951483894494abf1d7e46a1a997f1ff8', class: "tooltip__bubble", id: "tooltip", part: "tooltip__bubble", role: "tooltip" }, index.h("span", { key: '178678dc65ebe2d4232437b7f12564444c687510', class: "tooltip__content", innerHTML: this.content }))), index.h("span", { key: '0f97538a405da7b5fdf1b39cee2a7a4db82ece2f', class: "tooltip__arrow", ref: (el) => (this.arrowElement = el), style: {
+            } }, this.visible && (index.h("span", { key: '41fb5ef06491bfaf355d3fd5a98e00a92cd75a92', class: "tooltip__bubble", id: "tooltip", part: "tooltip__bubble", role: "tooltip" }, index.h("span", { key: 'a6a22b0bc86e87f2c7728fc3888ef109a8b9be8c', class: "tooltip__content", innerHTML: this.content }))), index.h("span", { key: 'b036d30ba31fbf5b4c8519b229aed70f20509874', class: "tooltip__arrow", ref: (el) => (this.arrowElement = el), style: {
                 ...this.arrowStyles,
                 visibility: this.visible ? "visible" : "hidden",
             } })))));

package/dist/cjs/{utils-CllbYlRY.js → utils-UfZG-xPD.js}

@@ -184,6 +184,11 @@ 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);
+}
 
 exports.closestPassShadow = closestPassShadow;
 exports.debounce = debounce;
@@ -191,6 +196,7 @@ exports.getActiveElement = getActiveElement;
 exports.getCircularArrayIndex = getCircularArrayIndex;
 exports.getDesktopMediaQuery = getDesktopMediaQuery;
 exports.getISODateString = getISODateString;
+exports.getPixelsFromRemToken = getPixelsFromRemToken;
 exports.getVisibleHeight = getVisibleHeight;
 exports.isAudioMimeType = isAudioMimeType;
 exports.isCompressedArchiveMimeType = isCompressedArchiveMimeType;

package/dist/collection/components/swirl-tooltip/swirl-tooltip.css

@@ -88,6 +88,11 @@
   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;

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

@@ -1,15 +1,23 @@
 import { arrow, autoUpdate, computePosition, flip, offset, shift, } from "@floating-ui/dom";
 import { h, Host, } from "@stencil/core";
 import classnames from "classnames";
+import { getPixelsFromRemToken } from "../../utils";
 export class SwirlTooltip {
     constructor() {
         this.active = true;
         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();
             }
         };
@@ -31,7 +39,7 @@ export class SwirlTooltip {
             };
         };
         this.show = () => {
-            if (!this.active) {
+            if (!this.active || (this.isPromo && this.isPromoShown)) {
                 return;
             }
             this.visible = true;
@@ -65,11 +73,22 @@ export class SwirlTooltip {
             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: [offset(margin), shift(), flip()],
+                middleware: [
+                    offset(margin),
+                    shift({
+                        padding: {
+                            top: shiftPaddingY,
+                            bottom: shiftPaddingY,
+                            left: shiftPaddingX,
+                            right: shiftPaddingX,
+                        },
+                    }),
+                    flip(),
+                ],
                 placement: this.position,
                 strategy: this.positioning,
             };
@@ -82,7 +101,9 @@ export class SwirlTooltip {
         this.showWithDelay();
     }
     onMouseLeave() {
-        this.hide();
+        if (!this.isPromo) {
+            this.hide();
+        }
     }
     onWindowResize() {
         if (!this.active) {
@@ -101,13 +122,18 @@ export class SwirlTooltip {
     }
     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`
                     : "",
@@ -115,7 +141,7 @@ export class SwirlTooltip {
                     ? `${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",
             } })))));
@@ -244,6 +270,26 @@ export class SwirlTooltip {
                 "setter": false,
                 "reflect": false,
                 "defaultValue": "\"absolute\""
+            },
+            "isPromo": {
+                "type": "boolean",
+                "attribute": "is-promo",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "If set to true, tooltip will be initially visible.\nIt will only be dismissible via a click and will not reappear.\nTooltip will have a blue background color."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "false"
             }
         };
     }
@@ -251,7 +297,8 @@ export class SwirlTooltip {
         return {
             "actualPosition": {},
             "arrowStyles": {},
-            "visible": {}
+            "visible": {},
+            "isPromoShown": {}
         };
     }
     static get elementRef() { return "el"; }

package/dist/collection/utils.js

@@ -240,3 +240,8 @@ export function isDocumentMimeType(mimeType) {
         mimeType.startsWith("application/vnd.openxmlformats-officedocument.wordprocessingml.document") ||
         mimeType.startsWith("application/vnd.apple.pages"));
 }
+export function getPixelsFromRemToken(token) {
+    return (+getComputedStyle(document.documentElement)
+        .getPropertyValue(token)
+        .replace("rem", "") * 16);
+}