@refinitiv-ui/elements 5.3.3 → 5.3.4

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

@@ -0,0 +1,15 @@
+import type { Tooltip } from '../index';
+import { 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,144 @@
+import { TimeoutTaskRunner } from '@refinitiv-ui/utils';
+/**
+ * Helper to check if the browser is IE
+ * @returns True if the browser is IE
+ */
+const isIE = () => !!navigator.userAgent.match(/Trident/g) || !!navigator.userAgent.match(/MSIE/g);
+/**
+ * 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"
+        }
+      ]
+    }
+  ]
+}

package/lib/tornado-chart/elements/tornado-chart.d.ts

@@ -0,0 +1,78 @@
+import { JSXInterface } from '../../jsx';
+import { ResponsiveElement, TemplateResult, CSSResult, ElementSize } from '@refinitiv-ui/core';
+import './tornado-item';
+/**
+ * A data visualization that helps to
+ * show the differences or similarities between values
+ * @slot header - Any HTML contents to display at chart header section
+ * @slot footer - Any HTML contents to display at chart footer section
+ */
+export declare class TornadoChart extends ResponsiveElement {
+    /**
+     * Element version number
+     * @returns version number
+     */
+    static get version(): string;
+    /**
+     * Primary bar chart legend text
+     */
+    primary: string | null;
+    /**
+     * Secondary bar chart legend text
+     */
+    secondary: string | null;
+    /**
+     * A flag to keep component's responsive state
+     */
+    private isResponsive;
+    /**
+     * True if legend's alignment is vertical
+     */
+    private legendAlignment;
+    /**
+     * Set chart's legend alignment
+     * @param responsive true if items needs to be responsive
+     * @returns {void}
+     */
+    private setLegendAlignment;
+    /**
+     * Set ef-tornado-item's alignment
+     * @param responsive true if items needs to be responsive
+     * @returns {void}
+     */
+    private setItemAlignment;
+    /**
+     * Handles element's resize behavior
+     * @ignore
+     * @param {ElementSize} size size of the element
+     * @returns {void}
+     */
+    resizedCallback(size: ElementSize): void;
+    /**
+     * A `CSSResult` that will be used
+     * to style the host, slotted children
+     * and the internal template of the element.
+     * @return CSS template
+     */
+    static get styles(): CSSResult | CSSResult[];
+    /**
+     * A `TemplateResult` that will be used
+     * to render the updated internal template.
+     * @return Render template
+     */
+    protected render(): TemplateResult;
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'ef-tornado-chart': TornadoChart;
+  }
+
+  namespace JSX {
+    interface IntrinsicElements {
+      'ef-tornado-chart': Partial<TornadoChart> | JSXInterface.HTMLAttributes<TornadoChart>;
+    }
+  }
+}
+
+export {};

package/lib/tornado-chart/elements/tornado-chart.js

@@ -0,0 +1,125 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { ResponsiveElement, html, css, customElement, property } from '@refinitiv-ui/core';
+import { VERSION } from '../../';
+import './tornado-item';
+/**
+ * A data visualization that helps to
+ * show the differences or similarities between values
+ * @slot header - Any HTML contents to display at chart header section
+ * @slot footer - Any HTML contents to display at chart footer section
+ */
+let TornadoChart = class TornadoChart extends ResponsiveElement {
+    constructor() {
+        super(...arguments);
+        /**
+         * Primary bar chart legend text
+         */
+        this.primary = null;
+        /**
+         * Secondary bar chart legend text
+         */
+        this.secondary = null;
+        /**
+         * A flag to keep component's responsive state
+         */
+        this.isResponsive = false;
+        /**
+         * True if legend's alignment is vertical
+         */
+        this.legendAlignment = false;
+    }
+    /**
+     * Element version number
+     * @returns version number
+     */
+    static get version() {
+        return VERSION;
+    }
+    /**
+     * Set chart's legend alignment
+     * @param responsive true if items needs to be responsive
+     * @returns {void}
+     */
+    setLegendAlignment(responsive) {
+        this.legendAlignment = responsive;
+        void this.requestUpdate();
+    }
+    /**
+     * Set ef-tornado-item's alignment
+     * @param responsive true if items needs to be responsive
+     * @returns {void}
+     */
+    setItemAlignment(responsive) {
+        this.querySelectorAll('ef-tornado-item').forEach((item) => {
+            item.vertical = responsive;
+        });
+    }
+    /**
+     * Handles element's resize behavior
+     * @ignore
+     * @param {ElementSize} size size of the element
+     * @returns {void}
+     */
+    resizedCallback(size) {
+        const previousResponsiveValue = this.isResponsive;
+        this.isResponsive = size.width < parseInt(this.getComputedVariable('--responsive-width'), 10);
+        // Make changes to DOM only when the responsive state changes
+        if (this.isResponsive !== previousResponsiveValue) {
+            this.setItemAlignment(this.isResponsive);
+            this.setLegendAlignment(this.isResponsive);
+        }
+    }
+    /**
+     * A `CSSResult` 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: block;
+        --responsive-width: 450;
+      }
+    `;
+    }
+    /**
+     * A `TemplateResult` that will be used
+     * to render the updated internal template.
+     * @return Render template
+     */
+    render() {
+        return html `
+      <slot name="header"></slot>
+      <div part="legend" ?vertical=${this.legendAlignment}>
+        <div part="legend-item">
+          <div part="primary-symbol"></div>
+          <div part="primary-label">${this.primary}</div>
+        </div>
+        <div part="legend-item">
+          <div part="secondary-symbol"></div>
+          <div part="secondary-label">${this.secondary}</div>
+        </div>
+      </div>
+      <slot></slot>
+      <slot name="footer"></slot>
+    `;
+    }
+};
+__decorate([
+    property({ type: String })
+], TornadoChart.prototype, "primary", void 0);
+__decorate([
+    property({ type: String })
+], TornadoChart.prototype, "secondary", void 0);
+TornadoChart = __decorate([
+    customElement('ef-tornado-chart', {
+        alias: 'sapphire-parity-chart'
+    })
+], TornadoChart);
+export { TornadoChart };

package/lib/tornado-chart/elements/tornado-item.d.ts

@@ -0,0 +1,110 @@
+import { JSXInterface } from '../../jsx';
+import { BasicElement, TemplateResult, CSSResult } from '@refinitiv-ui/core';
+import '../../progress-bar';
+import '../../layout';
+/**
+ * A part of <ef-tornado-chart />,
+ * consists mainly of primary, secondary ef-progress-bar and labels.
+ */
+export declare class TornadoItem extends BasicElement {
+    /**
+     * Element version number
+     * @returns version number
+     */
+    static get version(): string;
+    /**
+     * Internal vertical flag value, used only by its getter and setter
+     */
+    private _vertical;
+    /**
+     * Getter for toggling bar chart alignment
+     * @returns {boolean} true if component is in vertical mode
+     */
+    get vertical(): boolean;
+    /**
+     * Setter for toggling bar chart alignment
+     * @param {boolean} value vertical
+     */
+    set vertical(value: boolean);
+    /**
+     * Display highlight styles onto the item
+     */
+    highlighted: boolean;
+    /**
+     * Primary bar chart's value
+     */
+    primaryValue: string | null;
+    /**
+     * Primary bar chart's label
+     */
+    primaryLabel: string | null;
+    /**
+     * Secondary bar chart's value
+     */
+    secondaryValue: string | null;
+    /**
+     * Secondary bar chart's label
+     */
+    secondaryLabel: string | null;
+    /**
+     * A flag to determine container layout state
+     */
+    private isContainer;
+    /**
+     * Primary bar chart alignment
+     */
+    private primaryBarAlignment;
+    /**
+     * Secondary bar chart alignment
+     */
+    private secondaryBarAlignment;
+    /**
+     * Label container's size
+     */
+    private labelLayoutSize;
+    /**
+     * Primary layout flex basis size
+     */
+    private primaryLayoutFlexBasis;
+    /**
+     * Secondary layout flex basis size
+     */
+    private secondaryLayoutFlexBasis;
+    /**
+     * Triggers vertical layout mode
+     * @returns {void}
+     */
+    private showVerticalMode;
+    /**
+     * Triggers horizontal layout mode
+     * @returns {void}
+     */
+    private showHorizontalMode;
+    /**
+     * A `CSSResult` that will be used
+     * to style the host, slotted children
+     * and the internal template of the element.
+     * @return CSS template
+     */
+    static get styles(): CSSResult | CSSResult[];
+    /**
+     * A `TemplateResult` that will be used
+     * to render the updated internal template.
+     * @return Render template
+     */
+    protected render(): TemplateResult;
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'ef-tornado-item': TornadoItem;
+  }
+
+  namespace JSX {
+    interface IntrinsicElements {
+      'ef-tornado-item': Partial<TornadoItem> | JSXInterface.HTMLAttributes<TornadoItem>;
+    }
+  }
+}
+
+export {};