@refinitiv-ui/elements 5.12.0-alpha.0 → 5.12.0

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/elements/tornado-chart.d.ts

@@ -0,0 +1,78 @@
+import { JSXInterface } from '../../jsx';
+import { ResponsiveElement, TemplateResult, CSSResultGroup, ElementSize } from '@refinitiv-ui/core';
+import './tornado-item.js';
+/**
+ * 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 `CSSResultGroup` that will be used
+     * to style the host, slotted children
+     * and the internal template of the element.
+     * @return CSS template
+     */
+    static get styles(): CSSResultGroup;
+    /**
+     * 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,122 @@
+import { __decorate } from "tslib";
+import { ResponsiveElement, html, css } 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 { VERSION } from '../../version.js';
+import './tornado-item.js';
+/**
+ * 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;
+        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 `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: 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, CSSResultGroup } from '@refinitiv-ui/core';
+import '../../progress-bar/index.js';
+import '../../layout/index.js';
+/**
+ * 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 `CSSResultGroup` that will be used
+     * to style the host, slotted children
+     * and the internal template of the element.
+     * @return CSS template
+     */
+    static get styles(): CSSResultGroup;
+    /**
+     * 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 {};

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

@@ -0,0 +1,207 @@
+import { __decorate } from "tslib";
+import { BasicElement, html, css } 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 { ifDefined } from '@refinitiv-ui/core/lib/directives/if-defined.js';
+import { VERSION } from '../../version.js';
+import '../../progress-bar/index.js';
+import '../../layout/index.js';
+/**
+ * A part of <ef-tornado-chart />,
+ * consists mainly of primary, secondary ef-progress-bar and labels.
+ */
+let TornadoItem = class TornadoItem extends BasicElement {
+    constructor() {
+        super(...arguments);
+        /**
+         * Internal vertical flag value, used only by its getter and setter
+         */
+        this._vertical = false;
+        /**
+         * Display highlight styles onto the item
+         */
+        this.highlighted = false;
+        /**
+         * Primary bar chart's value
+         */
+        this.primaryValue = null;
+        /**
+         * Primary bar chart's label
+         */
+        this.primaryLabel = null;
+        /**
+         * Secondary bar chart's value
+         */
+        this.secondaryValue = null;
+        /**
+         * Secondary bar chart's label
+         */
+        this.secondaryLabel = null;
+        /**
+         * A flag to determine container layout state
+         */
+        this.isContainer = false;
+        /**
+         * Primary bar chart alignment
+         */
+        this.primaryBarAlignment = 'right';
+        /**
+         * Secondary bar chart alignment
+         */
+        this.secondaryBarAlignment = 'left';
+        /**
+         * Label container's size
+         */
+        this.labelLayoutSize = '25%';
+        /**
+         * Primary layout flex basis size
+         */
+        this.primaryLayoutFlexBasis = '40%';
+        /**
+         * Secondary layout flex basis size
+         */
+        this.secondaryLayoutFlexBasis = '40%';
+    }
+    /**
+     * Element version number
+     * @returns version number
+     */
+    static get version() {
+        return VERSION;
+    }
+    /**
+     * Getter for toggling bar chart alignment
+     * @returns {boolean} true if component is in vertical mode
+     */
+    get vertical() {
+        return this._vertical;
+    }
+    /**
+     * Setter for toggling bar chart alignment
+     * @param {boolean} value vertical
+     */
+    set vertical(value) {
+        const previousValue = this._vertical;
+        if (value === previousValue) {
+            return;
+        }
+        this._vertical = value;
+        /**
+         * Observe when vertical property changes,
+         * then toggle between alignments
+         */
+        if (value) {
+            this.showVerticalMode();
+        }
+        else {
+            this.showHorizontalMode();
+        }
+        this.requestUpdate('vertical', previousValue);
+    }
+    /**
+     * Triggers vertical layout mode
+     * @returns {void}
+     */
+    showVerticalMode() {
+        this.isContainer = true;
+        this.labelLayoutSize = undefined;
+        this.primaryLayoutFlexBasis = undefined;
+        this.secondaryLayoutFlexBasis = undefined;
+        this.primaryBarAlignment = 'left';
+        this.secondaryBarAlignment = 'left';
+    }
+    /**
+     * Triggers horizontal layout mode
+     * @returns {void}
+     */
+    showHorizontalMode() {
+        this.isContainer = false;
+        this.labelLayoutSize = '25%';
+        this.primaryLayoutFlexBasis = '40%';
+        this.secondaryLayoutFlexBasis = '40%';
+        this.primaryBarAlignment = 'right';
+        this.secondaryBarAlignment = 'left';
+    }
+    /**
+     * 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: block;
+      }
+      :host([vertical]) [part=seperator] {
+        display: none;
+      }
+      :host([vertical]) [part=container] {
+        align-items: inherit;
+      }
+      [part=container] {
+        padding: 0;
+        align-items: center;
+      }
+      [part=primary-bar],
+      [part=secondary-bar] {
+        width: 100%;
+      }
+    `;
+    }
+    /**
+     * A `TemplateResult` that will be used
+     * to render the updated internal template.
+     * @return Render template
+     */
+    render() {
+        return html `
+      <ef-layout part="container" flex nowrap ?container="${this.isContainer}">
+        <ef-layout flex size="${ifDefined(this.labelLayoutSize)}">
+          <div part="label">
+            <slot></slot>
+          </div>
+        </ef-layout>
+        <ef-layout flex basis="${ifDefined(this.primaryLayoutFlexBasis)}">
+          <ef-progress-bar
+            part="primary-bar"
+            alignment=${this.primaryBarAlignment}
+            label="${ifDefined(this.primaryLabel || undefined)}"
+            value="${ifDefined(this.primaryValue || undefined)}">
+          </ef-progress-bar>
+        </ef-layout>
+        <div part="seperator"></div>
+        <ef-layout flex basis="${ifDefined(this.secondaryLayoutFlexBasis)}">
+          <ef-progress-bar
+            part="secondary-bar"
+            alignment="${this.secondaryBarAlignment}"
+            label="${ifDefined(this.secondaryLabel || undefined)}"
+            value="${ifDefined(this.secondaryValue || undefined)}">
+          </ef-progress-bar>
+        </ef-layout>
+      </ef-layout>
+    `;
+    }
+};
+__decorate([
+    property({ type: Boolean, reflect: true })
+], TornadoItem.prototype, "vertical", null);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], TornadoItem.prototype, "highlighted", void 0);
+__decorate([
+    property({ type: String, attribute: 'primary-value' })
+], TornadoItem.prototype, "primaryValue", void 0);
+__decorate([
+    property({ type: String, attribute: 'primary-label' })
+], TornadoItem.prototype, "primaryLabel", void 0);
+__decorate([
+    property({ type: String, attribute: 'secondary-value' })
+], TornadoItem.prototype, "secondaryValue", void 0);
+__decorate([
+    property({ type: String, attribute: 'secondary-label' })
+], TornadoItem.prototype, "secondaryLabel", void 0);
+TornadoItem = __decorate([
+    customElement('ef-tornado-item')
+], TornadoItem);
+export { TornadoItem };

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

@@ -0,0 +1,2 @@
+export { TornadoChart } from './elements/tornado-chart.js';
+export { TornadoItem } from './elements/tornado-item.js';