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

package/lib/flag/utils/FlagLoader.js

@@ -1,86 +0,0 @@
-import { CdnLoader, Deferred } from '@refinitiv-ui/utils/lib/loader.js';
-const isUrl = (str) => (/^https?:\/\//i).test(str);
-/**
- * Caches and provides flag SVGs, Loaded either by name from CDN or directly by URL.
- * Uses singleton pattern
- */
-class FlagLoader extends CdnLoader {
-    constructor() {
-        super(...arguments);
-        this.cdnPrefix = new Deferred();
-        this._isPrefixSet = false;
-    }
-    /**
-     * @returns {boolean} clarify whether prefix has been set or not.
-     */
-    get isPrefixSet() {
-        return this._isPrefixSet;
-    }
-    /**
-     * Sets clarify whether prefix has been set or not
-     * @param value - new value that is going to set.
-     */
-    set isPrefixSet(value) {
-        if (this._isPrefixSet !== value) {
-            this._isPrefixSet = value;
-        }
-    }
-    /**
-     * @returns promise, which will be resolved with CDN prefix, once set.
-     */
-    getCdnPrefix() {
-        return this.cdnPrefix.promise;
-    }
-    /**
-     * Sets CDN prefix to load source.
-     * Resolves deferred promise with CDN prefix and sets src used to check whether prefix is already set or not.
-     * @param prefix - CDN prefix.
-     * @returns {void}
-     */
-    setCdnPrefix(prefix) {
-        if (prefix) {
-            this.cdnPrefix.resolve(prefix);
-            this.isPrefixSet = true;
-        }
-    }
-    /**
-     * Creates complete source using CDN prefix and src.
-     * Waits for CDN prefix to be set.
-     * @param flagName - resource path for download
-     * @returns Promise, which will be resolved with complete source.
-     */
-    async getSrc(flagName) {
-        return flagName ? `${await this.getCdnPrefix()}${flagName}.svg` : '';
-    }
-    async loadSVG(flag) {
-        if (flag) {
-            if (!isUrl(flag)) {
-                flag = await this.getSrc(flag);
-            }
-            const response = await this.load(flag);
-            if (response && response.status === 200 && response.getResponseHeader('content-type') === 'image/svg+xml') {
-                const container = document.createElement('svg');
-                container.innerHTML = response.responseText;
-                this.stripUnsafeNodes(...container.children);
-                const svgRoot = container.firstElementChild;
-                if (svgRoot) {
-                    svgRoot.setAttribute('focusable', 'false'); /* disable IE11 focus on SVG root element */
-                }
-                return Promise.resolve(container.innerHTML);
-            }
-            return Promise.resolve('');
-        }
-    }
-}
-const flagLoaderInstance = new FlagLoader();
-export { flagLoaderInstance as FlagLoader };
-/**
- * Helper function to preload set of flags.
- * It could help to reduce flag loading delay when flag has a known set of flags that it can use.
- * @param attrs - list of arguments, representing flags.
- * Could be flag names, complete flag URLs or mix of both.
- * @returns Array of promises, which will be resolved with SVG bodies.
- */
-export const preload = (...attrs) => {
-    return attrs.map(flag => flagLoaderInstance.loadSVG(flag));
-};

package/lib/header/index.d.ts

@@ -1,46 +0,0 @@
-import { JSXInterface } from '../jsx';
-import { BasicElement, TemplateResult, CSSResultGroup } from '@refinitiv-ui/core';
-/**
- * Use to identify and separate different sections of a page.
- * Headers helps to organize the page layout content into
- * a sensible hierarchy and improve the user experience.
- *
- * @slot left - Slot to add custom contents to the left side of header e.g. ef-icon, ef-checkbox
- * @slot right - Slot to add custom contents to the right side of header e.g. ef-icon, ef-checkbox
- */
-export declare class Header extends BasicElement {
-    /**
-     * Element version number
-     * @returns version number
-     */
-    static get version(): string;
-    /**
-     * Style definition
-     * @return CSS template
-     */
-    static get styles(): CSSResultGroup;
-    /**
-     * Use level styling from theme
-     */
-    level: '1' | '2' | '3';
-    /**
-     * A `TemplateResult` that will be used
-     * to render the updated internal template.
-     * @return Render template
-     */
-    protected render(): TemplateResult;
-}
-
-declare global {
-  interface HTMLElementTagNameMap {
-    'ef-header': Header;
-  }
-
-  namespace JSX {
-    interface IntrinsicElements {
-      'ef-header': Partial<Header> | JSXInterface.HTMLAttributes<Header>;
-    }
-  }
-}
-
-export {};

package/lib/header/index.js

@@ -1,73 +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 { VERSION } from '../version.js';
-/**
- * Use to identify and separate different sections of a page.
- * Headers helps to organize the page layout content into
- * a sensible hierarchy and improve the user experience.
- *
- * @slot left - Slot to add custom contents to the left side of header e.g. ef-icon, ef-checkbox
- * @slot right - Slot to add custom contents to the right side of header e.g. ef-icon, ef-checkbox
- */
-let Header = class Header extends BasicElement {
-    constructor() {
-        super(...arguments);
-        /**
-         * Use level styling from theme
-         */
-        this.level = '2';
-    }
-    /**
-     * Element version number
-     * @returns version number
-     */
-    static get version() {
-        return VERSION;
-    }
-    /**
-     * Style definition
-     * @return CSS template
-     */
-    static get styles() {
-        return css `
-      :host {
-        display: block;
-      }
-      :host ::slotted(*) {
-        margin-top: 0;
-        margin-bottom: 0;
-        vertical-align: middle;
-      }
-      [part="label"] {
-        text-align: inherit;
-      }
-    `;
-    }
-    /**
-     * A `TemplateResult` that will be used
-     * to render the updated internal template.
-     * @return Render template
-     */
-    render() {
-        return html `
-      <slot name="left">
-        <div part="spacer"></div>
-      </slot>
-      <div part="label">
-        <slot></slot>
-      </div>
-      <slot name="right"></slot>
-    `;
-    }
-};
-__decorate([
-    property({ type: String, reflect: true })
-], Header.prototype, "level", void 0);
-Header = __decorate([
-    customElement('ef-header', {
-        alias: 'coral-header'
-    })
-], Header);
-export { Header };

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

@@ -1,2 +0,0 @@
-
-elf.customStyles.define('ef-header', ':host{color:#ccc;padding:0 0 0 4px;height:28px;font-size:12rem;font-family:inherit;white-space:nowrap;box-sizing:border-box;display:flex;align-items:center;overflow:hidden;background-color:#333;text-transform:uppercase}:host [part=spacer]{flex:none;width:4px}:host [part=label]{flex:1 1 auto;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;margin-right:8px}:host ::slotted(ef-button[transparent]){color:inherit!important}:host([level="1"]){background-color:#404040}:host([level="3"]){background-color:#262626}:host([level="4"]){background-color:#1a1a1a}');

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

@@ -1,2 +0,0 @@
-
-elf.customStyles.define('ef-header', ':host{color:#0d0d0d;padding:0 0 0 4px;height:28px;font-size:12rem;font-family:inherit;white-space:nowrap;box-sizing:border-box;display:flex;align-items:center;overflow:hidden;background-color:#e6e6e6;text-transform:uppercase}:host [part=spacer]{flex:none;width:4px}:host [part=label]{flex:1 1 auto;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;margin-right:8px}:host ::slotted(ef-button[transparent]){color:inherit!important}:host([level="1"]){background-color:#d9d9d9}:host([level="3"]){background-color:#f2f2f2}:host([level="4"]){background-color:#fafafa}');

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

@@ -1,2 +0,0 @@
-
-elf.customStyles.define('ef-header', ':host{padding:0 0 0 5px;height:27px;font-size:14rem;font-family:inherit;white-space:nowrap;box-sizing:border-box;display:flex;align-items:center;overflow:hidden;position:relative;color:#c2c2c2;background-color:#2e2e33}:host [part=spacer]{flex:none;width:5px}:host [part=label]{flex:1 1 auto;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;margin-right:10px;font-weight:600;text-transform:uppercase}:host ::slotted(ef-button[transparent]){color:inherit!important}:host([level="3"]) [part=label]{text-transform:none}:host([level="1"]){color:#e2e2e2;background-color:#4a4a52;background-image:linear-gradient(rgba(255,255,255,.03) 0,rgba(255,255,255,0) 100%)}:host([level="3"]){color:#8c8c8c;background-color:#212124}');

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

@@ -1,2 +0,0 @@
-
-elf.customStyles.define('ef-header', ':host{padding:0 0 0 5px;height:27px;font-size:14rem;font-family:inherit;white-space:nowrap;box-sizing:border-box;display:flex;align-items:center;overflow:hidden;position:relative;color:#505050;background-color:#d0d4db}:host [part=spacer]{flex:none;width:5px}:host [part=label]{flex:1 1 auto;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;margin-right:10px;font-weight:600;text-transform:uppercase}:host ::slotted(ef-button[transparent]){color:inherit!important}:host([level="3"]) [part=label]{text-transform:none}:host([level="1"]){color:#484848;background-color:#bec3cc;background-image:linear-gradient(rgba(255,255,255,.18) 0,rgba(255,255,255,0) 100%)}:host([level="3"]){color:#6e6e78;background-color:#e4e8ed}');

package/lib/heatmap/helpers/color.d.ts

@@ -1,30 +0,0 @@
-import { ColorCommonInstance } from '@refinitiv-ui/utils/lib/color.js';
-import { interpolate } from 'd3-interpolate';
-/**
- * Check if the color is a light color
- * @param col color to check
- * @returns a boolean indicating whether the color's perceived brightness is light
- */
-declare const isLight: (col: ColorCommonInstance) => boolean;
-/**
- * Brightens a color
- * @param colorString color string
- * @return a color brighter than original color
- */
-declare const brighten: (colorString: string) => string;
-/**
- * Darkens a color
- * @param colorString color string
- * @return a color darker than original color
- */
-declare const darken: (colorString: string) => string;
-/**
- * Blends two colors and its background together
- * @param color1 dominant color
- * @param color2 secondary color
- * @param backgroundColor background color
- * @param amount color blending amount
- * @returns a new blended color
- */
-declare const blend: (color1: string, color2: string, backgroundColor: string, amount: number) => string;
-export { blend, brighten, darken, isLight, interpolate };

package/lib/heatmap/helpers/color.js

@@ -1,68 +0,0 @@
-/* istanbul ignore file */
-import { color, rgb, hsl } from '@refinitiv-ui/utils/lib/color.js';
-import { interpolate } from 'd3-interpolate';
-/**
- * Check if the color is a light color
- * @param col color to check
- * @returns a boolean indicating whether the color's perceived brightness is light
- */
-const isLight = (col) => {
-    const { r, g, b } = rgb(col);
-    return ((r * 299 + g * 587 + b * 114) / 1000) > 128;
-};
-/**
- * Brightens a color
- * @param colorString color string
- * @return a color brighter than original color
- */
-const brighten = (colorString) => {
-    var _a;
-    return ((_a = color(colorString)) === null || _a === void 0 ? void 0 : _a.brighter(0.8).toString()) || '';
-};
-/**
- * Darkens a color
- * @param colorString color string
- * @return a color darker than original color
- */
-const darken = (colorString) => {
-    const color = hsl(colorString);
-    color.s += 0.15; // increasing saturation not to make the color too blackish
-    return color.darker(0.6).toString() || '';
-};
-/**
- * Blends two colors and its background together
- * @param color1 dominant color
- * @param color2 secondary color
- * @param backgroundColor background color
- * @param amount color blending amount
- * @returns a new blended color
- */
-const blend = (color1, color2, backgroundColor, amount) => {
-    var _a;
-    let primaryColor;
-    let secondaryColor;
-    if (amount >= 0) {
-        primaryColor = rgb(color2);
-        secondaryColor = rgb(color1);
-    }
-    else {
-        primaryColor = rgb(color1);
-        secondaryColor = rgb(color2);
-    }
-    // when background color is dark -> mix if dominant color is brighter than secondary color
-    let mixRedComponent = primaryColor.r > secondaryColor.r;
-    let mixGreenComponent = primaryColor.g > secondaryColor.g;
-    let mixBlueComponent = primaryColor.b > secondaryColor.b;
-    // when background color is light -> mix if dominant color is darker than secondary color
-    if (isLight(color(backgroundColor))) {
-        mixRedComponent = !mixRedComponent;
-        mixGreenComponent = !mixGreenComponent;
-        mixBlueComponent = !mixBlueComponent;
-    }
-    const factor = 1 - Math.abs(amount);
-    const red = mixRedComponent ? Math.round(interpolate(primaryColor.r, secondaryColor.r)(factor)) : primaryColor.r;
-    const green = mixGreenComponent ? Math.round(interpolate(primaryColor.g, secondaryColor.g)(factor)) : primaryColor.g;
-    const blue = mixBlueComponent ? Math.round(interpolate(primaryColor.b, secondaryColor.b)(factor)) : primaryColor.b;
-    return ((_a = color(`rgb(${red}, ${green}, ${blue})`)) === null || _a === void 0 ? void 0 : _a.toString()) || '';
-};
-export { blend, brighten, darken, isLight, interpolate };

package/lib/heatmap/helpers/text.d.ts

@@ -1,26 +0,0 @@
-import type { HeatmapCell } from './types';
-declare const MIN_FONT_SIZE = 10;
-declare const MAX_FONT_SIZE = 16;
-/**
- * Calculate responsive font size according to the screen width
- * @param ratio font ratio
- * @param cellHeight cell's height
- * @param cellWidth cell's width
- * @returns font size
- */
-declare const getResponsiveFontSize: (ratio: number, cellHeight: number, cellWidth: number) => number;
-/**
- * Get maximum text width out of all the cell by sampling
- * @param ctx canvas context
- * @param cells list of cells
- * @param hasCellHeader if header property is present in the cell
- * @returns label width measured in canvas
- */
-declare const getMaximumTextWidth: (ctx: CanvasRenderingContext2D, cells: HeatmapCell[], hasCellHeader: boolean) => number;
-/**
- * Calculate max length text for render Axis size
- * @param labels array string text for calculate
- * @returns max length text
- */
-declare const getMaximumLabelTextWidth: (labels: string[]) => string;
-export { getResponsiveFontSize, getMaximumTextWidth, getMaximumLabelTextWidth, MIN_FONT_SIZE, MAX_FONT_SIZE };

package/lib/heatmap/helpers/text.js

@@ -1,91 +0,0 @@
-const MIN_FONT_SIZE = 10;
-const MAX_FONT_SIZE = 16;
-/**
- * Calculate responsive font size according to the screen width
- * @param ratio font ratio
- * @param cellHeight cell's height
- * @param cellWidth cell's width
- * @returns font size
- */
-const getResponsiveFontSize = (ratio, cellHeight, cellWidth) => {
-    let fontSize = Math.round(Math.min(cellHeight, cellWidth) * ratio);
-    if (fontSize < MIN_FONT_SIZE) {
-        fontSize = MIN_FONT_SIZE;
-    }
-    else if (fontSize > MAX_FONT_SIZE) {
-        fontSize = MAX_FONT_SIZE;
-    }
-    return fontSize;
-};
-/**
- * Get maximum text width out of all the cell by sampling
- * @param ctx canvas context
- * @param cells list of cells
- * @param hasCellHeader if header property is present in the cell
- * @returns label width measured in canvas
- */
-const getMaximumTextWidth = (ctx, cells, hasCellHeader) => {
-    let maxHeaderLength = 0;
-    let maxLabelLength = 0;
-    const SAMPLE_AMOUNT = 5;
-    for (let i = 0; i < cells.length; i++) {
-        const header = cells[i].header || '';
-        const label = cells[i].customLabel || cells[i].label || '';
-        if (label.length > maxLabelLength) {
-            maxLabelLength = label.length;
-        }
-        if (header && header.length > maxHeaderLength) {
-            maxHeaderLength = header.length;
-        }
-    }
-    const textSamples = [];
-    const labelMap = {};
-    const headerMap = {};
-    for (let i = 0; i < cells.length; i++) {
-        const header = cells[i].header || '';
-        const label = cells[i].customLabel || cells[i].label || '';
-        const headerLength = header.length;
-        const labelLength = label.length;
-        if (labelLength >= maxLabelLength - 1) {
-            // Count number of times per label length
-            labelMap[labelLength] = labelMap[labelLength] ? labelMap[labelLength] + 1 : 1;
-            if (labelMap[labelLength] < SAMPLE_AMOUNT) {
-                textSamples.push(label);
-            }
-        }
-        if (hasCellHeader && headerLength >= maxHeaderLength - 1) {
-            // Count number of times per header length
-            headerMap[headerLength] = headerMap[headerLength] ? headerMap[headerLength] + 1 : 1;
-            if (headerMap[headerLength] < SAMPLE_AMOUNT) {
-                textSamples.push(header);
-            }
-        }
-    }
-    // Find maximum label width
-    let maxTextWidth = 0;
-    for (let i = 0; i < textSamples.length; i++) {
-        const textWidth = ctx.measureText(textSamples[i]).width;
-        if (textWidth > maxTextWidth) {
-            maxTextWidth = textWidth;
-        }
-    }
-    return maxTextWidth;
-};
-/**
- * Calculate max length text for render Axis size
- * @param labels array string text for calculate
- * @returns max length text
- */
-const getMaximumLabelTextWidth = (labels) => {
-    let maxLengthText = '';
-    for (let i = 0; i < labels.length; i++) {
-        if (maxLengthText.length >= labels[i].length) {
-            maxLengthText = maxLengthText;
-        }
-        else {
-            maxLengthText = labels[i];
-        }
-    }
-    return maxLengthText;
-};
-export { getResponsiveFontSize, getMaximumTextWidth, getMaximumLabelTextWidth, MIN_FONT_SIZE, MAX_FONT_SIZE };

package/lib/heatmap/helpers/track.d.ts

@@ -1,102 +0,0 @@
-/**
- * Utility class use for calculating :
- *
- * Track - the whole container
- * Lane - each blocks inside the track
- * Content - content that lies inside the lane
- */
-export declare class Track {
-    private _laneSizes;
-    private _laneStarts;
-    private _trackSize;
-    private _margin;
-    /**
-     * Get track size
-     * @returns track size
-     */
-    get trackSize(): number;
-    /**
-     * Sets track size
-     * @param value number of track size
-     */
-    set trackSize(value: number);
-    /**
-     * Get lane count
-     * @returns lane count
-     */
-    get laneCount(): number;
-    /**
-     * Sets lane count
-     * @param value number of lane count
-     */
-    set laneCount(value: number);
-    /**
-     * Get margin
-     * @returns margin in pixel
-     */
-    get margin(): number;
-    /**
-     * Sets cells margin
-     * @param value number margin
-     */
-    set margin(value: number);
-    /**
-     * Initialise track
-     * @param trackSize track size
-     * @param laneCount lane count
-     * @returns {void}
-     */
-    init(trackSize: number, laneCount: number): void;
-    /**
-     * Get lane start
-     * @returns lane start position in pixel
-     */
-    get laneStarts(): number[];
-    /**
-     * Get lane size
-     * @returns lane size in pixel
-     */
-    get laneSizes(): number[];
-    /**
-     * Get lane size
-     * @param index of lane Array
-     * @returns lane start position in pixel
-     */
-    private getLaneSize;
-    /**
-     * Get lane start position
-     * @param index of lane Array
-     * @returns lane start position in pixel
-     */
-    private getLaneStart;
-    /**
-     * Get lane end position
-     * @param index of lane Array
-     * @returns lane end position in pixel
-     */
-    private getLaneEnd;
-    /**
-     * Get content size
-     * @param index of lane Array
-     * @returns content size in pixel
-     */
-    getContentSize(index: number): number;
-    /**
-     * Get content start position
-     * @param index of lane Array
-     * @returns content position in pixel
-     */
-    getContentStart(index: number): number;
-    /**
-     * Get content end position
-     * @param index of lane Array
-     * @returns content position in pixel
-     */
-    getContentEnd(index: number): number;
-    /**
-     * Finds lane's index using the mouse position in pixel
-     * @param mousePixel current mouse position in pixel
-     * @returns index of the lane
-     */
-    hitTest(mousePixel: number): number;
-}