genesys-spark-components 4.137.1 → 4.138.0

package/dist/esm/gux-tooltip-base-beta_2.entry.js

@@ -1,7 +1,7 @@
-import { r as registerInstance, h, H as Host, g as getElement } from './index-21889d5d.js';
+import { r as registerInstance, h, H as Host, g as getElement } from './index-1f4f2f77.js';
 import { a as autoUpdate, o as offset, f as flip, s as shift, h as hide, c as computePosition } from './floating-ui.dom.esm-17bec7ce.js';
 import { r as randomHTMLId } from './random-html-id-81ac821b.js';
-import { t as trackComponent } from './usage-66b031b6.js';
+import { t as trackComponent } from './usage-82f4ed22.js';
 import { b as afterNextRender } from './after-next-render-07a41f53.js';
 import { o as overflowDetection } from './overflow-detection-7e4fbf13.js';
 import { f as findElementById } from './find-element-by-id-d0ce6208.js';
@@ -20,16 +20,26 @@ const GuxTooltipBase = class {
             ['pointerenter', this.pointerenterHandler],
             ['pointerleave', this.pointerleaveHandler],
             ['focusin', this.focusinHandler],
-            ['focusout', this.focusoutHandler]
+            ['focusout', this.focusoutHandler],
+            ['mousemove', this.handlePointerMove.bind(this)]
         ]);
         this.id = randomHTMLId('gux-tooltip-base');
-        this.tooltipId = undefined;
-        this.forElement = undefined;
+        /**
+         * Placement of the tooltip. Default is bottom-start
+         */
         this.placement = 'bottom-start';
         this.offsetX = 0;
         this.offsetY = 0;
         this.accent = 'light';
+        /**
+         * Determines whether the text in the tooltip is read by screenreaders.
+         * Use for cases where the forElement component handles the accessibility.
+         */
         this.visualOnly = false;
+        this.followMouse = false;
+        /**
+         * If tooltip is shown or not
+         */
         this.isShown = false;
     }
     handleKeyDown(event) {
@@ -43,6 +53,13 @@ const GuxTooltipBase = class {
     handlePointerleave() {
         this.hide();
     }
+    handlePointerMove(event) {
+        if (this.followMouse) {
+            event.preventDefault();
+            this.refElement = this.getRefElement(event.clientX, event.clientY);
+            this.runUpdatePosition();
+        }
+    }
     /*
      * Show tooltip
      */
@@ -58,14 +75,15 @@ const GuxTooltipBase = class {
         this.hide();
     }
     runUpdatePosition() {
-        this.cleanupUpdatePosition = autoUpdate(this.forElement, this.root, () => this.updatePosition(), {
+        const ref = this.followMouse && this.refElement ? this.refElement : this.forElement;
+        this.cleanupUpdatePosition = autoUpdate(ref, this.root, () => this.updatePosition(ref), {
             ancestorScroll: true,
             elementResize: true,
-            animationFrame: false,
+            animationFrame: this.followMouse,
             ancestorResize: true
         });
     }
-    updatePosition() {
+    updatePosition(ref) {
         const middleware = [
             offset(16),
             flip(),
@@ -73,7 +91,7 @@ const GuxTooltipBase = class {
             hide(),
             overflowDetection()
         ];
-        void computePosition(this.forElement, this.root, {
+        void computePosition(ref, this.root, {
             placement: this.placement,
             strategy: 'fixed',
             middleware: middleware
@@ -81,7 +99,7 @@ const GuxTooltipBase = class {
             var _a;
             Object.assign(this.root.style, {
                 left: `${x + this.offsetX}px`,
-                top: `${y - this.offsetY}px`,
+                top: `${y + this.offsetY}px`,
                 visibility: ((_a = middlewareData.hide) === null || _a === void 0 ? void 0 : _a.referenceHidden) ? 'hidden' : 'visible'
             });
             //data-placement needed on the for e2e tests.
@@ -98,6 +116,7 @@ const GuxTooltipBase = class {
     hide() {
         this.hideDelayTimeout = setTimeout(() => {
             this.isShown = false;
+            this.refElement = undefined;
             if (this.cleanupUpdatePosition) {
                 this.cleanupUpdatePosition();
             }
@@ -122,6 +141,22 @@ const GuxTooltipBase = class {
         this.disconnectForElement();
         this.setForElement();
     }
+    getRefElement(cursorX, cursorY) {
+        return {
+            getBoundingClientRect() {
+                return {
+                    x: cursorX,
+                    y: cursorY,
+                    top: cursorY,
+                    left: cursorX,
+                    bottom: cursorY,
+                    right: cursorX,
+                    width: 10,
+                    height: 10
+                };
+            }
+        };
+    }
     connectedCallback() {
         this.setForElement();
     }
@@ -135,10 +170,10 @@ const GuxTooltipBase = class {
         this.disconnectForElement();
     }
     render() {
-        return (h(Host, { key: '64e1b8b7935a7fe487f7cfe19fbd6af4fe9eb54b', id: this.tooltipId ? undefined : this.id, role: this.tooltipId && !this.isShown ? undefined : 'tooltip', class: { 'gux-show': this.isShown }, "aria-hidden": this.visualOnly }, h("div", { key: 'b14355016dfeb6a3e8b6a1c32cd31188fd143d97', class: {
+        return (h(Host, { key: '4e7c0cf62fae55affefec3c26c6f09e1a7a31edd', id: this.tooltipId ? undefined : this.id, role: this.tooltipId && !this.isShown ? undefined : 'tooltip', class: { 'gux-show': this.isShown }, "aria-hidden": this.visualOnly }, h("div", { key: '5331c5c37ba1c7fff188e3aab855d8ed0abbd921', class: {
                 'gux-container': true,
                 [`gux-${this.accent}`]: true
-            }, "data-placement": this.placement }, h("slot", { key: '08fc4e527b11d357db025b64730f64a93d7dc599', name: "content" }))));
+            }, "data-placement": this.placement }, h("slot", { key: '70e9076b53ea55109e601bc5f6f9a8eca82ff3c8', name: "content" }))));
     }
     get root() { return getElement(this); }
     static get watchers() { return {
@@ -153,11 +188,15 @@ const GuxTooltip = class {
     constructor(hostRef) {
         registerInstance(this, hostRef);
         this.id = randomHTMLId('gux-tooltip');
-        this.forElement = undefined;
-        this.role = undefined;
-        this.for = undefined;
+        /**
+         * Placement of the tooltip. Default is bottom-start
+         */
         this.placement = 'bottom-start';
         this.accent = 'light';
+        /**
+         * Determines whether the text in the tooltip is read by screenreaders.
+         * Use for cases where the forElement component handles the accessibility.
+         */
         this.visualOnly = false;
     }
     /*

package/dist/esm/gux-tooltip-pointer-beta.entry.js

@@ -0,0 +1,83 @@
+import { r as registerInstance, h, H as Host, g as getElement } from './index-1f4f2f77.js';
+import { t as trackComponent } from './usage-82f4ed22.js';
+import { f as findElementById } from './find-element-by-id-d0ce6208.js';
+import { r as randomHTMLId } from './random-html-id-81ac821b.js';
+
+const GuxTooltipPointer = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.id = randomHTMLId('gux-tooltip-pointer');
+        this.accent = 'light';
+        this.placement = 'bottom-start';
+        /**
+         * Determines whether the text in the tooltip is read by screenreaders.
+         * Use for cases where the forElement component handles the accessibility.
+         */
+        this.visualOnly = false;
+    }
+    /*
+     * Show tooltip
+     */
+    async showTooltip() {
+        return await this.baseTooltip.showTooltip();
+    }
+    /*
+     * Hide tooltip
+     */
+    async hideTooltip() {
+        return await this.baseTooltip.hideTooltip();
+    }
+    updateForElement() {
+        this.forElement = this.getForElement();
+    }
+    componentWillLoad() {
+        trackComponent(this.root, { variant: this.placement });
+    }
+    componentDidLoad() {
+        if (this.baseTooltip) {
+            this.tooltipObserver = new MutationObserver(() => {
+                var _a;
+                this.role = (_a = this.baseTooltip) === null || _a === void 0 ? void 0 : _a.role;
+            });
+            this.tooltipObserver.observe(this.baseTooltip, {
+                childList: true,
+                attributes: true,
+                attributeFilter: ['role']
+            });
+        }
+    }
+    connectedCallback() {
+        this.updateForElement();
+    }
+    disconnectedCallback() {
+        if (this.tooltipObserver) {
+            this.tooltipObserver.disconnect();
+        }
+    }
+    getForElement() {
+        if (this.for) {
+            const forElement = findElementById(this.root, this.for);
+            if (!forElement) {
+                this.logForAttributeError();
+            }
+            return forElement;
+        }
+        else {
+            return this.root.parentElement;
+        }
+    }
+    logForAttributeError() {
+        if (this.root.isConnected) {
+            console.error(`gux-tooltip-pointer: invalid element supplied to 'for': "${this.for}"`);
+        }
+    }
+    render() {
+        return (h(Host, { key: 'fb000951b9b468e71d44773cb2cf78f25fd1fb34', id: this.id, role: this.role }, h("gux-tooltip-base-beta", { key: 'dfbeb8488b7e9c18c4a6a9d562bfc759bc7e7441', forElement: this.forElement, placement: this.placement, accent: this.accent, tooltipId: this.id, visualOnly: this.visualOnly, ref: el => (this.baseTooltip = el), followMouse: true }, h("span", { key: '1c339b9f6a987e8995b667e80ad1341a5b226f1d', slot: "content" }, h("slot", { key: '5cfe0123dce5e4ed2b9bacf0fc8f9f33539798e8', name: "content" }, h("slot", { key: '02e85502243c4d20b447ef4e192c1b581d8ed1e9' }))))));
+    }
+    get root() { return getElement(this); }
+    static get watchers() { return {
+        "for": ["updateForElement"]
+    }; }
+};
+
+export { GuxTooltipPointer as gux_tooltip_pointer_beta };

package/dist/esm/gux-tooltip-title.entry.js

@@ -1,7 +1,7 @@
-import { r as registerInstance, h, g as getElement } from './index-21889d5d.js';
+import { r as registerInstance, h, g as getElement } from './index-1f4f2f77.js';
 import { a as logWarn } from './log-error-274efeb7.js';
-import { O as OnMutation } from './on-mutation-bf72b518.js';
-import { O as OnResize } from './on-resize-3558b8d8.js';
+import { O as OnMutation } from './on-mutation-751e68e4.js';
+import { O as OnResize } from './on-resize-c9d0d33c.js';
 
 const guxTooltipTitleCss = "gux-tooltip-title{overflow:hidden}gux-tooltip{font-weight:normal;line-height:normal;text-align:start;overflow-wrap:break-word;white-space:normal}.gux-overflow-hidden .gux-title-container ::slotted(span){overflow:hidden;text-overflow:ellipsis}.gux-overflow-hidden .gux-title-container>*{overflow:hidden;text-overflow:ellipsis}.gux-title-container{display:flex;pointer-events:none}.gux-tooltip-icon-decorative .gux-title-container{position:relative;margin-inline-start:20px}.gux-tooltip-icon-decorative .gux-title-container gux-icon,.gux-tooltip-icon-decorative .gux-title-container ::slotted(gux-icon){position:absolute;inset-block-start:1px;inset-inline-start:-20px;flex-shrink:0;inline-size:16px;block-size:16px}.gux-icon-only{line-height:0px}";
 const GuxTooltipTitleStyle0 = guxTooltipTitleCss;
@@ -125,10 +125,10 @@ const GuxTooltipTitle = class {
     }
     render() {
         return [
-            h("span", { key: '51e3a363495c4f5ebe92d4303979c6c019b66d87', class: {
+            h("span", { key: 'cba947eff67ef23ec53277350ae12c3687154410', class: {
                     'gux-title-container': true,
                     'gux-icon-only': this.iconOnly
-                } }, h("slot", { key: 'f1121269950760e368cae9d922e283ccbcde6bae' })),
+                } }, h("slot", { key: '28d95434eab0783863e00b8e5f3cbcaf02231f4a' })),
             this.renderTooltip()
         ];
     }

package/dist/esm/gux-tooltip_2.entry.js

@@ -1,12 +1,12 @@
-import { r as registerInstance, h, H as Host, g as getElement, f as forceUpdate } from './index-21889d5d.js';
+import { r as registerInstance, h, H as Host, g as getElement, f as forceUpdate } from './index-1f4f2f77.js';
 import { a as autoUpdate, o as offset, f as flip, s as shift, h as hide, c as computePosition } from './floating-ui.dom.esm-17bec7ce.js';
 import { r as randomHTMLId } from './random-html-id-81ac821b.js';
-import { t as trackComponent } from './usage-66b031b6.js';
+import { t as trackComponent } from './usage-82f4ed22.js';
 import { f as findElementById } from './find-element-by-id-d0ce6208.js';
 import { b as afterNextRender } from './after-next-render-07a41f53.js';
 import { o as overflowDetection } from './overflow-detection-7e4fbf13.js';
-import { O as OnMutation } from './on-mutation-bf72b518.js';
-import { O as OnResize } from './on-resize-3558b8d8.js';
+import { O as OnMutation } from './on-mutation-751e68e4.js';
+import { O as OnResize } from './on-resize-c9d0d33c.js';
 
 const guxTooltipCss = ":host{position:fixed;z-index:var(--gse-semantic-zIndex-tooltip);display:none;inline-size:max-content;max-inline-size:250px;border-radius:var(--gse-ui-tooltip-borderRadius);box-shadow:var(--gse-ui-tooltip-boxShadow);opacity:0}:host(.gux-show){display:block;animation-name:fade-in;animation-duration:250ms;animation-delay:350ms;animation-fill-mode:forwards}.gux-container{box-sizing:border-box;display:flex;flex-direction:row;gap:var(--gse-ui-tooltip-gap);place-content:center flex-start;padding:var(--gse-ui-tooltip-padding);font-family:var(--gse-ui-tooltip-text-fontFamily);font-size:var(--gse-ui-tooltip-text-fontSize);font-weight:var(--gse-ui-tooltip-text-fontWeight);line-height:var(--gse-ui-tooltip-text-lineHeight);color:var(--gse-ui-tooltip-light-foregroundColor);pointer-events:none;background-color:var(--gse-ui-tooltip-light-backgroundColor);border:var(--gse-ui-tooltip-light-border-width) var(--gse-ui-tooltip-light-border-style) var(--gse-ui-tooltip-light-border-color);border-radius:var(--gse-ui-tooltip-borderRadius)}.gux-container ::slotted(gux-icon){align-self:center;inline-size:var(--gse-ui-icon-small-size);block-size:var(--gse-ui-icon-small-size);color:var(--gse-ui-tooltip-light-foregroundColor)}.gux-container ::slotted(*){inline-size:100%;overflow-wrap:break-word;white-space:normal}.gux-container.gux-dark{color:var(--gse-ui-tooltip-dark-foregroundColor);background-color:var(--gse-ui-tooltip-dark-backgroundColor);border:var(--gse-ui-tooltip-dark-border-width) var(--gse-ui-tooltip-dark-border-style) var(--gse-ui-tooltip-dark-border-color)}.gux-container.gux-dark ::slotted(gux-icon){align-self:center;inline-size:var(--gse-ui-icon-small-size);block-size:var(--gse-ui-icon-small-size);color:var(--gse-ui-tooltip-dark-iconColor)}@keyframes fade-in{0%{opacity:0}100%{opacity:1}}";
 const GuxTooltipStyle0 = guxTooltipCss;
@@ -25,9 +25,14 @@ const GuxTooltip = class {
             ['focusout', this.focusoutHandler]
         ]);
         this.id = randomHTMLId('gux-tooltip');
-        this.for = undefined;
+        /**
+         * Placement of the tooltip. Default is bottom-start
+         */
         this.placement = 'bottom-start';
         this.accent = 'light';
+        /**
+         * If tooltip is shown or not
+         */
         this.isShown = false;
     }
     handleKeyDown(event) {
@@ -147,10 +152,10 @@ const GuxTooltip = class {
         this.disconnectForElement();
     }
     render() {
-        return (h(Host, { key: '7f32fc0f3f84954016f5b1ec9f0898896d9cf002', id: this.id, class: { 'gux-show': this.isShown }, role: "tooltip" }, h("div", { key: 'c530ea1cd5a6e36217953c5924792e8976306bd0', class: {
+        return (h(Host, { key: '0c6810848f3ef09d3d0c3566829051fe35a321ce', id: this.id, class: { 'gux-show': this.isShown }, role: "tooltip" }, h("div", { key: '62c983206c8cd451340011ceea6f60e3e1c36f10', class: {
                 'gux-container': true,
                 [`gux-${this.accent}`]: true
-            }, "data-placement": this.placement }, h("slot", { key: '46e8c283b01588f06717c3a141f9c9cbe4c4fa9a', name: "content" }, h("slot", { key: '358388784b52c0e58be759a75058987740ccc49d' })))));
+            }, "data-placement": this.placement }, h("slot", { key: 'c532649e0eb5780ae4a1970da1d0d625b8f5dbf0', name: "content" }, h("slot", { key: 'e96641c2b60eab20ff499930b73a6497b2b75741' })))));
     }
     get root() { return getElement(this); }
     static get watchers() { return {
@@ -188,7 +193,6 @@ var __decorate = (undefined && undefined.__decorate) || function (decorators, ta
 const GuxTruncate = class {
     constructor(hostRef) {
         registerInstance(this, hostRef);
-        this.maxLines = undefined;
     }
     async setShowTooltip() {
         var _a;
@@ -220,12 +224,12 @@ const GuxTruncate = class {
     }
     render() {
         var _a;
-        return (h("div", { key: '1fbad0da6e9e17d14b5a25508cdb427578df91a8', class: {
+        return (h("div", { key: 'a7797a30ecc7954c6d3c2159d24d15f8ecbe3842', class: {
                 'gux-truncate-multi-line': Boolean(this.maxLines)
-            } }, h("span", { key: 'f0748fbc8b33a9956d973712ff41e0bd55e662d4', class: {
+            } }, h("span", { key: '0ae75944d480e95bbaa2c796e582384534e2bbb0', class: {
                 'gux-overflow-hidden': this.needsTruncation(),
                 'gux-truncate-slot-container': true
-            }, style: { webkitLineClamp: (_a = this.maxLines) === null || _a === void 0 ? void 0 : _a.toString() } }, h("slot", { key: '995342dbb8b328a825afcbafd777e3e0962b41e4' })), this.renderTooltip()));
+            }, style: { webkitLineClamp: (_a = this.maxLines) === null || _a === void 0 ? void 0 : _a.toString() } }, h("slot", { key: 'ff5cea1f312e753b27aae40bcb47bf2d47e2015b' })), this.renderTooltip()));
     }
     get root() { return getElement(this); }
 };