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

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

@@ -1,15 +0,0 @@
-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

@@ -1,140 +0,0 @@
-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

@@ -1,3 +0,0 @@
-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

@@ -1,3 +0,0 @@
-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

@@ -1,3 +0,0 @@
-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

@@ -1,3 +0,0 @@
-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

@@ -1,78 +0,0 @@
-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

@@ -1,122 +0,0 @@
-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

@@ -1,110 +0,0 @@
-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

@@ -1,207 +0,0 @@
-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 };