@refinitiv-ui/elements 5.3.3 → 5.7.0

package/lib/tooltip/index.js

@@ -0,0 +1,477 @@
+var Tooltip_1;
+import { __decorate } from "tslib";
+import { BasicElement, html, css, matches } from '@refinitiv-ui/core';
+import { customElement } from '@refinitiv-ui/core/lib/decorators/custom-element.js';
+import { property } from '@refinitiv-ui/core/lib/decorators/property.js';
+import { query } from '@refinitiv-ui/core/lib/decorators/query.js';
+import { VERSION } from '../version.js';
+import { isSlotEmpty } from '@refinitiv-ui/utils/lib/is-slot-empty.js';
+import '../overlay/index.js';
+import './elements/title-tooltip.js';
+import { register, deregister } from './managers/tooltip-manager.js';
+import { tooltipRenderer } from './helpers/renderer.js';
+import { register as registerOverflowTooltip } from './helpers/overflow-tooltip.js';
+const TooltipPositionMap = {
+    'auto': ['bottom-start', 'top-start'],
+    'above': ['top-middle'],
+    'right': ['right-middle'],
+    'below': ['bottom-middle'],
+    'left': ['left-middle']
+};
+/**
+ * Tooltip displays extra information when the
+ * user hovers the pointer over an item.
+ */
+let Tooltip = Tooltip_1 = class Tooltip extends BasicElement {
+    constructor() {
+        super(...arguments);
+        this.matchTarget = null;
+        this.matchTargetRect = null;
+        this.showDelay = 300;
+        this.hideDelay = 150;
+        this.clicked = false;
+        /**
+        * CSS selector to match the tooltip
+        */
+        this.selector = '';
+        /**
+        * The position of the tooltip. Use the following values:
+        * `auto` (default) - display based on mouse enter coordinates
+        * `above` - display above the element
+        * `right` - display to the right of the element
+        * `below` - display beneath the element
+        * `left` - display to the left of the element
+        */
+        this.position = 'auto';
+        /**
+        * Set the transition style.
+        * Value can be `fade`, `zoom`, `slide-down`, `slide-up`, `slide-right`,
+        * `slide-left`, `slide-right-down`, `slide-right-up`, `slide-left-down`, `slide-left-up`, or null in case of no transition
+        *  @type {TooltipTransitionStyle}
+        */
+        this.transitionStyle = 'fade';
+        this._x = 0;
+        this._y = 0;
+        this._positionTarget = null;
+        this._opened = false;
+        /**
+         * Clear all timers
+         * @returns {void}
+         */
+        this.reset = () => {
+            window.clearTimeout(this.timerTimeout);
+        };
+        /**
+         * Reset tooltip
+         * @returns {void}
+         */
+        this.resetTooltip = () => {
+            this.hideTooltip();
+        };
+        /**
+         * Run when mouse is moving over the document
+         * @param event Mouse move event
+         * @param paths Event paths
+         * @returns {void}
+         */
+        this.onMouseMove = (event, paths) => {
+            this.showTooltip(paths, event.clientX, event.clientY);
+        };
+        /**
+         * Run when document click or contextmenu event happens
+         * @returns {void}
+         */
+        this.onClick = () => {
+            this.clicked = true;
+            this.hideTooltip();
+        };
+        /**
+         * Run when document mouse out event happens
+         * @returns {void}
+         */
+        this.onMouseOut = ({ relatedTarget }) => {
+            // document mouesemove, mouseleave and blur are not fired over iframe
+            // therefore create a special case for iframe to hide the tooltip
+            /* istanbul ignore next */
+            if (Tooltip_1.isIframe(relatedTarget)) {
+                this.resetTooltip();
+            }
+        };
+    }
+    /**
+     * Element version number
+     * @returns version number
+     */
+    static get version() {
+        return VERSION;
+    }
+    /**
+     * A `CSSResultGroup` that will be used
+     * to style the host, slotted children
+     * and the internal template of the element.
+     * @return CSS template
+     */
+    static get styles() {
+        return css `
+      :host {
+        display: contents;
+        position: absolute;
+        max-width: 0;
+        max-height: 0;
+        min-width: 0;
+        min-height: 0;
+        flex: none;
+        visibility: hidden;
+      }
+      [part=tooltip] {
+        visibility: visible;
+        overflow: visible;
+      }
+      [part=position-adjuster] {
+        position: fixed;
+        z-index: -1;
+        top: 0;
+        left: 0;
+        visibility: hidden;
+      }
+    `;
+    }
+    /**
+     * True if an element is an iframe
+     * @param relatedTarget Element to check
+     * @returns isIframe
+     */
+    static isIframe(relatedTarget) {
+        return relatedTarget !== null && relatedTarget.localName === 'iframe';
+    }
+    /**
+     * Check if the match target has moved position
+     * @param matchTargetRect Match target rect
+     * @param lastMatchTarget Previous match target
+     * @returns matches
+     */
+    static elementHasMoved(matchTargetRect, lastMatchTarget) {
+        if (lastMatchTarget === null) {
+            return true;
+        }
+        return lastMatchTarget.top !== matchTargetRect.top || lastMatchTarget.left !== matchTargetRect.left;
+    }
+    /**
+     * Set tooltip y coordinate
+     * @param x X coordinate
+     */
+    set x(x) {
+        const oldX = this._x;
+        if (oldX !== x) {
+            this._x = x;
+            this.requestUpdate('x', oldX);
+        }
+    }
+    /**
+     * Set tooltip y coordinate
+     * @param y Y coordinate
+     */
+    set y(y) {
+        const oldY = this._y;
+        if (oldY !== y) {
+            this._y = y;
+            this.requestUpdate('y', oldY);
+        }
+    }
+    /**
+     * Set tooltip position target
+     * @param positionTarget Position target
+     */
+    set positionTarget(positionTarget) {
+        const oldPositionTarget = this._positionTarget;
+        if (positionTarget !== oldPositionTarget) {
+            this._positionTarget = positionTarget;
+            this.requestUpdate('positionTarget', oldPositionTarget);
+        }
+    }
+    /**
+     * Run when opened attribute has changed. Map to popup window
+     * @param opened True if popup should be opened
+     * @returns {void}
+     */
+    setOpened(opened) {
+        const oldOpened = this._opened;
+        if (oldOpened !== opened) {
+            this._opened = opened;
+            this.requestUpdate('opened', oldOpened);
+        }
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        register(this, {
+            mousemove: this.reset,
+            mousemoveThrottled: this.onMouseMove,
+            click: this.onClick,
+            mouseout: this.onMouseOut,
+            mouseleave: this.resetTooltip,
+            wheel: this.resetTooltip,
+            keydown: this.resetTooltip,
+            blur: this.resetTooltip
+        });
+    }
+    disconnectedCallback() {
+        deregister(this);
+        this.setOpened(false);
+        this.reset();
+        this.matchTarget = null;
+        this.matchTargetRect = null;
+        this.positionTarget = null;
+        super.disconnectedCallback();
+    }
+    firstUpdated(changedProperties) {
+        super.firstUpdated(changedProperties);
+        this.showDelay = parseInt(this.getComputedVariable('--show-delay', '300'), 10);
+        this.hideDelay = parseInt(this.getComputedVariable('--hide-delay', '150'), 10);
+    }
+    /**
+     * Check whether an element matches by condition
+     * If condition is not defined, checks by CSS selector
+     * @param element Element to check
+     * @param paths Event paths
+     * @returns true if element matches
+     */
+    isMatchElement(element, paths) {
+        if (this.condition) {
+            return this.condition(element, paths);
+        }
+        if (this.selector) {
+            return matches(element, this.selector);
+        }
+        return false;
+    }
+    /**
+     * Return true if the target matches condition. False otherwise
+     * @param paths Target to match against
+     * @returns matched element or null
+     */
+    getMatchedElement(paths) {
+        if (!this.condition && !this.selector) {
+            return null;
+        }
+        const l = paths.length;
+        for (let i = 0; i < l; i += 1) {
+            const node = paths[i];
+            if (node.nodeType !== Node.ELEMENT_NODE) {
+                continue;
+            }
+            if (node === document.body || node === document.documentElement) {
+                return null;
+            }
+            const element = node;
+            if (this.isMatchElement(element, paths)) {
+                return element;
+            }
+        }
+        return null;
+    }
+    /**
+     * Check if the autosuggest has content
+     * @returns {Boolean} content exists
+     * @private
+     */
+    hasSlotContent() {
+        if (this.contentNodes) {
+            /* show the slot. Default slotted content cannot work with tooltip or renderer */
+            return false;
+        }
+        return isSlotEmpty(this.contentSlot);
+    }
+    /**
+     * Get content off the target element
+     * @param target Target to check against
+     * @returns contentNode or null
+     */
+    getContentNode(target) {
+        let content;
+        if (typeof this.renderer === 'function') {
+            content = this.renderer(target);
+        }
+        else {
+            content = tooltipRenderer(target);
+        }
+        if (typeof content === 'string' && content) {
+            return document.createTextNode(content);
+        }
+        if (content instanceof HTMLElement) {
+            return content.cloneNode(true);
+        }
+        if (content instanceof DocumentFragment) {
+            return content.cloneNode(true);
+        }
+        return null;
+    }
+    /**
+     * Render content based on render to tooltip
+     * @param contentNode Content node to set
+     * @returns {void}
+     */
+    renderContentNode(contentNode) {
+        var _a;
+        if (contentNode instanceof Text && this.textContent === contentNode.textContent) {
+            return; /* Do not re-render the same text. Due to IE11 limitation we have to operate with text nodes */
+        }
+        if ((_a = this.contentNodes) === null || _a === void 0 ? void 0 : _a.length) {
+            this.contentNodes.forEach((node) => {
+                var _a;
+                (_a = node.parentNode) === null || _a === void 0 ? void 0 : _a.removeChild(node);
+            });
+        }
+        if (contentNode instanceof DocumentFragment) {
+            this.contentNodes = [...contentNode.childNodes];
+        }
+        else {
+            this.contentNodes = [contentNode];
+        }
+        this.appendChild(contentNode);
+    }
+    /**
+     * Hide tooltip
+     * @returns {void}
+     */
+    hideTooltip() {
+        this.reset();
+        this.matchTarget = null;
+        this.matchTargetRect = null;
+        this.positionTarget = null;
+        this.setOpened(false);
+    }
+    /**
+     * Try to show the tooltip if it matches the target
+     * @param paths The paths leading to target
+     * @param x X mouse coordinate
+     * @param y Y mouse coordinate
+     * @returns {void}
+     */
+    showTooltip(paths, x, y) {
+        // composedPath is only available on the direct event
+        this.timerTimeout = window.setTimeout(() => {
+            const lastMatchTarget = this.matchTarget;
+            const matchTarget = this.getMatchedElement(paths);
+            this.matchTarget = matchTarget;
+            if (!matchTarget) {
+                this.setOpened(false);
+                return;
+            }
+            const matchTargetRect = matchTarget.getBoundingClientRect();
+            if (lastMatchTarget === matchTarget && !Tooltip_1.elementHasMoved(matchTargetRect, this.matchTargetRect)) {
+                return;
+            }
+            this.matchTargetRect = matchTargetRect;
+            this.clicked = false;
+            // adjust tooltip x & y vs clientX and clientY
+            const adjusterRect = this.positionAdjusterEl.getBoundingClientRect();
+            x = adjusterRect.left >= 0 ? x - adjusterRect.left : x;
+            y = adjusterRect.top >= 0 ? y - adjusterRect.top : y;
+            if (this.hasSlotContent()) {
+                this.showTooltipAtPosition(matchTarget, x, y);
+                return;
+            }
+            const contentNode = this.getContentNode(matchTarget);
+            if (contentNode) {
+                this.renderContentNode(contentNode);
+                this.showTooltipAtPosition(matchTarget, x, y);
+                return;
+            }
+            this.setOpened(false);
+        }, this.getTooltipShowDelay);
+    }
+    /**
+     * Get the delay to show tooltip
+     */
+    get getTooltipShowDelay() {
+        return this.clicked ? Math.round(this.hideDelay / 2) : this.opened ? this.hideDelay : this.showDelay;
+    }
+    /**
+     * Show the tooltip corresponding to the correct position
+     * @param matchTarget Target to show the tooltip against
+     * @param x X coordinate
+     * @param y Y coordinate
+     * @returns {void}
+     */
+    showTooltipAtPosition(matchTarget, x, y) {
+        switch (this.position) {
+            case 'above':
+            case 'right':
+            case 'below':
+            case 'left':
+                this.x = 0;
+                this.y = 0;
+                this.positionTarget = matchTarget;
+                break;
+            default:
+                this.positionTarget = null;
+                this.x = x;
+                this.y = y;
+        }
+        this.setOpened(true);
+    }
+    /**
+     * Get popup position based on tooltip position
+     */
+    get tipPosition() {
+        return TooltipPositionMap[this.position];
+    }
+    /**
+     * A `TemplateResult` that will be used
+     * to render the updated internal template.
+     * @returns Render template
+     */
+    render() {
+        return html `<ef-overlay
+      part="tooltip"
+      .noCancelOnEscKey=${true}
+      .noCancelOnOutsideClick=${true}
+      .withShadow=${true}
+      .noInteractionLock=${true}
+      .noFocusManagement=${true}
+      ?opened=${this._opened}
+      .position=${this.tipPosition}
+      .transitionStyle=${this.transitionStyle}
+      .positionTarget=${this._positionTarget}
+      .x=${this._x}
+      .y=${this._y}><slot id="contentSlot"></slot></ef-overlay><div part="position-adjuster"></div>`;
+    }
+    /**
+     * true if tooltip is opened, false otherwise
+     * @returns opened
+     */
+    get opened() {
+        return this._opened;
+    }
+};
+__decorate([
+    property({ type: String })
+], Tooltip.prototype, "selector", void 0);
+__decorate([
+    property({ type: Function, attribute: false })
+], Tooltip.prototype, "condition", void 0);
+__decorate([
+    property({ type: Function, attribute: false })
+], Tooltip.prototype, "renderer", void 0);
+__decorate([
+    property({ type: String })
+], Tooltip.prototype, "position", void 0);
+__decorate([
+    property({ type: String, attribute: 'transition-style' })
+], Tooltip.prototype, "transitionStyle", void 0);
+__decorate([
+    query('[part=tooltip]')
+], Tooltip.prototype, "tooltip", void 0);
+__decorate([
+    query('[part=position-adjuster]')
+], Tooltip.prototype, "positionAdjusterEl", void 0);
+__decorate([
+    query('#contentSlot')
+], Tooltip.prototype, "contentSlot", void 0);
+Tooltip = Tooltip_1 = __decorate([
+    customElement('ef-tooltip', {
+        alias: 'coral-tooltip'
+    })
+], Tooltip);
+export * from './elements/tooltip-element.js';
+export { registerOverflowTooltip, Tooltip };

package/lib/tooltip/managers/tooltip-manager.d.ts

@@ -0,0 +1,15 @@
+import type { Tooltip } from '../index.js';
+import type { DocumentCallbacks } from '../helpers/types';
+/**
+ * Register the new tooltip
+ * @param tooltip Tooltip
+ * @param documentCallbacks Callback to attach on document and body
+ * @returns {void}
+ */
+export declare const register: (tooltip: Tooltip, documentCallbacks: DocumentCallbacks) => void;
+/**
+ * Deregister the tooltip
+ * @param tooltip Tooltip
+ * @returns {void}
+ */
+export declare const deregister: (tooltip: Tooltip) => void;

package/lib/tooltip/managers/tooltip-manager.js

@@ -0,0 +1,140 @@
+import { TimeoutTaskRunner } from '@refinitiv-ui/utils/lib/async.js';
+import { isIE } from '@refinitiv-ui/utils/lib/browser.js';
+/**
+ * Tooltip manager is here to avoid setting multiple
+ * events on document and do expensive pre-processing
+ * in a common way
+ */
+class TooltipManager {
+    constructor() {
+        this.registry = new Map();
+        /* 5 is chosen randomly to give long enough delay to avoid performance issues, but
+        short enough for not showing the default title
+        */
+        this.titleThrottler = new TimeoutTaskRunner(5);
+        /**
+         * @param event Mouse move event
+         * @returns {void}
+         */
+        this.onMouseMove = (event) => {
+            const paths = event.composedPath(); /* paths may be lost if used in schedule */
+            this.registry.forEach(({ mousemove }) => mousemove(event, paths));
+            this.titleThrottler.schedule(() => {
+                TooltipManager.overrideTitle(paths);
+                this.registry.forEach(({ mousemoveThrottled }) => mousemoveThrottled(event, paths));
+            });
+        };
+        /**
+         * @param event Mouse click or contextmenu event
+         * @returns {void}
+         */
+        this.onClick = (event) => {
+            this.registry.forEach(({ click }) => click(event));
+        };
+        /**
+         * @param event Mouse out event
+         * @returns {void}
+         */
+        this.onMouseOut = (event) => {
+            this.registry.forEach(({ mouseout }) => mouseout(event));
+        };
+        /**
+         * @param event Mouse leave event
+         * @returns {void}
+         */
+        this.onMouseLeave = (event) => {
+            this.registry.forEach(({ mouseleave }) => mouseleave(event));
+        };
+        /**
+         * @param event Wheel event
+         * @returns {void}
+         */
+        this.onWheel = (event) => {
+            this.registry.forEach(({ wheel }) => wheel(event));
+        };
+        /**
+         * @param event Keyboard event
+         * @returns {void}
+         */
+        this.onKeyDown = (event) => {
+            this.registry.forEach(({ keydown }) => keydown(event));
+        };
+        /**
+         * @param event Focus event
+         * @returns {void}
+         */
+        this.onBlur = (event) => {
+            this.registry.forEach(({ blur }) => blur(event));
+        };
+    }
+    /**
+     * Override default title attribute
+     * @param paths Event paths
+     * @returns {void}
+     */
+    static overrideTitle(paths) {
+        const l = paths.length;
+        for (let i = 0; i < l; i += 1) {
+            const node = paths[i];
+            if (node.nodeType !== Node.ELEMENT_NODE) {
+                continue;
+            }
+            if (node === document.body || node === document.documentElement) {
+                break;
+            }
+            const element = node;
+            const title = element.getAttribute('title');
+            if (title) {
+                element.title = title;
+            }
+        }
+    }
+    register(tooltip, documentCallbacks) {
+        if (!this.registry.size) {
+            // IE11 does not support event options
+            const supportOptions = !isIE;
+            const eventOptions = supportOptions ? { passive: true } : undefined;
+            document.addEventListener('mousemove', this.onMouseMove, eventOptions);
+            document.addEventListener('mouseout', this.onMouseOut, eventOptions);
+            document.addEventListener('mouseleave', this.onMouseLeave, eventOptions);
+            document.addEventListener('wheel', this.onWheel, eventOptions);
+            document.addEventListener('keydown', this.onKeyDown, eventOptions);
+            document.body.addEventListener('blur', this.onBlur, eventOptions);
+            const clickEventOptions = supportOptions ? { passive: true, capture: true } : true;
+            document.addEventListener('click', this.onClick, clickEventOptions);
+            document.addEventListener('contextmenu', this.onClick, clickEventOptions);
+        }
+        this.registry.set(tooltip, documentCallbacks);
+    }
+    deregister(tooltip) {
+        this.registry.delete(tooltip);
+        if (!this.registry.size) {
+            document.removeEventListener('mousemove', this.onMouseMove);
+            document.removeEventListener('mouseout', this.onMouseOut);
+            document.removeEventListener('mouseleave', this.onMouseLeave);
+            document.removeEventListener('wheel', this.onWheel);
+            document.removeEventListener('keydown', this.onKeyDown);
+            document.body.removeEventListener('blur', this.onBlur);
+            document.removeEventListener('click', this.onClick, true);
+            document.removeEventListener('contextmenu', this.onClick, true);
+        }
+    }
+}
+const tooltipManager = new TooltipManager();
+/**
+ * Register the new tooltip
+ * @param tooltip Tooltip
+ * @param documentCallbacks Callback to attach on document and body
+ * @returns {void}
+ */
+export const register = (tooltip, documentCallbacks) => {
+    tooltipManager.register(tooltip, documentCallbacks);
+};
+/**
+ * Deregister the tooltip
+ * @param tooltip Tooltip
+ * @returns {void}
+ */
+export const deregister = (tooltip) => {
+    tooltipManager.deregister(tooltip);
+};

package/lib/tooltip/themes/halo/dark/index.js

@@ -0,0 +1,3 @@
+import '@refinitiv-ui/elements/lib/overlay/themes/halo/dark';
+
+elf.customStyles.define('ef-tooltip', ':host [part=tooltip]{--panel-background-color:#FFFFFF;pointer-events:none;border:1px solid hsla(220,12%,75%,.15);padding:4px 8px;background-color:#fff;border-radius:0;overflow:hidden;max-width:320px;overflow-wrap:break-word;word-wrap:break-word;margin:4px;border:none;min-height:18px;line-height:18px;color:#0d0d0d}:host(:not([position])) [part=tooltip],:host([position=auto]) [part=tooltip]{margin-top:20px;margin-left:0}');

package/lib/tooltip/themes/halo/light/index.js

@@ -0,0 +1,3 @@
+import '@refinitiv-ui/elements/lib/overlay/themes/halo/light';
+
+elf.customStyles.define('ef-tooltip', ':host [part=tooltip]{--panel-background-color:#FFF4CC;pointer-events:none;border:1px solid hsla(220,12%,75%,.15);padding:4px 8px;background-color:#fff4cc;border-radius:0;overflow:hidden;max-width:320px;overflow-wrap:break-word;word-wrap:break-word;margin:4px;border:none;min-height:18px;line-height:18px;color:#0d0d0d}:host(:not([position])) [part=tooltip],:host([position=auto]) [part=tooltip]{margin-top:20px;margin-left:0}');

package/lib/tooltip/themes/solar/charcoal/index.js

@@ -0,0 +1,3 @@
+import '@refinitiv-ui/elements/lib/overlay/themes/solar/charcoal';
+
+elf.customStyles.define('ef-tooltip', ':host [part=tooltip]{--panel-background-color:#3C3C42;pointer-events:none;border:1px solid #000;padding:5px 8px;background-color:#3c3c42;border-radius:0;overflow:hidden;max-width:250px;overflow-wrap:break-word;word-wrap:break-word;margin:7px}:host(:not([position])) [part=tooltip],:host([position=auto]) [part=tooltip]{margin-top:20px;margin-left:0}');

package/lib/tooltip/themes/solar/pearl/index.js

@@ -0,0 +1,3 @@
+import '@refinitiv-ui/elements/lib/overlay/themes/solar/pearl';
+
+elf.customStyles.define('ef-tooltip', ':host [part=tooltip]{--panel-background-color:#FFFFFF;pointer-events:none;border:1px solid #a9afba;padding:5px 8px;background-color:#fff;border-radius:0;overflow:hidden;max-width:250px;overflow-wrap:break-word;word-wrap:break-word;margin:7px}:host(:not([position])) [part=tooltip],:host([position=auto]) [part=tooltip]{margin-top:20px;margin-left:0}');

package/lib/tornado-chart/custom-elements.json

@@ -0,0 +1,45 @@
+{
+  "version": "experimental",
+  "tags": [
+    {
+      "name": "ef-tornado-chart",
+      "description": "A data visualization that helps to\nshow the differences or similarities between values",
+      "attributes": [
+        {
+          "name": "primary",
+          "description": "Primary bar chart legend text",
+          "type": "string | null"
+        },
+        {
+          "name": "secondary",
+          "description": "Secondary bar chart legend text",
+          "type": "string | null"
+        }
+      ],
+      "properties": [
+        {
+          "name": "primary",
+          "attribute": "primary",
+          "description": "Primary bar chart legend text",
+          "type": "string | null"
+        },
+        {
+          "name": "secondary",
+          "attribute": "secondary",
+          "description": "Secondary bar chart legend text",
+          "type": "string | null"
+        }
+      ],
+      "slots": [
+        {
+          "name": "header",
+          "description": "Any HTML contents to display at chart header section"
+        },
+        {
+          "name": "footer",
+          "description": "Any HTML contents to display at chart footer section"
+        }
+      ]
+    }
+  ]
+}