@refinitiv-ui/elements 5.0.0-beta.3 → 5.0.0-dev.204

package/lib/icon/index.js

@@ -1,13 +1,18 @@
-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 { BasicElement, svg, css, customElement, property, unsafeHTML } from '@refinitiv-ui/core';
-import { IconLoader } from './utils/IconLoader';
-export { preload } from './utils/IconLoader';
+import { __decorate } from "tslib";
+import { BasicElement, svg, 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 { unsafeSVG } from '@refinitiv-ui/core/lib/directives/unsafe-svg.js';
+import { VERSION } from '../version.js';
+import { IconLoader } from './utils/IconLoader.js';
+export { preload } from './utils/IconLoader.js';
 const EmptyTemplate = svg ``;
+/**
+ * Cache for reusing SVG template results across multiple icons.
+ * Reusing these templates increases performance dramatically when many icons are rendered.
+ * As the cache key is an absolute URL, we can assume no clashes will occur.
+ */
+const iconTemplateCache = new Map();
 let Icon = class Icon extends BasicElement {
     constructor() {
         super(...arguments);
@@ -16,7 +21,14 @@ let Icon = class Icon extends BasicElement {
         this._template = EmptyTemplate;
     }
     /**
-     * A `CSSResult` that will be used
+     * 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
@@ -25,6 +37,7 @@ let Icon = class Icon extends BasicElement {
         return css `
       :host {
         display: inline-block;
+        line-height: 1;
         width: 1em;
         height: 1em;
       }
@@ -35,8 +48,9 @@ let Icon = class Icon extends BasicElement {
     `;
     }
     /**
-     * Name of a known icon to render.
-     * @example heart
+     * Name of a known icon to render or URL of SVG icon.
+     * @example heart | https://cdn.io/icons/heart.svg
+     * @default null
      */
     get icon() {
         return this._icon;
@@ -46,12 +60,14 @@ let Icon = class Icon extends BasicElement {
         if (oldValue !== value) {
             this._icon = value;
             void this.setIconSrc();
-            void this.requestUpdate('icon', oldValue);
+            this.requestUpdate('icon', oldValue);
         }
     }
     /**
      * Src location of an svg icon.
      * @example https://cdn.io/icons/heart.svg
+     * @deprecated Use `icon` instead
+     * @default null
      */
     get src() {
         return this._src;
@@ -74,7 +90,7 @@ let Icon = class Icon extends BasicElement {
     set template(value) {
         if (this._template !== value) {
             this._template = value;
-            void this.requestUpdate();
+            this.requestUpdate();
         }
     }
     /**
@@ -104,10 +120,13 @@ let Icon = class Icon extends BasicElement {
      * @returns {void}
      */
     async loadAndRenderIcon(src) {
-        const svgBody = await IconLoader.loadSVG(src);
-        if (svgBody) {
-            this.template = svg `${unsafeHTML(svgBody)}`;
+        const iconTemplateCacheItem = iconTemplateCache.get(src);
+        if (!iconTemplateCacheItem) {
+            iconTemplateCache.set(src, IconLoader.loadSVG(src)
+                .then(body => svg `${unsafeSVG(body)}`));
+            return this.loadAndRenderIcon(src); // Load again and await cache result
         }
+        this.template = await iconTemplateCacheItem;
     }
     /**
      * Get and cache CDN prefix
@@ -150,4 +169,3 @@ Icon = __decorate([
     })
 ], Icon);
 export { Icon };
-//# sourceMappingURL=index.js.map

package/lib/icon/utils/IconLoader.d.ts

@@ -1,4 +1,4 @@
-import { CdnLoader } from '@refinitiv-ui/utils';
+import { CdnLoader } from '@refinitiv-ui/utils/lib/loader.js';
 /**
  * Caches and provides icon SVGs, Loaded either by name from CDN or directly by URL.
  * Uses singleton pattern
@@ -33,6 +33,11 @@ declare class IconLoader extends CdnLoader {
      * @returns Promise, which will be resolved with complete source.
      */
     getSrc(iconName: string): Promise<string>;
+    /**
+     * Loads icon and returns the body of the SVG
+     * @param icon Icon name to load
+     * @returns SVG body of the response
+     */
     loadSVG(icon: string): Promise<string | undefined>;
 }
 declare const iconLoaderInstance: IconLoader;

package/lib/icon/utils/IconLoader.js

@@ -1,5 +1,5 @@
-import { CdnLoader, Deferred } from '@refinitiv-ui/utils';
-const isUrl = (str) => (/^https?:\/\//i).test(str);
+import { CdnLoader, Deferred } from '@refinitiv-ui/utils/lib/loader.js';
+const isUrl = (str) => (/^(https?:\/{2}|\.?\/)/i).test(str);
 /**
  * Caches and provides icon SVGs, Loaded either by name from CDN or directly by URL.
  * Uses singleton pattern
@@ -50,26 +50,33 @@ class IconLoader extends CdnLoader {
      * @returns Promise, which will be resolved with complete source.
      */
     async getSrc(iconName) {
+        if (isUrl(iconName)) {
+            return iconName;
+        }
         return iconName ? `${await this.getCdnPrefix()}${iconName}.svg` : '';
     }
+    /**
+     * Loads icon and returns the body of the SVG
+     * @param icon Icon name to load
+     * @returns SVG body of the response
+     */
     async loadSVG(icon) {
-        if (icon) {
-            if (!isUrl(icon)) {
-                icon = await this.getSrc(icon);
-            }
-            const response = await this.load(icon);
-            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);
+        if (!icon) {
+            return;
+        }
+        icon = await this.getSrc(icon);
+        const response = await this.load(icon);
+        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('');
+            return container.innerHTML;
         }
+        return '';
     }
 }
 const iconLoaderInstance = new IconLoader();
@@ -84,4 +91,3 @@ export { iconLoaderInstance as IconLoader };
 export const preload = (...attrs) => {
     return attrs.map(icon => iconLoaderInstance.loadSVG(icon));
 };
-//# sourceMappingURL=IconLoader.js.map

package/lib/index.d.ts

@@ -1 +1,3 @@
+export { VERSION } from './version.js';
+export * from './events';
 export * from '@refinitiv-ui/core';

package/lib/index.js

@@ -1,2 +1,3 @@
+export { VERSION } from './version.js';
+export * from './events';
 export * from '@refinitiv-ui/core';
-//# sourceMappingURL=index.js.map

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

@@ -23,8 +23,8 @@
           "default": "false"
         },
         {
-          "name": "legendstyle",
-          "description": "Set legend style i.e. `horizontal`, `vertical`. Default is `vertical`.",
+          "name": "legend-style",
+          "description": "Set legend style i.e. `horizontal`, `vertical`.",
           "type": "\"vertical\" | \"horizontal\"",
           "default": "\"vertical\""
         }
@@ -52,22 +52,16 @@
         },
         {
           "name": "legendStyle",
-          "attribute": "legendstyle",
-          "description": "Set legend style i.e. `horizontal`, `vertical`. Default is `vertical`.",
+          "attribute": "legend-style",
+          "description": "Set legend style i.e. `horizontal`, `vertical`.",
           "type": "\"vertical\" | \"horizontal\"",
           "default": "\"vertical\""
-        },
-        {
-          "name": "seriesList",
-          "description": "Array of series instances in chart",
-          "type": "object",
-          "default": "[]"
         }
       ],
       "events": [
         {
           "name": "initialized",
-          "description": "Fired when chart initialized"
+          "description": "Dispatched when chart is initialized"
         }
       ],
       "slots": [

package/lib/interactive-chart/custom-elements.md

@@ -0,0 +1,31 @@
+# ef-interactive-chart
+
+A charting component that allows you to create several use cases of financial chart.
+By lightweight-charts library.
+
+## Properties
+
+| Property             | Attribute              | Type                         | Default    | Description                                     |
+|----------------------|------------------------|------------------------------|------------|-------------------------------------------------|
+| `config`             | `config`               | `InteractiveChartConfig`     | null       | Chart configurations for init chart             |
+| `disabledJumpButton` | `disabled-jump-button` | `boolean`                    | false      | Hide jump to latest data button                 |
+| `disabledLegend`     | `disabled-legend`      | `boolean`                    | false      | Hide legend                                     |
+| `legendStyle`        | `legend-style`         | `"vertical" \| "horizontal"` | "vertical" | Set legend style i.e. `horizontal`, `vertical`. |
+
+## Methods
+
+| Method   | Type         | Description                                    |
+|----------|--------------|------------------------------------------------|
+| `colors` | `(): object` | List of available chart colors from the theme. |
+
+## Events
+
+| Event         | Description                          |
+|---------------|--------------------------------------|
+| `initialized` | Dispatched when chart is initialized |
+
+## Slots
+
+| Name     | Description                                 |
+|----------|---------------------------------------------|
+| `legend` | Slot to use for implementing custom legend. |

package/lib/interactive-chart/helpers/merge.d.ts

@@ -0,0 +1,15 @@
+declare type UnknownObject = {
+    [key: string]: unknown;
+};
+declare type MergeObject = UnknownObject | Array<unknown>;
+/**
+ * Merge objects recursively
+ *
+ * @param {MergeObject} object The destination object.
+ * @param {MergeObject} sources The source objects.
+ * @param {boolean} force Force merge if a key of destination object is already exists and a value is not object
+ * @param {MergeObject[]} record The record object which record merged objects recursively
+ * @returns voids
+ */
+declare const merge: (object: MergeObject, sources: MergeObject, force?: boolean, record?: Array<unknown>) => void;
+export { merge, MergeObject };

package/lib/interactive-chart/helpers/merge.js

@@ -0,0 +1,28 @@
+/**
+ * Merge objects recursively
+ *
+ * @param {MergeObject} object The destination object.
+ * @param {MergeObject} sources The source objects.
+ * @param {boolean} force Force merge if a key of destination object is already exists and a value is not object
+ * @param {MergeObject[]} record The record object which record merged objects recursively
+ * @returns voids
+ */
+const merge = (object, sources, force = false, record = []) => {
+    let value;
+    let isObject;
+    Object.keys(sources).forEach((key, i) => {
+        // Get value and info from merging object
+        value = Array.isArray(sources) ? sources[i] : sources[key];
+        isObject = (value && typeof value === 'object' && value.toString() === '[object Object]');
+        // Merge if found a new key from source or has a force command
+        if (!(key in object) || (force && !isObject)) {
+            object[key] = value;
+        }
+        // Deep merge objects
+        if (isObject && !record.includes(value)) {
+            record.push(value);
+            merge(object[key], value, force, record);
+        }
+    });
+};
+export { merge };

package/lib/interactive-chart/helpers/types.d.ts

@@ -1,5 +1,5 @@
-import { LineData, BarData, HistogramData, DeepPartial, ChartOptions, SeriesPartialOptions, LineSeriesPartialOptions, AreaSeriesPartialOptions, BarSeriesPartialOptions, CandlestickSeriesPartialOptions, HistogramSeriesPartialOptions, LineStyleOptions, AreaStyleOptions, BarStyleOptions, CandlestickStyleOptions, HistogramStyleOptions, ISeriesApi, SeriesType } from 'lightweight-charts';
-import type { RGBColor, HSLColor } from '@refinitiv-ui/utils';
+import type { LineData, BarData, HistogramData, DeepPartial, ChartOptions, SeriesPartialOptions, LineSeriesPartialOptions, AreaSeriesPartialOptions, BarSeriesPartialOptions, CandlestickSeriesPartialOptions, HistogramSeriesPartialOptions, LineStyleOptions, AreaStyleOptions, BarStyleOptions, CandlestickStyleOptions, HistogramStyleOptions, ISeriesApi, SeriesType } from 'lightweight-charts';
+import type { RGBColor, HSLColor } from '@refinitiv-ui/utils/lib/color.js';
 declare type SeriesOptions = AreaSeriesPartialOptions | BarSeriesPartialOptions | CandlestickSeriesPartialOptions | HistogramSeriesPartialOptions | LineSeriesPartialOptions;
 declare type SeriesStyleOptions = LineStyleOptions & AreaStyleOptions & BarStyleOptions & CandlestickStyleOptions & HistogramStyleOptions;
 declare type SeriesData = LineData[] | BarData[] | HistogramData[];
@@ -7,9 +7,10 @@ declare type SeriesList = ISeriesApi<SeriesType>;
 declare type SeriesDataItem = BarData | LineData;
 declare type RowLegend = NodeListOf<Element> | HTMLElement | null;
 declare type ColorToStringFunction = (param: string, ...arg: (string | number | undefined)[]) => RGBColor | HSLColor | null;
-declare type MergeObject = {
-    [key: string]: any;
-};
+declare enum LegendStyle {
+    vertical = "vertical",
+    horizontal = "horizontal"
+}
 interface Time {
     day: number;
     month: number;
@@ -30,15 +31,15 @@ interface Theme {
     crossHairColor: string;
     chartUpColor: string;
     chartDownColor: string;
-    fillOpacity: number | undefined;
-    lineWidth: number | undefined;
+    fillOpacity?: number;
+    lineWidth?: number;
 }
 interface InteractiveChartSeries {
     type: string;
     symbol?: string;
     symbolName?: string;
-    legendPriceFormatter?: CallableFunction;
+    legendPriceFormatter?: (price: string | number) => string | number;
     data: SeriesData;
     seriesOptions?: SeriesPartialOptions<SeriesOptions>;
 }
-export { InteractiveChartConfig, InteractiveChartSeries, Time, Theme, RowLegend, SeriesList, SeriesDataItem, SeriesStyleOptions, ColorToStringFunction, MergeObject };
+export { InteractiveChartConfig, InteractiveChartSeries, Time, Theme, RowLegend, SeriesList, SeriesDataItem, SeriesStyleOptions, ColorToStringFunction, LegendStyle };

package/lib/interactive-chart/helpers/types.js

@@ -1,2 +1,6 @@
-export {};
-//# sourceMappingURL=types.js.map
+var LegendStyle;
+(function (LegendStyle) {
+    LegendStyle["vertical"] = "vertical";
+    LegendStyle["horizontal"] = "horizontal";
+})(LegendStyle || (LegendStyle = {}));
+export { LegendStyle };

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

@@ -1,19 +1,27 @@
 import { JSXInterface } from '../jsx';
-import { ResponsiveElement, TemplateResult, CSSResult, PropertyValues, ElementSize } from '@refinitiv-ui/core';
+import { ResponsiveElement, TemplateResult, CSSResultGroup, PropertyValues, ElementSize } from '@refinitiv-ui/core';
 import { IChartApi, MouseEventParams } from 'lightweight-charts';
-import '../tooltip';
+import '../tooltip/index.js';
 import type { InteractiveChartConfig, InteractiveChartSeries, RowLegend, SeriesList, SeriesDataItem } from './helpers/types';
-export { InteractiveChartConfig, InteractiveChartSeries };
+import { LegendStyle } from './helpers/types.js';
+export type { InteractiveChartConfig, InteractiveChartSeries, LegendStyle };
 /**
  * A charting component that allows you to create several use cases of financial chart.
  * By lightweight-charts library.
  * @slot legend - Slot to use for implementing custom legend.
+ * @fires initialized - Dispatched when chart is initialized
  */
 export declare class InteractiveChart extends ResponsiveElement {
+    /**
+     * Element version number
+     * @returns version number
+     */
+    static get version(): string;
     private static readonly CSS_COLOR_PREFIX;
     private static readonly DEFAULT_LINE_WIDTH;
     private static readonly DEFAULT_FILL_OPACITY;
     private static readonly LINE_STYLES;
+    private _legendStyle?;
     /**
      * Chart configurations for init chart
      * @type {InteractiveChartConfig}
@@ -28,10 +36,28 @@ export declare class InteractiveChart extends ResponsiveElement {
      */
     disabledJumpButton: boolean;
     /**
-     * Set legend style i.e. `horizontal`, `vertical`. Default is `vertical`.
+    * @deprecated `legendstyle` attribute is deprecated, use `legend-style` instead.
+    * @ignore
+    * Set legend style i.e. `horizontal`, `vertical`. Default is `vertical`.
+    **/
+    deprecatedLegendStyle: LegendStyle | undefined;
+    /**
+     * Set legend style i.e. `horizontal`, `vertical`.
+     * @param {LegendStyle} value legend style value
+     * @type {"vertical" | "horizontal"} type of legend style
+     * @default vertical
+     **/
+    set legendStyle(value: LegendStyle);
+    get legendStyle(): LegendStyle;
+    /**
+     * Deprecation noticed, used to display a warning message
+     * when deprecated features are used.
+    */
+    private deprecationNotice;
+    /**
+     * @ignore
+     * Array of series instances in chart
      */
-    legendStyle: 'vertical' | 'horizontal';
-    /** Array of series instances in chart */
     seriesList: SeriesList[];
     private jumpButtonInitialized;
     private legendInitialized;
@@ -328,21 +354,12 @@ export declare class InteractiveChart extends ResponsiveElement {
      */
     colors(): string[];
     /**
-     * Merges properties of one object into another.
-     * @param a Object to merge into
-     * @param b Object to merge from
-     * @param force Force apply the change
-     * @param record Record of objects, to check for circular references
-     * @returns {void}
-     */
-    private mergeObjects;
-    /**
-    * A `CSSResult` that will be used
+    * 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(): CSSResult | CSSResult[];
+    static get styles(): CSSResultGroup;
     /**
      * A `TemplateResult` that will be used
      * to render the updated internal template.
@@ -361,4 +378,6 @@ declare global {
       'ef-interactive-chart': Partial<InteractiveChart> | JSXInterface.HTMLAttributes<InteractiveChart>;
     }
   }
-}
+}
+
+export {};