@refinitiv-ui/elements 6.9.0-next.0 → 6.9.0

package/lib/icon/index.d.ts

@@ -1,7 +1,7 @@
 import { JSXInterface } from '../jsx';
-import { BasicElement, CSSResultGroup, TemplateResult, PropertyValues } from '@refinitiv-ui/core';
+import { BasicElement, CSSResultGroup, PropertyValues, TemplateResult } from '@refinitiv-ui/core';
+import type { Config } from '../configuration/index.js';
 export { preload } from './utils/IconLoader.js';
-import { type Config } from '../config/index.js';
 export declare class Icon extends BasicElement {
     /**
      * Element version number
@@ -9,7 +9,7 @@ export declare class Icon extends BasicElement {
      */
     static get version(): string;
     /**
-     * Icon map from ef-config
+     * Icon map from ef-configuration
      * @ignore
      */
     config?: Config;
@@ -28,14 +28,24 @@ export declare class Icon extends BasicElement {
      */
     get icon(): string | null;
     set icon(value: string | null);
+    /**
+     * Deprecation notice displays a warning message
+     * when deprecated features are used.
+     */
+    private deprecationNotice;
     private _src;
     /**
      * Src location of an svg icon.
      * @example https://cdn.io/icons/heart.svg
-     * @deprecated Use `icon` instead
+     * @ignore
      * @default null
      */
     get src(): string | null;
+    /**
+     * @param value - location of an svg icon.
+     * @ignore
+     * @default null
+     */
     set src(value: string | null);
     private _template;
     /**
@@ -44,8 +54,8 @@ export declare class Icon extends BasicElement {
     private get template();
     private set template(value);
     /**
-     * Check if the autosuggest has content
-     * @returns content exists
+     * Check if the icon map configuration has content
+     * @returns icon map if exists
      */
     private get iconMap();
     /**

package/lib/icon/index.js

@@ -1,13 +1,13 @@
 import { __decorate } from "tslib";
-import { BasicElement, svg, css } from '@refinitiv-ui/core';
+import { consume } from '@lit-labs/context';
+import { BasicElement, DeprecationNotice, css, svg } from '@refinitiv-ui/core';
 import { customElement } from '@refinitiv-ui/core/decorators/custom-element.js';
 import { property } from '@refinitiv-ui/core/decorators/property.js';
 import { unsafeSVG } from '@refinitiv-ui/core/directives/unsafe-svg.js';
+import { efConfig } from '../configuration/index.js';
 import { VERSION } from '../version.js';
 import { IconLoader } from './utils/IconLoader.js';
 export { preload } from './utils/IconLoader.js';
-import { consume } from '@lit-labs/context';
-import { efConfig } from '../config/index.js';
 const EmptyTemplate = svg ``;
 /**
  * Cache for reusing SVG template results across multiple icons.
@@ -19,6 +19,11 @@ let Icon = class Icon extends BasicElement {
     constructor() {
         super(...arguments);
         this._icon = null;
+        /**
+         * Deprecation notice displays a warning message
+         * when deprecated features are used.
+         */
+        this.deprecationNotice = new DeprecationNotice('`src` attribute and property are deprecated. Use `icon` for attribute and property instead.');
         this._src = null;
         this._template = EmptyTemplate;
     }
@@ -68,12 +73,17 @@ let Icon = class Icon extends BasicElement {
     /**
      * Src location of an svg icon.
      * @example https://cdn.io/icons/heart.svg
-     * @deprecated Use `icon` instead
+     * @ignore
      * @default null
      */
     get src() {
         return this._src;
     }
+    /**
+     * @param value - location of an svg icon.
+     * @ignore
+     * @default null
+     */
     set src(value) {
         if (this.src !== value) {
             this._src = value;
@@ -85,6 +95,9 @@ let Icon = class Icon extends BasicElement {
                 void this.loadAndRenderIcon(value);
             }
         }
+        if (value && !this.icon) {
+            this.deprecationNotice.once();
+        }
     }
     /**
      * The icon template to render
@@ -99,11 +112,11 @@ let Icon = class Icon extends BasicElement {
         }
     }
     /**
-     * Check if the autosuggest has content
-     * @returns content exists
+     * Check if the icon map configuration has content
+     * @returns icon map if exists
      */
     get iconMap() {
-        return this.icon && this.config?.icon.map[this.icon] || null;
+        return (this.icon && this.config?.icon.map[this.icon]) || null;
     }
     /**
      * Called after the component is first rendered
@@ -134,8 +147,7 @@ let Icon = class Icon extends BasicElement {
     async loadAndRenderIcon(src) {
         const iconTemplateCacheItem = iconTemplateCache.get(src);
         if (!iconTemplateCacheItem) {
-            iconTemplateCache.set(src, IconLoader.loadSVG(src)
-                .then(body => svg `${unsafeSVG(body)}`));
+            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;
@@ -148,8 +160,7 @@ let Icon = class Icon extends BasicElement {
      */
     setPrefix() {
         if (!IconLoader.isPrefixSet) {
-            const CDNPrefix = this.getComputedVariable('--cdn-prefix')
-                .replace(/^('|")|('|")$/g, '');
+            const CDNPrefix = this.getComputedVariable('--cdn-prefix').replace(/^('|")|('|")$/g, '');
             IconLoader.setCdnPrefix(CDNPrefix);
         }
     }

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

@@ -1,2 +1 @@
-
 dispatchEvent(new CustomEvent('ef.customStyles.define', { detail: { name: 'ef-icon', styles: ':host{--cdn-prefix:\'https://cdn.refinitiv.net/public/libs/elf/assets/elf-theme-halo/resources/icons/\';--cdn-prefix:\'https://cdn.refinitiv.net/public/libs/elf/assets/elf-theme-halo/resources/icons/\';font-size:16px}:host svg{pointer-events:none}:host circle[fill]:not([fill=none]),:host ellipse[fill]:not([fill=none]),:host g[fill]:not([fill=none]),:host line[fill]:not([fill=none]),:host path[fill]:not([fill=none]),:host polygon[fill]:not([fill=none]),:host polyline[fill]:not([fill=none]),:host rect[fill]:not([fill=none]){fill:currentColor}:host circle[stroke]:not([stroke=none]),:host ellipse[stroke]:not([stroke=none]),:host g[stroke]:not([stroke=none]),:host line[stroke]:not([stroke=none]),:host path[stroke]:not([stroke=none]),:host polygon[stroke]:not([stroke=none]),:host polyline[stroke]:not([stroke=none]),:host rect[stroke]:not([stroke=none]){stroke:currentColor}:host([icon=powerpoint]){color:#ff3535}:host([icon=excel]){color:#00a626}:host([icon=pdf]){color:#ff3535}:host([icon=word]){color:#0094c4}:host([icon=twitter]){color:#1da1f2}:host([focused=visible]){outline:#334bff solid 1px}:host([icon]) circle,:host([icon]) ellipse,:host([icon]) g,:host([icon]) line,:host([icon]) path,:host([icon]) polygon,:host([icon]) polyline,:host([icon]) rect{vector-effect:non-scaling-stroke}@media all and (-ms-high-contrast:none),(-ms-high-contrast:active){:host([icon]) circle,:host([icon]) ellipse,:host([icon]) g,:host([icon]) line,:host([icon]) path,:host([icon]) polygon,:host([icon]) polyline,:host([icon]) rect{vector-effect:none;stroke-width:calc(16px/.01em)}}' }}));

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

@@ -1,2 +1 @@
-
 dispatchEvent(new CustomEvent('ef.customStyles.define', { detail: { name: 'ef-icon', styles: ':host{--cdn-prefix:\'https://cdn.refinitiv.net/public/libs/elf/assets/elf-theme-halo/resources/icons/\';--cdn-prefix:\'https://cdn.refinitiv.net/public/libs/elf/assets/elf-theme-halo/resources/icons/\';font-size:16px}:host svg{pointer-events:none}:host circle[fill]:not([fill=none]),:host ellipse[fill]:not([fill=none]),:host g[fill]:not([fill=none]),:host line[fill]:not([fill=none]),:host path[fill]:not([fill=none]),:host polygon[fill]:not([fill=none]),:host polyline[fill]:not([fill=none]),:host rect[fill]:not([fill=none]){fill:currentColor}:host circle[stroke]:not([stroke=none]),:host ellipse[stroke]:not([stroke=none]),:host g[stroke]:not([stroke=none]),:host line[stroke]:not([stroke=none]),:host path[stroke]:not([stroke=none]),:host polygon[stroke]:not([stroke=none]),:host polyline[stroke]:not([stroke=none]),:host rect[stroke]:not([stroke=none]){stroke:currentColor}:host([icon=powerpoint]){color:#ff3535}:host([icon=excel]){color:#00a626}:host([icon=pdf]){color:#ff3535}:host([icon=word]){color:#0094c4}:host([icon=twitter]){color:#1da1f2}:host([focused=visible]){outline:#334bff solid 1px}:host([icon]) circle,:host([icon]) ellipse,:host([icon]) g,:host([icon]) line,:host([icon]) path,:host([icon]) polygon,:host([icon]) polyline,:host([icon]) rect{vector-effect:non-scaling-stroke}@media all and (-ms-high-contrast:none),(-ms-high-contrast:active){:host([icon]) circle,:host([icon]) ellipse,:host([icon]) g,:host([icon]) line,:host([icon]) path,:host([icon]) polygon,:host([icon]) polyline,:host([icon]) rect{vector-effect:none;stroke-width:calc(16px/.01em)}}' }}));

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

@@ -1,2 +1 @@
-
 dispatchEvent(new CustomEvent('ef.customStyles.define', { detail: { name: 'ef-icon', styles: ':host{--cdn-prefix:\'https://cdn.refinitiv.net/public/libs/elf/assets/elf-theme-halo/resources/icons/\';--cdn-prefix:\'https://cdn.refinitiv.net/public/libs/elf/assets/elf-theme-solar/resources/icons/\'}:host svg{pointer-events:none}:host circle[fill]:not([fill=none]),:host ellipse[fill]:not([fill=none]),:host g[fill]:not([fill=none]),:host line[fill]:not([fill=none]),:host path[fill]:not([fill=none]),:host polygon[fill]:not([fill=none]),:host polyline[fill]:not([fill=none]),:host rect[fill]:not([fill=none]){fill:currentColor}:host circle[stroke]:not([stroke=none]),:host ellipse[stroke]:not([stroke=none]),:host g[stroke]:not([stroke=none]),:host line[stroke]:not([stroke=none]),:host path[stroke]:not([stroke=none]),:host polygon[stroke]:not([stroke=none]),:host polyline[stroke]:not([stroke=none]),:host rect[stroke]:not([stroke=none]){stroke:currentColor}:host([icon=powerpoint]){color:#ff3535}:host([icon=excel]){color:#00a626}:host([icon=pdf]){color:#ff3535}:host([icon=word]){color:#0094c4}:host([icon=twitter]){color:#1da1f2}:host([focused=visible]){outline:#f93 solid 1px}' }}));

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

@@ -1,2 +1 @@
-
 dispatchEvent(new CustomEvent('ef.customStyles.define', { detail: { name: 'ef-icon', styles: ':host{--cdn-prefix:\'https://cdn.refinitiv.net/public/libs/elf/assets/elf-theme-halo/resources/icons/\';--cdn-prefix:\'https://cdn.refinitiv.net/public/libs/elf/assets/elf-theme-solar/resources/icons/\'}:host svg{pointer-events:none}:host circle[fill]:not([fill=none]),:host ellipse[fill]:not([fill=none]),:host g[fill]:not([fill=none]),:host line[fill]:not([fill=none]),:host path[fill]:not([fill=none]),:host polygon[fill]:not([fill=none]),:host polyline[fill]:not([fill=none]),:host rect[fill]:not([fill=none]){fill:currentColor}:host circle[stroke]:not([stroke=none]),:host ellipse[stroke]:not([stroke=none]),:host g[stroke]:not([stroke=none]),:host line[stroke]:not([stroke=none]),:host path[stroke]:not([stroke=none]),:host polygon[stroke]:not([stroke=none]),:host polyline[stroke]:not([stroke=none]),:host rect[stroke]:not([stroke=none]){stroke:currentColor}:host([icon=powerpoint]){color:#ff3535}:host([icon=excel]){color:#00a626}:host([icon=pdf]){color:#ff3535}:host([icon=word]){color:#0094c4}:host([icon=twitter]){color:#1da1f2}:host([focused=visible]){outline:#ffb266 solid 1px}' }}));

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

@@ -8,6 +8,7 @@ declare class IconLoader extends SVGLoader {
 declare const iconLoaderInstance: IconLoader;
 export { iconLoaderInstance as IconLoader };
 /**
+ * @deprecated Icon `preload()` is deprecated.
  * Helper function to preload set of icons.
  * It could help to reduce icon loading delay when ef-icon has a known set of icons that it can use.
  * @param attrs - list of arguments, representing icons.

package/lib/icon/utils/IconLoader.js

@@ -1,3 +1,4 @@
+import { DeprecationNotice } from '@refinitiv-ui/core';
 import { SVGLoader } from '@refinitiv-ui/utils/loader.js';
 /**
  * Caches and provides icon SVGs, Loaded either by name from CDN or directly by URL.
@@ -8,6 +9,12 @@ class IconLoader extends SVGLoader {
 const iconLoaderInstance = new IconLoader();
 export { iconLoaderInstance as IconLoader };
 /**
+ * Deprecation notice displays a warning message
+ * when deprecated features are used.
+ */
+const deprecationNotice = new DeprecationNotice('Icon `preload()` is deprecated.');
+/**
+ * @deprecated Icon `preload()` is deprecated.
  * Helper function to preload set of icons.
  * It could help to reduce icon loading delay when ef-icon has a known set of icons that it can use.
  * @param attrs - list of arguments, representing icons.
@@ -15,5 +22,6 @@ export { iconLoaderInstance as IconLoader };
  * @returns Array of promises, which will be resolved with SVG bodies.
  */
 export const preload = (...attrs) => {
-    return attrs.map(icon => iconLoaderInstance.loadSVG(icon));
+    deprecationNotice.once();
+    return attrs.map((icon) => iconLoaderInstance.loadSVG(icon));
 };

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

@@ -56,6 +56,11 @@
           "description": "Set legend style i.e. `horizontal`, `vertical`.",
           "type": "\"vertical\" | \"horizontal\"",
           "default": "\"vertical\""
+        },
+        {
+          "name": "chart",
+          "description": "lightweight-charts object",
+          "type": "IChartApi | null"
         }
       ],
       "events": [

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

@@ -7,6 +7,7 @@ By lightweight-charts library.
 
 | Property             | Attribute              | Type                         | Default    | Description                                     |
 |----------------------|------------------------|------------------------------|------------|-------------------------------------------------|
+| `chart`              |                        | `IChartApi \| null`          | null       | lightweight-charts object                       |
 | `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                                     |

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

@@ -1,5 +1,5 @@
-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/color.js';
+import type { HSLColor, RGBColor } from '@refinitiv-ui/utils/color.js';
+import type { AreaSeriesPartialOptions, AreaStyleOptions, BarData, BarSeriesPartialOptions, BarStyleOptions, CandlestickSeriesPartialOptions, CandlestickStyleOptions, ChartOptions, DeepPartial, HistogramData, HistogramSeriesPartialOptions, HistogramStyleOptions, ISeriesApi, LineData, LineSeriesPartialOptions, LineStyleOptions, SeriesPartialOptions, SeriesType } from 'lightweight-charts';
 type SeriesOptions = AreaSeriesPartialOptions | BarSeriesPartialOptions | CandlestickSeriesPartialOptions | HistogramSeriesPartialOptions | LineSeriesPartialOptions;
 type SeriesStyleOptions = LineStyleOptions & AreaStyleOptions & BarStyleOptions & CandlestickStyleOptions & HistogramStyleOptions;
 type SeriesData = LineData[] | BarData[] | HistogramData[];
@@ -43,4 +43,4 @@ interface InteractiveChartSeries {
     data: SeriesData;
     seriesOptions?: SeriesPartialOptions<SeriesOptions>;
 }
-export { InteractiveChartConfig, InteractiveChartSeries, Time, Theme, RowLegend, SeriesList, SeriesDataItem, SeriesStyleOptions, ColorToStringFunction, LegendStyle };
+export { InteractiveChartConfig, InteractiveChartSeries, Time, Theme, RowLegend, SeriesList, SeriesData, SeriesDataItem, SeriesOptions, SeriesStyleOptions, ColorToStringFunction, LegendStyle };

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

@@ -1,10 +1,10 @@
 import { JSXInterface } from '../jsx';
-import { ResponsiveElement, TemplateResult, CSSResultGroup, PropertyValues, ElementSize } from '@refinitiv-ui/core';
 import { IChartApi, MouseEventParams } from 'lightweight-charts';
+import { CSSResultGroup, ElementSize, PropertyValues, ResponsiveElement, TemplateResult } from '@refinitiv-ui/core';
 import '../tooltip/index.js';
-import type { InteractiveChartConfig, InteractiveChartSeries, RowLegend, SeriesList, SeriesDataItem } from './helpers/types';
 import { LegendStyle } from './helpers/types.js';
-export type { InteractiveChartConfig, InteractiveChartSeries, LegendStyle };
+import type { InteractiveChartConfig, InteractiveChartSeries, RowLegend, SeriesData, SeriesDataItem, SeriesList, SeriesOptions, SeriesStyleOptions, Theme, Time } from './helpers/types.js';
+export type { InteractiveChartConfig, InteractiveChartSeries, Time, Theme, RowLegend, SeriesList, SeriesData, SeriesDataItem, SeriesOptions, SeriesStyleOptions, LegendStyle };
 /**
  * A charting component that allows you to create several use cases of financial chart.
  * By lightweight-charts library.
@@ -26,7 +26,7 @@ export declare class InteractiveChart extends ResponsiveElement {
     /**
      * Chart configurations for init chart
      * @type {InteractiveChartConfig}
-    */
+     */
     config: InteractiveChartConfig | null;
     /**
      * Hide legend
@@ -37,10 +37,10 @@ export declare class InteractiveChart extends ResponsiveElement {
      */
     disabledJumpButton: boolean;
     /**
-    * @deprecated `legendstyle` attribute is deprecated, use `legend-style` instead.
-    * @ignore
-    * 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`.
@@ -51,19 +51,23 @@ export declare class InteractiveChart extends ResponsiveElement {
     set legendStyle(value: LegendStyle);
     get legendStyle(): LegendStyle;
     /**
-     * Deprecation noticed, used to display a warning message
+     * Deprecation notice displays a warning message
      * when deprecated features are used.
-    */
+     */
     private deprecationNotice;
     /**
      * @ignore
      * Array of series instances in chart
      */
     seriesList: SeriesList[];
+    /**
+     * lightweight-charts object
+     * @type {IChartApi | null}
+     */
+    chart: IChartApi | null;
     private jumpButtonInitialized;
     private legendInitialized;
     private isCrosshairVisible;
-    protected chart: IChartApi | null;
     protected rowLegend: RowLegend;
     private timeScale;
     private width;
@@ -107,9 +111,9 @@ export declare class InteractiveChart extends ResponsiveElement {
      */
     resizedCallback(size: ElementSize): void;
     /**
-    * Legend value observer
-    * @returns {void}
-    */
+     * Legend value observer
+     * @returns {void}
+     */
     private onLegendChange;
     /**
      * Legend style observer
@@ -119,9 +123,9 @@ export declare class InteractiveChart extends ResponsiveElement {
      */
     private onLegendStyleChange;
     /**
-    * Jump last value observer
-    * @returns {void}
-    */
+     * Jump last value observer
+     * @returns {void}
+     */
     private onJumpButtonChange;
     /**
      * update width and height of chart
@@ -190,15 +194,15 @@ export declare class InteractiveChart extends ResponsiveElement {
      */
     private convertColorToString;
     /**
-    * Create data configuration from theme
-    * @returns {void}
-    */
+     * Create data configuration from theme
+     * @returns {void}
+     */
     private createSeriesOptions;
     /**
-    * Apply Theme to chart
-    * @param config value config
-    * @returns {void}
-    */
+     * Apply Theme to chart
+     * @param config value config
+     * @returns {void}
+     */
     private applyTheme;
     /**
      * Apply text color legend from chart options
@@ -264,13 +268,13 @@ export declare class InteractiveChart extends ResponsiveElement {
      */
     private createSpanOHLC;
     /**
-    * Create text used by several series types such as bars or candlesticks
-    * @param rowLegend Legend element
-    * @param rowData Value of series
-    * @param priceColor color of series
-    * @param index Series index
-    * @returns {void}
-    */
+     * Create text used by several series types such as bars or candlesticks
+     * @param rowLegend Legend element
+     * @param rowData Value of series
+     * @param priceColor color of series
+     * @param index Series index
+     * @returns {void}
+     */
     private createTextOHLC;
     /**
      * Create text price used by several series types
@@ -346,11 +350,11 @@ export declare class InteractiveChart extends ResponsiveElement {
      */
     colors(): string[];
     /**
-    * A `CSSResultGroup` that will be used
-    * to style the host, slotted children
-    * and the internal template of the element.
-    * @return CSS template
-    */
+     * 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