@getflip/swirl-components 0.390.0 → 0.392.0

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-avatar/swirl-avatar.css

@@ -243,6 +243,11 @@
     background-color: var(--s-decorative-radish-surface-subdued);
   }
 
+.avatar--color-neutral .avatar__initials {
+    color: var(--s-text-subdued);
+    background-color: var(--s-surface-neutral-subdued);
+  }
+
 .avatar__image {
   overflow: hidden;
   width: 100%;

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

@@ -113,7 +113,7 @@ export class SwirlAvatar {
         });
         const badgeClassName = classnames("avatar__badge", `avatar__badge--position-${this.badgePosition}`);
         const toolClassName = classnames("avatar__tool", `avatar__tool--position-${this.toolPosition}`);
-        return (h(Host, { key: 'a6c4c3e0d9c306ff28c1a80dc52546228fca1eba', "aria-label": this.interactive ? this.label : undefined, onKeydown: this.interactive ? this.onKeydown : undefined, onKeyup: this.interactive ? this.onKeyup : undefined, role: role, tabIndex: this.interactive ? 0 : undefined }, h("span", { key: '94f4224fca18e1e0a13f220f17ff16e3857d48d9', class: className, part: "avatar" }, showImage && (h("span", { key: '86584ed6e4bdd4e5eb8e74141ca9ef52a65e3657', class: "avatar__image" }, h("img", { key: '1db3a58ab870ae4832d0585b97f6a5ad04879e26', alt: "", height: swirlAvatarSizeMappings[this.size], loading: this.loading !== "intersecting" ? this.loading : undefined, ref: this.onImageElementUpdate, src: this.src, width: swirlAvatarSizeMappings[this.size] }))), showInitials && (h("span", { key: '2e98b96482f0eb8b42a60307f8c67f1f20c67a7b', class: "avatar__initials" }, h("span", { key: '889baa8fe8289cd53091d916c4e8c618a5ef55e2' }, this.initials))), showIcon && h("span", { key: '9b33d1c1064a2fd990dbc457aa40462a4409383c', class: "avatar__icon", innerHTML: this.icon }), showFallbackIcon && (h("span", { key: 'b30ec094c0b0b69239bbc248d458c7fe7c615dbd', class: "avatar__icon" }, h("swirl-icon-person", { key: '24ba56fd170f85ec0a3172d5d2340496c168e2d6' }))), showBadge && (h("span", { key: 'f80ab2dd833ef93dbaa1f4f34fcf4698577ddc70', class: badgeClassName, innerHTML: this.badge })), h("span", { key: '11ed60620a61049c67e9145019702ba961efeee8', class: toolClassName }, h("slot", { key: '0cbeaab4de7d5be5baae9144a89340f4135b76d9', name: "tool" }))), this.showLabel && (h("span", { key: 'dcb6182cc688f2a8fde5ef1701bf0e928d3a6280', "aria-hidden": true, class: "avatar__label" }, this.label))));
+        return (h(Host, { key: '42c11df526248247b9cb2bee6b2d58bc70aafa65', "aria-label": this.interactive ? this.label : undefined, onKeydown: this.interactive ? this.onKeydown : undefined, onKeyup: this.interactive ? this.onKeyup : undefined, role: role, tabIndex: this.interactive ? 0 : undefined }, h("span", { key: '96a01925f8c723fca2dbb17263152b1d56d26027', class: className, part: "avatar" }, showImage && (h("span", { key: '896d136ab3094a2f583b938c2b91d04e78f0d10f', class: "avatar__image" }, h("img", { key: 'fde4999892611a1634223519cbccf76130cdb51c', alt: "", height: swirlAvatarSizeMappings[this.size], loading: this.loading !== "intersecting" ? this.loading : undefined, ref: this.onImageElementUpdate, src: this.src, width: swirlAvatarSizeMappings[this.size] }))), showInitials && (h("span", { key: '4e1e6d7539ef10c696292cbb9f8a1a9dd492a97a', class: "avatar__initials" }, h("span", { key: '866a9aaaa0b2e2ef114cc992be91b503160aac69' }, this.initials))), showIcon && h("span", { key: '1cb19789413ef94288b19c209f80b9ccab454baa', class: "avatar__icon", innerHTML: this.icon }), showFallbackIcon && (h("span", { key: '36dee103b6406e226e48183c4376a978a6ecedc9', class: "avatar__icon" }, h("swirl-icon-person", { key: 'b992b47b9baa52c05193fff33e9b57211c23a51e' }))), showBadge && (h("span", { key: '6134b435fa2572c24dd3d8be7ca3f02b51e6ea3c', class: badgeClassName, innerHTML: this.badge })), h("span", { key: '20e4112658cd486eb49d7e2543f13678b4d7a5fd', class: toolClassName }, h("slot", { key: 'f03881df79fb42c911c2895cd787f706c9529a9f', name: "tool" }))), this.showLabel && (h("span", { key: 'beeb327bbc2a05443d756dea01be85e0a885e507', "aria-hidden": true, class: "avatar__label" }, this.label))));
     }
     static get is() { return "swirl-avatar"; }
     static get encapsulation() { return "shadow"; }
@@ -180,7 +180,7 @@ export class SwirlAvatar {
                 "mutable": false,
                 "complexType": {
                     "original": "SwirlAvatarColor",
-                    "resolved": "\"banana\" | \"blueberry\" | \"chilli\" | \"grape\" | \"kiwi\" | \"pumpkin\" | \"radish\"",
+                    "resolved": "\"banana\" | \"blueberry\" | \"chilli\" | \"grape\" | \"kiwi\" | \"neutral\" | \"pumpkin\" | \"radish\"",
                     "references": {
                         "SwirlAvatarColor": {
                             "location": "local",

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);
+}