genesys-spark-components 4.137.1 → 4.138.0

package/dist/collection/components/beta/gux-tooltip-base/gux-tooltip-base.js

@@ -17,16 +17,26 @@ export class GuxTooltipBase {
             ['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) {
@@ -40,6 +50,13 @@ export class GuxTooltipBase {
     handlePointerleave() {
         this.hide();
     }
+    handlePointerMove(event) {
+        if (this.followMouse) {
+            event.preventDefault();
+            this.refElement = this.getRefElement(event.clientX, event.clientY);
+            this.runUpdatePosition();
+        }
+    }
     /*
      * Show tooltip
      */
@@ -55,14 +72,15 @@ export class GuxTooltipBase {
         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(),
@@ -70,7 +88,7 @@ export class GuxTooltipBase {
             hide(),
             overflowDetection()
         ];
-        void computePosition(this.forElement, this.root, {
+        void computePosition(ref, this.root, {
             placement: this.placement,
             strategy: 'fixed',
             middleware: middleware
@@ -78,7 +96,7 @@ export class GuxTooltipBase {
             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.
@@ -95,6 +113,7 @@ export class GuxTooltipBase {
     hide() {
         this.hideDelayTimeout = setTimeout(() => {
             this.isShown = false;
+            this.refElement = undefined;
             if (this.cleanupUpdatePosition) {
                 this.cleanupUpdatePosition();
             }
@@ -119,6 +138,22 @@ export class GuxTooltipBase {
         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();
     }
@@ -132,10 +167,10 @@ export class GuxTooltipBase {
         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" }))));
     }
     static get is() { return "gux-tooltip-base-beta"; }
     static get encapsulation() { return "shadow"; }
@@ -165,6 +200,8 @@ export class GuxTooltipBase {
                     "tags": [],
                     "text": ""
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "tooltip-id",
                 "reflect": false
             },
@@ -186,7 +223,9 @@ export class GuxTooltipBase {
                 "docs": {
                     "tags": [],
                     "text": "Indicates the element the popover should anchor to."
-                }
+                },
+                "getter": false,
+                "setter": false
             },
             "placement": {
                 "type": "string",
@@ -208,6 +247,8 @@ export class GuxTooltipBase {
                     "tags": [],
                     "text": "Placement of the tooltip. Default is bottom-start"
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "placement",
                 "reflect": false,
                 "defaultValue": "'bottom-start'"
@@ -226,6 +267,8 @@ export class GuxTooltipBase {
                     "tags": [],
                     "text": ""
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "offset-x",
                 "reflect": false,
                 "defaultValue": "0"
@@ -244,6 +287,8 @@ export class GuxTooltipBase {
                     "tags": [],
                     "text": ""
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "offset-y",
                 "reflect": false,
                 "defaultValue": "0"
@@ -268,6 +313,8 @@ export class GuxTooltipBase {
                     "tags": [],
                     "text": ""
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "accent",
                 "reflect": false,
                 "defaultValue": "'light'"
@@ -286,15 +333,38 @@ export class GuxTooltipBase {
                     "tags": [],
                     "text": "Determines whether the text in the tooltip is read by screenreaders.\nUse for cases where the forElement component handles the accessibility."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "visual-only",
                 "reflect": false,
                 "defaultValue": "false"
+            },
+            "followMouse": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "follow-mouse",
+                "reflect": false,
+                "defaultValue": "false"
             }
         };
     }
     static get states() {
         return {
-            "isShown": {}
+            "isShown": {},
+            "refElement": {}
         };
     }
     static get methods() {
@@ -367,6 +437,12 @@ export class GuxTooltipBase {
                 "target": undefined,
                 "capture": false,
                 "passive": true
+            }, {
+                "name": "mousemove",
+                "method": "handlePointerMove",
+                "target": undefined,
+                "capture": false,
+                "passive": true
             }];
     }
 }

package/dist/collection/components/beta/gux-tooltip-beta/gux-tooltip.js

@@ -8,11 +8,15 @@ import { randomHTMLId } from "../../../utils/dom/random-html-";
 export class GuxTooltip {
     constructor() {
         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;
     }
     /*
@@ -92,6 +96,8 @@ export class GuxTooltip {
                     "tags": [],
                     "text": "Indicates the id of the element the popover should anchor to. (If not supplied the parent element is used)"
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "for",
                 "reflect": false
             },
@@ -115,6 +121,8 @@ export class GuxTooltip {
                     "tags": [],
                     "text": "Placement of the tooltip. Default is bottom-start"
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "placement",
                 "reflect": false,
                 "defaultValue": "'bottom-start'"
@@ -139,6 +147,8 @@ export class GuxTooltip {
                     "tags": [],
                     "text": ""
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "accent",
                 "reflect": false,
                 "defaultValue": "'light'"
@@ -157,6 +167,8 @@ export class GuxTooltip {
                     "tags": [],
                     "text": "Determines whether the text in the tooltip is read by screenreaders.\nUse for cases where the forElement component handles the accessibility."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "visual-only",
                 "reflect": false,
                 "defaultValue": "false"

package/dist/collection/components/beta/gux-tooltip-pointer-beta/gux-tooltip-pointer.js

@@ -0,0 +1,226 @@
+import { h, Host } from "@stencil/core";
+import { trackComponent } from "../../../utils/tracking/usage";
+import { findElementById } from "../../../utils/dom/find-element-by-";
+import { randomHTMLId } from "../../../utils/dom/random-html-";
+/**
+ * @slot content - Slot for content
+ */
+export class GuxTooltipPointer {
+    constructor() {
+        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' }))))));
+    }
+    static get is() { return "gux-tooltip-pointer-beta"; }
+    static get encapsulation() { return "shadow"; }
+    static get properties() {
+        return {
+            "for": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Indicates the id of the element the popover should anchor to. (If not supplied the parent element is used)"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "for",
+                "reflect": false
+            },
+            "accent": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "GuxTooltipAccent",
+                    "resolved": "\"dark\" | \"light\"",
+                    "references": {
+                        "GuxTooltipAccent": {
+                            "location": "import",
+                            "path": "../gux-tooltip-beta/gux-tooltip-types",
+                            "id": "src/components/beta/gux-tooltip-beta/gux-tooltip-types.ts::GuxTooltipAccent"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "accent",
+                "reflect": false,
+                "defaultValue": "'light'"
+            },
+            "placement": {
+                "type": "string",
+                "mutable": true,
+                "complexType": {
+                    "original": "Placement",
+                    "resolved": "\"bottom\" | \"bottom-end\" | \"bottom-start\" | \"left\" | \"left-end\" | \"left-start\" | \"right\" | \"right-end\" | \"right-start\" | \"top\" | \"top-end\" | \"top-start\"",
+                    "references": {
+                        "Placement": {
+                            "location": "import",
+                            "path": "@floating-ui/dom",
+                            "id": "../../node_modules/@floating-ui/dom/dist/floating-ui.dom.d.ts::Placement"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "placement",
+                "reflect": false,
+                "defaultValue": "'bottom-start'"
+            },
+            "visualOnly": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Determines whether the text in the tooltip is read by screenreaders.\nUse for cases where the forElement component handles the accessibility."
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "visual-only",
+                "reflect": false,
+                "defaultValue": "false"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "forElement": {},
+            "role": {}
+        };
+    }
+    static get methods() {
+        return {
+            "showTooltip": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "",
+                    "tags": []
+                }
+            },
+            "hideTooltip": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "",
+                    "tags": []
+                }
+            }
+        };
+    }
+    static get elementRef() { return "root"; }
+    static get watchers() {
+        return [{
+                "propName": "for",
+                "methodName": "updateForElement"
+            }];
+    }
+}

package/dist/collection/components/legacy/gux-action-toast-legacy/gux-action-toast.js

@@ -12,7 +12,7 @@ export class GuxActionToast {
         trackComponent(this.root);
     }
     render() {
-        return (h(Host, { key: '337254312aec117cc66e2771ed28c737e2d7af25' }, h("div", { key: '24b1ab47344df468f0c6e050172e5c2f4aa57e24', class: "gux-header" }, h("div", { key: 'ce82ae50aaaf481ec954d35aeab9ad866f1e89c1', class: "gux-icon" }, h("slot", { key: 'a30a722b2c1f0ae0dc65fc465968ffa574ffdcdb', name: "icon" })), h("div", { key: '680c18deb7ebe847a0047547c50a3a67157e22f2', class: "gux-title" }, h("slot", { key: '0598882985150968d151ff83d51415a9d8ad6af7', name: "title" }))), h("div", { key: 'b450f899d266fab7bb3f6968f125c0efe36617c7', class: "gux-message" }, h("slot", { key: 'b14a9dfceab81882f66bf034c6218a3b5cf85d04', name: "message" })), h("div", { key: 'a0378081b84d7c37baf4cc67dc090bdfaddd2b98', class: "gux-action-buttons" }, h("div", { key: 'c4f8321cf28ce4f312a0c6b2e3ba3380bb0a3360', class: "gux-positive-button" }, h("slot", { key: '66f788f963628f37435e44a9dd6bae756ba28d5f', name: "positive-button" })), h("div", { key: '2243a8ff2440e59e38ef8224f7b7702db1c91e7d', class: "gux-negative-button" }, h("slot", { key: '97cf8e6bb76173b7e1d56b8fc31b5afb9759c18b', name: "negative-button" })))));
+        return (h(Host, { key: '1a8af93ebf97822103c278b6e1acf302d6fac828' }, h("div", { key: '690645f09dfbbf533a000b8e573a8eea7077eb0f', class: "gux-header" }, h("div", { key: '13d314e118929340e9f229fd4efbdd90342b7778', class: "gux-icon" }, h("slot", { key: 'dac24e0dcb852921e631e7e24ae8b283fb3dc348', name: "icon" })), h("div", { key: 'd0c423a9f94f4cc2c2a0d9e42f28c0350c6eaebe', class: "gux-title" }, h("slot", { key: '4dc1946758a1644e5a8f5f852e93205386f8dc5e', name: "title" }))), h("div", { key: '633d576934edbef111e81a4291c0586a831f8127', class: "gux-message" }, h("slot", { key: '78830fba4de476e503b0bf6774c9453d3b7f589d', name: "message" })), h("div", { key: 'ede5f36a0f0dfcfe3c57563813dcfb88754f9e1c', class: "gux-action-buttons" }, h("div", { key: '6d4c629edce80fe5bb17af72eb20569c92afb8d2', class: "gux-positive-button" }, h("slot", { key: '5d7ba5a7a8700b0258f38631f41a451f9229eea3', name: "positive-button" })), h("div", { key: 'f004a4f6eff0999ace5bd07b5613c7e848f4b0c7', class: "gux-negative-button" }, h("slot", { key: '45311073079442b62fa1580cb14cc4f0b4643cf4', name: "negative-button" })))));
     }
     static get is() { return "gux-action-toast-legacy"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/legacy/gux-advanced-dropdown-legacy/dropdown-option/gux-dropdown-option.js

@@ -5,14 +5,6 @@ function escapeRegex(input) {
     return input.replace(escapeRegexStr, '\\$&');
 }
 export class GuxDropdownOption {
-    constructor() {
-        this.value = undefined;
-        this.disabled = undefined;
-        this.filtered = undefined;
-        this.selected = undefined;
-        this.text = undefined;
-        this.highlight = undefined;
-    }
     /**
      * Gets the value rendered by the drop down item.
      */
@@ -58,7 +50,7 @@ export class GuxDropdownOption {
         };
     }
     render() {
-        return (h("div", { key: '459b214df1450f1727871767af8cb12dfbcb6afa', class: "gux-dropdown-option", title: this.text }, this.textWithHighlights()));
+        return (h("div", { key: 'ea20401230e49f6f334230b89aee8d99fa290784', class: "gux-dropdown-option", title: this.text }, this.textWithHighlights()));
     }
     textWithHighlights() {
         if (!this.highlight || !this.text) {
@@ -103,6 +95,8 @@ export class GuxDropdownOption {
                     "tags": [],
                     "text": "The content of this attribute represents the value to be submitted on 'input' changes,\nshould this option be selected. If this attribute is omitted, the value is taken from\nthe text content of the option element."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "value",
                 "reflect": false
             },
@@ -120,6 +114,8 @@ export class GuxDropdownOption {
                     "tags": [],
                     "text": "If this Boolean attribute is set, this option is not checkable. It won't receive any\nbrowsing events, like mouse clicks or focus-related ones."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "disabled",
                 "reflect": false
             },
@@ -137,6 +133,8 @@ export class GuxDropdownOption {
                     "tags": [],
                     "text": "If this Boolean attribute is set, the option is not visible to the select control.\nThis does not mean that it clears the selection if it was previously selected.\n\nShould only be used by internal users."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "filtered",
                 "reflect": true
             },
@@ -154,6 +152,8 @@ export class GuxDropdownOption {
                     "tags": [],
                     "text": "If present, this Boolean attribute indicates that the option is currently selected."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "selected",
                 "reflect": true
             },
@@ -171,6 +171,8 @@ export class GuxDropdownOption {
                     "tags": [],
                     "text": ""
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "text",
                 "reflect": false
             }