@refinitiv-ui/elements 5.12.2 → 6.0.0-next.2

package/lib/heatmap/helpers/color.js

@@ -1,5 +1,5 @@
 /* istanbul ignore file */
-import { color, rgb, hsl } from '@refinitiv-ui/utils/lib/color.js';
+import { color, rgb, hsl } from '@refinitiv-ui/utils/color.js';
 import { interpolate } from 'd3-interpolate';
 /**
  * Check if the color is a light color
@@ -16,8 +16,7 @@ const isLight = (col) => {
  * @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()) || '';
+    return color(colorString)?.brighter(0.8).toString() || '';
 };
 /**
  * Darkens a color
@@ -38,7 +37,6 @@ const darken = (colorString) => {
  * @returns a new blended color
  */
 const blend = (color1, color2, backgroundColor, amount) => {
-    var _a;
     let primaryColor;
     let secondaryColor;
     if (amount >= 0) {
@@ -63,6 +61,6 @@ const blend = (color1, color2, backgroundColor, 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()) || '';
+    return color(`rgb(${red}, ${green}, ${blue})`)?.toString() || '';
 };
 export { blend, brighten, darken, isLight, interpolate };

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

@@ -17,10 +17,4 @@ declare const getResponsiveFontSize: (ratio: number, cellHeight: number, cellWid
  * @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 };
+export { getResponsiveFontSize, getMaximumTextWidth, MIN_FONT_SIZE, MAX_FONT_SIZE };

package/lib/heatmap/helpers/text.js

@@ -71,21 +71,4 @@ const getMaximumTextWidth = (ctx, cells, hasCellHeader) => {
     }
     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 };
+export { getResponsiveFontSize, getMaximumTextWidth, MIN_FONT_SIZE, MAX_FONT_SIZE };

package/lib/heatmap/index.d.ts

@@ -437,6 +437,11 @@ export declare class Heatmap extends ResponsiveElement {
      */
     protected render(): TemplateResult;
 }
+declare global {
+    interface HTMLElementTagNameMap {
+        'ef-heatmap': Heatmap;
+    }
+}
 
 declare global {
   interface HTMLElementTagNameMap {

package/lib/heatmap/index.js

@@ -1,16 +1,16 @@
 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 { query } from '@refinitiv-ui/core/lib/decorators/query.js';
+import { customElement } from '@refinitiv-ui/core/decorators/custom-element.js';
+import { property } from '@refinitiv-ui/core/decorators/property.js';
+import { query } from '@refinitiv-ui/core/decorators/query.js';
 import { VERSION } from '../version.js';
-import { MicroTaskRunner } from '@refinitiv-ui/utils/lib/async.js';
-import { color } from '@refinitiv-ui/utils/lib/color.js';
+import { MicroTaskRunner } from '@refinitiv-ui/utils/async.js';
+import { color } from '@refinitiv-ui/utils/color.js';
 import '../canvas/index.js';
 import '../tooltip/index.js';
 import { Track } from './helpers/track.js';
 import { blend, brighten, darken, isLight, interpolate } from './helpers/color.js';
-import { getResponsiveFontSize, getMaximumTextWidth, getMaximumLabelTextWidth, MIN_FONT_SIZE } from './helpers/text.js';
+import { getResponsiveFontSize, getMaximumTextWidth, MIN_FONT_SIZE } from './helpers/text.js';
 const MAX_CELL_WIDTH_RATIO = 0.85;
 const DEFAULT_CANVAS_RATIO = 0.75; // ratio — 4:3
 /**
@@ -235,8 +235,7 @@ let Heatmap = class Heatmap extends ResponsiveElement {
      * @returns array of row data
      */
     get rows() {
-        var _a;
-        return this.config && Array.isArray((_a = this.config) === null || _a === void 0 ? void 0 : _a.data) ? this.config.data : [];
+        return this.config && Array.isArray(this.config?.data) ? this.config.data : [];
     }
     /**
      * Get row count
@@ -250,9 +249,8 @@ let Heatmap = class Heatmap extends ResponsiveElement {
      * @returns count of columns
      */
     get columnCount() {
-        var _a;
         let result = 0;
-        (_a = this.rows) === null || _a === void 0 ? void 0 : _a.forEach(columns => {
+        this.rows?.forEach(columns => {
             if (columns.length > result) {
                 result = columns.length;
             }
@@ -393,11 +391,10 @@ let Heatmap = class Heatmap extends ResponsiveElement {
      */
     /* istanbul ignore next */
     updateTooltipOverlayPosition(cell) {
-        var _a, _b, _c;
         // Compensate x-axis height for overlay when x-axis is at top position
         let marginOverlayTop = 0;
-        if (((_a = this.config) === null || _a === void 0 ? void 0 : _a.xAxis) && ((_b = this.xAxis) === null || _b === void 0 ? void 0 : _b.offsetHeight)) {
-            marginOverlayTop = this.config.xAxis.position === 'bottom' ? 0 : (_c = this.xAxis) === null || _c === void 0 ? void 0 : _c.offsetHeight;
+        if (this.config?.xAxis && this.xAxis?.offsetHeight) {
+            marginOverlayTop = this.config.xAxis.position === 'bottom' ? 0 : this.xAxis?.offsetHeight;
         }
         // Update overlay position
         this.tooltipOverlay.style.left = `${cell.x}px`;
@@ -481,8 +478,7 @@ let Heatmap = class Heatmap extends ResponsiveElement {
      */
     /* istanbul ignore next */
     resetCell(cell) {
-        var _a;
-        (_a = this.canvasContext) === null || _a === void 0 ? void 0 : _a.clearRect(cell.x, cell.y, cell.width, cell.height);
+        this.canvasContext?.clearRect(cell.x, cell.y, cell.width, cell.height);
     }
     /**
      * Fades a cell's background from one color to another
@@ -525,14 +521,13 @@ let Heatmap = class Heatmap extends ResponsiveElement {
      * @returns {void}
      */
     calculateCellData() {
-        var _a, _b, _c;
         // Reset cell
         this.cells = [];
         if (!this.axisHidden) {
-            if (this.yAxis && ((_a = this.config) === null || _a === void 0 ? void 0 : _a.yAxis)) {
+            if (this.yAxis && this.config?.yAxis) {
                 this.rowTrack.init(this.yAxis.offsetHeight, this.rowCount);
             }
-            if (this.xAxis && ((_b = this.config) === null || _b === void 0 ? void 0 : _b.xAxis)) {
+            if (this.xAxis && this.config?.xAxis) {
                 this.colTrack.init(this.xAxis.offsetWidth, this.columnCount);
             }
         }
@@ -545,7 +540,7 @@ let Heatmap = class Heatmap extends ResponsiveElement {
                 const cellHeader = cell && cell.header ? cell.header : '';
                 const cellIndex = rowIndex * this.colTrack.laneCount + columnIndex;
                 const foregroundColor = this.foregroundColor;
-                const backgroundColor = ((_c = this.getBackgroundColor(cellValue)) === null || _c === void 0 ? void 0 : _c.toString()) || '';
+                const backgroundColor = this.getBackgroundColor(cellValue)?.toString() || '';
                 if (cellHeader) {
                     this.hasCellHeader = true;
                 }
@@ -821,8 +816,7 @@ let Heatmap = class Heatmap extends ResponsiveElement {
      * @returns {void}
      */
     paintAllCellBackground() {
-        var _a;
-        (_a = this.canvasContext) === null || _a === void 0 ? void 0 : _a.clearRect(0, 0, this.canvas.width, this.canvas.height);
+        this.canvasContext?.clearRect(0, 0, this.canvas.width, this.canvas.height);
         for (let index = 0; index < this.cells.length; index++) {
             this.paintCellBackground(this.cells[index]);
         }
@@ -843,11 +837,10 @@ let Heatmap = class Heatmap extends ResponsiveElement {
      * @returns {void}
      */
     renderAxisX() {
-        var _a;
         if (!this.isSizeCalculated) {
             return;
         }
-        const axisConfig = (_a = this.config) === null || _a === void 0 ? void 0 : _a.xAxis;
+        const axisConfig = this.config?.xAxis;
         if (!this.xAxis || !this.yAxisBox || !axisConfig) {
             return;
         }
@@ -909,11 +902,10 @@ let Heatmap = class Heatmap extends ResponsiveElement {
      * @returns {void}
      */
     renderAxisY() {
-        var _a, _b;
         if (!this.isSizeCalculated) {
             return;
         }
-        const axisConfig = (_a = this.config) === null || _a === void 0 ? void 0 : _a.yAxis;
+        const axisConfig = this.config?.yAxis;
         if (!this.yAxis || !axisConfig) {
             return;
         }
@@ -933,7 +925,8 @@ let Heatmap = class Heatmap extends ResponsiveElement {
             const element = document.createElement('div');
             element.className = 'y-axis-item';
             const span = document.createElement('span');
-            span.textContent = getMaximumLabelTextWidth(labels);
+            // Choose the longest label
+            span.textContent = labels.reduce((previousLabel, currentLabel) => previousLabel.length > currentLabel.length ? previousLabel : currentLabel);
             element.appendChild(span);
             element.style.margin = `${cellMargin}px`;
             const cellHeight = this.rowTrack.getContentSize(1);
@@ -979,7 +972,7 @@ let Heatmap = class Heatmap extends ResponsiveElement {
             }
             element.textContent = labels[i] || nbsp;
         }
-        if (this.xAxis && ((_b = this.config) === null || _b === void 0 ? void 0 : _b.xAxis)) {
+        if (this.xAxis && this.config?.xAxis) {
             // TODO: Wrong crossBox margin calculation when margin = 0.5px
             this.crossBox.style.margin = `${this.cellMargin}px`;
             this.crossBox.style.height = `${this.xAxis.children[0].offsetHeight}px`;
@@ -1015,16 +1008,15 @@ let Heatmap = class Heatmap extends ResponsiveElement {
      * @return Render template
      */
     render() {
-        var _a, _b;
         return html `
       <div id="container" @mousemove=${this.onMouseMove} @mouseleave=${this.onMouseLeave}>
-        ${((_a = this.config) === null || _a === void 0 ? void 0 : _a.yAxis) && !this.axisHidden ? html `
+        ${this.config?.yAxis && !this.axisHidden ? html `
         <div id="y-axis-container">
           <div part="cross-box"></div>
           <div part="y-axis"></div>
         </div>` : null}
         <div id="canvas-container">
-          ${((_b = this.config) === null || _b === void 0 ? void 0 : _b.xAxis) && !this.axisHidden ? html `<div part="x-axis"></div>` : null}
+          ${this.config?.xAxis && !this.axisHidden ? html `<div part="x-axis"></div>` : null}
           <ef-canvas part="canvas" @resize=${this.onCanvasResize}></ef-canvas>
           ${this.tooltipCallback ? html `<div id="tooltip-overlay"></div>` : null}
         </div>

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

@@ -1,4 +1,4 @@
-import '@refinitiv-ui/elements/lib/canvas/themes/halo/dark';
-import '@refinitiv-ui/elements/lib/tooltip/themes/halo/dark';
+import '@refinitiv-ui/elements/canvas/themes/halo/dark';
+import '@refinitiv-ui/elements/tooltip/themes/halo/dark';
 
 elf.customStyles.define('ef-heatmap', ':host{--spacing:2;--below-point-color:#F5475B;--mid-point-color:#1A1A1A;--above-point-color:#39C46E;background-color:#1a1a1a;--below-point-color:#F5475B;--mid-point-color:#FFFFFF;--above-point-color:#39C46E}:host .x-axis-item{padding:4px 0}:host .y-axis-item{padding:0 4px}:host .x-axis-item,:host .y-axis-item,:host [part=cross-box]{color:#ccc;background-color:#262626}:host [part=canvas]{color:#000}');

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

@@ -1,4 +1,4 @@
-import '@refinitiv-ui/elements/lib/canvas/themes/halo/light';
-import '@refinitiv-ui/elements/lib/tooltip/themes/halo/light';
+import '@refinitiv-ui/elements/canvas/themes/halo/light';
+import '@refinitiv-ui/elements/tooltip/themes/halo/light';
 
 elf.customStyles.define('ef-heatmap', ':host{--spacing:2;--below-point-color:#B63243;--mid-point-color:#FAFAFA;--above-point-color:#246B3E;background-color:#fafafa;--below-point-color:#D94255;--mid-point-color:#FFFFFF;--above-point-color:#309054}:host .x-axis-item{padding:4px 0}:host .y-axis-item{padding:0 4px}:host .x-axis-item,:host .y-axis-item,:host [part=cross-box]{color:#404040;background-color:#f2f2f2}:host [part=canvas]{color:#fff}');

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

@@ -1,4 +1,4 @@
-import '@refinitiv-ui/elements/lib/canvas/themes/solar/charcoal';
-import '@refinitiv-ui/elements/lib/tooltip/themes/solar/charcoal';
+import '@refinitiv-ui/elements/canvas/themes/solar/charcoal';
+import '@refinitiv-ui/elements/tooltip/themes/solar/charcoal';
 
 elf.customStyles.define('ef-heatmap', ':host{--spacing:2;--below-point-color:#F5475B;--mid-point-color:#1A1A1C;--above-point-color:#39C46E;background-color:#1a1a1c}:host [part=canvas]{color:rgba(255,255,255,.8)}:host .x-axis-item{padding:4px 0}:host .y-axis-item{padding:0 4px}:host .x-axis-item,:host .y-axis-item,:host [part=cross-box]{background-color:#212124;color:#c2c2c2}');

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

@@ -1,4 +1,4 @@
-import '@refinitiv-ui/elements/lib/canvas/themes/solar/pearl';
-import '@refinitiv-ui/elements/lib/tooltip/themes/solar/pearl';
+import '@refinitiv-ui/elements/canvas/themes/solar/pearl';
+import '@refinitiv-ui/elements/tooltip/themes/solar/pearl';
 
 elf.customStyles.define('ef-heatmap', ':host{--spacing:2;--below-point-color:#D94255;--mid-point-color:#FFFFFF;--above-point-color:#309054;background-color:#fff}:host [part=canvas]{color:rgba(0,0,0,.8)}:host .x-axis-item{padding:4px 0}:host .y-axis-item{padding:0 4px}:host .x-axis-item,:host .y-axis-item,:host [part=cross-box]{background-color:#e4e8ed;color:#484848}');

package/lib/icon/index.d.ts

@@ -74,6 +74,11 @@ export declare class Icon extends BasicElement {
      */
     protected render(): TemplateResult;
 }
+declare global {
+    interface HTMLElementTagNameMap {
+        'ef-icon': Icon;
+    }
+}
 
 declare global {
   interface HTMLElementTagNameMap {

package/lib/icon/index.js

@@ -1,8 +1,8 @@
 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 { 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 { VERSION } from '../version.js';
 import { IconLoader } from './utils/IconLoader.js';
 export { preload } from './utils/IconLoader.js';

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

@@ -1,4 +1,4 @@
-import { CdnLoader } from '@refinitiv-ui/utils/lib/loader.js';
+import { CdnLoader } from '@refinitiv-ui/utils/loader.js';
 /**
  * Caches and provides icon SVGs, Loaded either by name from CDN or directly by URL.
  * Uses singleton pattern

package/lib/icon/utils/IconLoader.js

@@ -1,4 +1,4 @@
-import { CdnLoader, Deferred } from '@refinitiv-ui/utils/lib/loader.js';
+import { CdnLoader, Deferred } from '@refinitiv-ui/utils/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.

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/lib/color.js';
+import type { RGBColor, HSLColor } from '@refinitiv-ui/utils/color.js';
 declare type SeriesOptions = AreaSeriesPartialOptions | BarSeriesPartialOptions | CandlestickSeriesPartialOptions | HistogramSeriesPartialOptions | LineSeriesPartialOptions;
 declare type SeriesStyleOptions = LineStyleOptions & AreaStyleOptions & BarStyleOptions & CandlestickStyleOptions & HistogramStyleOptions;
 declare type SeriesData = LineData[] | BarData[] | HistogramData[];

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

@@ -251,18 +251,6 @@ export declare class InteractiveChart extends ResponsiveElement {
      * @returns {void}
      */
     protected renderTextLegend(chartType: string, rowLegendElem: RowLegend, value: SeriesDataItem | number | string, priceColor: string, index: number): void;
-    /**
-    * Check `node` inside row legend and case type to HTMLElement
-    * @param rowLegend Legend element
-    * @returns true if not have `node` inside row legend
-    */
-    private isHTMLElement;
-    /**
-    * Check `node` inside row legend and case type to NodeListOf<Element>
-    * @param rowLegend Legend element
-    * @returns true if have `node` inside row legend
-    */
-    private isNodeListElement;
     /**
      * Create span OHLC in row legend used by several series types such as bars or candlesticks
      * @param rowLegend Legend element
@@ -367,6 +355,11 @@ export declare class InteractiveChart extends ResponsiveElement {
      */
     protected render(): TemplateResult;
 }
+declare global {
+    interface HTMLElementTagNameMap {
+        'ef-interactive-chart': InteractiveChart;
+    }
+}
 
 declare global {
   interface HTMLElementTagNameMap {

package/lib/interactive-chart/index.js

@@ -1,11 +1,11 @@
 var InteractiveChart_1;
 import { __decorate } from "tslib";
 import { ResponsiveElement, html, css, DeprecationNotice } 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 { query } from '@refinitiv-ui/core/lib/decorators/query.js';
+import { customElement } from '@refinitiv-ui/core/decorators/custom-element.js';
+import { property } from '@refinitiv-ui/core/decorators/property.js';
+import { query } from '@refinitiv-ui/core/decorators/query.js';
 import { VERSION } from '../version.js';
-import { color as parseColor } from '@refinitiv-ui/utils/lib/color.js';
+import { color as parseColor } from '@refinitiv-ui/utils/color.js';
 import { createChart as chart } from 'lightweight-charts';
 import '../tooltip/index.js';
 import { LegendStyle } from './helpers/types.js';
@@ -592,8 +592,7 @@ let InteractiveChart = InteractiveChart_1 = class InteractiveChart extends Respo
      * @return position
      */
     getPriceScalePosition() {
-        var _a;
-        const priceScale = (_a = this.chart) === null || _a === void 0 ? void 0 : _a.options();
+        const priceScale = this.chart?.options();
         if (priceScale.leftPriceScale.visible && priceScale.rightPriceScale.visible) {
             return 'two-price';
         }
@@ -661,14 +660,14 @@ let InteractiveChart = InteractiveChart_1 = class InteractiveChart extends Respo
                 let value;
                 let priceColor = '';
                 // When have price on event moved on the crosshair
-                if ((eventMove === null || eventMove === void 0 ? void 0 : eventMove.seriesPrices.get(this.seriesList[idx])) && eventMove.time) {
+                if (eventMove?.seriesPrices.get(this.seriesList[idx]) && eventMove.time) {
                     value = eventMove.seriesPrices.get(this.seriesList[idx]);
                     priceColor = this.getColorInSeries(eventMove, chartType, idx);
                     this.isCrosshairVisible = true;
                     this.hasDataPoint = true;
                 }
                 // when there's no data point in the series object.
-                else if (!(eventMove === null || eventMove === void 0 ? void 0 : eventMove.seriesPrices.get(this.seriesList[idx])) && (eventMove === null || eventMove === void 0 ? void 0 : eventMove.time)) {
+                else if (!eventMove?.seriesPrices.get(this.seriesList[idx]) && eventMove?.time) {
                     value = NO_DATA_POINT;
                     this.isCrosshairVisible = true;
                     this.hasDataPoint = false;
@@ -698,8 +697,12 @@ let InteractiveChart = InteractiveChart_1 = class InteractiveChart extends Respo
      * @returns {void}
      */
     renderTextLegend(chartType, rowLegendElem, value, priceColor, index) {
+        // No need to render if disable legend
+        if (this.disabledLegend) {
+            return;
+        }
         if (chartType === 'bar' || chartType === 'candlestick') {
-            if (!this.hasDataPoint && this.isNodeListElement(rowLegendElem)) {
+            if (!this.hasDataPoint && rowLegendElem instanceof NodeList) {
                 const spanElem = rowLegendElem[index].querySelectorAll('span.price,span.ohlc');
                 spanElem.forEach(span => rowLegendElem[index].removeChild(span));
                 const span = document.createElement('span');
@@ -715,22 +718,6 @@ let InteractiveChart = InteractiveChart_1 = class InteractiveChart extends Respo
             this.createTextPrice(rowLegendElem, value, priceColor, index);
         }
     }
-    /**
-    * Check `node` inside row legend and case type to HTMLElement
-    * @param rowLegend Legend element
-    * @returns true if not have `node` inside row legend
-    */
-    isHTMLElement(rowLegend) {
-        return rowLegend.length === undefined;
-    }
-    /**
-    * Check `node` inside row legend and case type to NodeListOf<Element>
-    * @param rowLegend Legend element
-    * @returns true if have `node` inside row legend
-    */
-    isNodeListElement(rowLegend) {
-        return rowLegend !== undefined;
-    }
     /**
      * Create span OHLC in row legend used by several series types such as bars or candlesticks
      * @param rowLegend Legend element
@@ -739,7 +726,7 @@ let InteractiveChart = InteractiveChart_1 = class InteractiveChart extends Respo
      * @returns {void}
      */
     createSpanOHLC(rowLegend, rowData, priceColor) {
-        if (this.isHTMLElement(rowLegend)) {
+        if (rowLegend instanceof HTMLElement) {
             rowLegend.setAttribute('data-color', priceColor);
             this.createSpan(rowLegend, 'O', rowData.open, 'H', rowData.high, 'L', rowData.low, 'C', rowData.close);
         }
@@ -764,11 +751,11 @@ let InteractiveChart = InteractiveChart_1 = class InteractiveChart extends Respo
             };
         }
         // Create text price after chart has rendered
-        if (this.isHTMLElement(rowLegend)) {
+        if (rowLegend instanceof HTMLElement) {
             this.createSpanOHLC(rowLegend, rowData, priceColor);
         }
         // Handle update text price when mouse crosshairMove in chart
-        else if (this.isNodeListElement(rowLegend)) {
+        else if (rowLegend instanceof NodeList) {
             const rowSpanLength = rowLegend[index].children.length;
             let countElmPrice = 0;
             for (let spanIndex = 0; spanIndex < rowSpanLength; spanIndex++) {
@@ -811,19 +798,18 @@ let InteractiveChart = InteractiveChart_1 = class InteractiveChart extends Respo
      * @returns {void}
      */
     createTextPrice(rowLegend, price, priceColor, index) {
-        var _a;
         const formatter = this.internalConfig.series[index].legendPriceFormatter;
         // Formats legend only when formatter and data point are provided
         const formattedPrice = !!formatter && price !== NO_DATA_POINT ? formatter(price) : price;
         // Create text price after chart has rendered
-        if (this.isHTMLElement(rowLegend)) {
+        if (rowLegend instanceof HTMLElement) {
             rowLegend.setAttribute('data-color', priceColor);
             this.createSpan(rowLegend, formattedPrice);
         }
         // Handle update text price when mouse crosshairMove in chart
-        else if (this.isNodeListElement(rowLegend)) {
+        else if (rowLegend instanceof NodeList) {
             const symbolElem = rowLegend[index].children[0];
-            const spanIndex = ((_a = symbolElem.getAttribute('class')) === null || _a === void 0 ? void 0 : _a.indexOf('symbol')) === 0 ? 1 : 0;
+            const spanIndex = symbolElem.getAttribute('class')?.indexOf('symbol') === 0 ? 1 : 0;
             const rowLegendElem = rowLegend[index];
             rowLegendElem.children[spanIndex].textContent = `${formattedPrice}`;
             rowLegendElem.children[spanIndex].style.color = `${priceColor}`;
@@ -889,12 +875,11 @@ let InteractiveChart = InteractiveChart_1 = class InteractiveChart extends Respo
      * @returns color value
      */
     getColorInSeries(seriesData, chartType, index) {
-        var _a;
         if (chartType === 'line') {
             return this.getLegendPriceColor(this.seriesList[index].options().color);
         }
         else if (chartType === 'candlestick') {
-            const value = seriesData.hasOwnProperty('seriesPrices') ? (_a = seriesData) === null || _a === void 0 ? void 0 : _a.seriesPrices.get(this.seriesList[index]) : seriesData;
+            const value = seriesData.hasOwnProperty('seriesPrices') ? seriesData?.seriesPrices.get(this.seriesList[index]) : seriesData;
             const barStyle = this.seriesList[index].options();
             const colorBar = value.close > value.open ? barStyle.borderUpColor : barStyle.borderDownColor;
             return colorBar;
@@ -967,8 +952,7 @@ let InteractiveChart = InteractiveChart_1 = class InteractiveChart extends Respo
      *  @returns {void}
      */
     updateLegendWithLatestData() {
-        var _a;
-        if (this.rowLegend && !this.isCrosshairVisible && ((_a = this.config) === null || _a === void 0 ? void 0 : _a.hasOwnProperty('series'))) {
+        if (this.rowLegend && !this.isCrosshairVisible && this.config?.hasOwnProperty('series')) {
             for (let idx = 0; idx < this.internalConfig.series.length; idx++) {
                 const chartType = this.internalConfig.series[idx].type;
                 const series = this.internalConfig.series[idx];

package/lib/interactive-chart/themes/halo/dark/index.js

@@ -1,3 +1,3 @@
-import '@refinitiv-ui/elements/lib/tooltip/themes/halo/dark';
+import '@refinitiv-ui/elements/tooltip/themes/halo/dark';
 
 elf.customStyles.define('ef-interactive-chart', ':host{--chart-color-1:#6678FF;--chart-color-2:#FFFFFF;--chart-color-3:#FFC800;--chart-color-4:#9064CD;--chart-color-5:#00D0D4;--chart-color-6:#FF5000;--chart-color-7:#00C389;--chart-color-8:#EA2E6C;--chart-color-9:#999999;--chart-color-10:#3BBAFF;--line-width:2;--fill-opacity:0.4;--text-color:rgba(204, 204, 204, 0.8);--background-color:#1A1A1A;--chart-up-color:#39C46E;--chart-down-color:#F5475B;--cross-hair-color:#CCCCCC;--grid-vert-line-color:rgba(51, 51, 51, 0.5);--grid-horz-line-color:rgba(51, 51, 51, 0.5);--scale-price-border-color:rgba(51, 51, 51, 0.5);--scale-times-border-color:rgba(51, 51, 51, 0.5)}:host [part=legend]{position:absolute;left:15px;top:15px;z-index:1000;color:var(--text-color);font-size:90%}:host [part=legend] .row{margin:1px 5px}:host [part=legend] .price{margin-right:5px}:host [part=legend] .ohlc{margin-right:2px}:host [part=legend].yaxis-left{left:70px}:host [part=legend].yaxis-right{left:15px}:host [part=legend].horizontal{display:flex;max-width:calc(100% - 75px);flex-wrap:wrap}:host [part=jump-button-container]{display:none;position:absolute;transition:background-color .1s;width:23px;height:23px;color:#ccc;border:1px solid #0d0d0d;box-shadow:0 0 0 0 rgba(0,0,0,.5);border-radius:100%;z-index:1000;cursor:pointer;background-color:#1a1a1a}:host [part=jump-button-container]:hover{color:#fff;border-color:#334bff;box-shadow:0 0 0 0 rgba(0,0,0,.8);background-color:#343434}:host [part=jump-button-container]:active{color:#fff;box-shadow:0 0 0 0 rgba(0,0,0,.5);background-color:#1a1a1a}:host [part=jump-button]{position:relative;display:inline-block;width:5px;height:5px;border-top:2px solid #ccc;border-right:2px solid #ccc;transform:rotate(45deg) skew(0);margin-top:8px;margin-left:7px}:host [part=branding-container]{position:absolute;opacity:.6;bottom:3px;z-index:1000}:host [part=branding-container].left{left:10px}:host [part=branding-container].right{right:10px}:host [part=branding-container].none{top:13px;right:13px}:host [part=branding]{height:22px;width:22px;fill:rgba(204,204,204,.8)}:host [part=jump-button-container],:host [part=jump-button-container]:hover,:host [part=jump-button]{border-color:grey}');

package/lib/interactive-chart/themes/halo/light/index.js

@@ -1,3 +1,3 @@
-import '@refinitiv-ui/elements/lib/tooltip/themes/halo/light';
+import '@refinitiv-ui/elements/tooltip/themes/halo/light';
 
 elf.customStyles.define('ef-interactive-chart', ':host{--chart-color-1:#334BFF;--chart-color-2:#000000;--chart-color-3:#7F6400;--chart-color-4:#71549F;--chart-color-5:#007678;--chart-color-6:#CC4000;--chart-color-7:#007653;--chart-color-8:#D22962;--chart-color-9:#595959;--chart-color-10:#236F99;--line-width:2;--fill-opacity:0.4;--text-color:rgba(13, 13, 13, 0.8);--background-color:#FAFAFA;--chart-up-color:#246B3E;--chart-down-color:#B63243;--cross-hair-color:#404040;--grid-vert-line-color:rgba(224, 224, 224, 0.5);--grid-horz-line-color:rgba(224, 224, 224, 0.5);--scale-price-border-color:rgba(224, 224, 224, 0.5);--scale-times-border-color:rgba(224, 224, 224, 0.5)}:host [part=legend]{position:absolute;left:15px;top:15px;z-index:1000;color:var(--text-color);font-size:90%}:host [part=legend] .row{margin:1px 5px}:host [part=legend] .price{margin-right:5px}:host [part=legend] .ohlc{margin-right:2px}:host [part=legend].yaxis-left{left:70px}:host [part=legend].yaxis-right{left:15px}:host [part=legend].horizontal{display:flex;max-width:calc(100% - 75px);flex-wrap:wrap}:host [part=jump-button-container]{display:none;position:absolute;transition:background-color .1s;width:23px;height:23px;color:#0d0d0d;border:1px solid #ccc;box-shadow:0 0 0 0 rgba(0,0,0,.25);border-radius:100%;z-index:1000;cursor:pointer;background-color:#fafafa}:host [part=jump-button-container]:hover{color:#fff;border-color:#334bff;box-shadow:0 0 0 0 rgba(0,0,0,.55);background-color:#fff}:host [part=jump-button-container]:active{color:#fff;box-shadow:0 0 0 0 rgba(0,0,0,.25);background-color:#fafafa}:host [part=jump-button]{position:relative;display:inline-block;width:5px;height:5px;border-top:2px solid #0d0d0d;border-right:2px solid #0d0d0d;transform:rotate(45deg) skew(0);margin-top:8px;margin-left:7px}:host [part=branding-container]{position:absolute;opacity:.6;bottom:3px;z-index:1000}:host [part=branding-container].left{left:10px}:host [part=branding-container].right{right:10px}:host [part=branding-container].none{top:13px;right:13px}:host [part=branding]{height:22px;width:22px;fill:rgba(13,13,13,.8)}:host [part=jump-button-container],:host [part=jump-button-container]:hover,:host [part=jump-button]{border-color:#8d8d8d}');

package/lib/interactive-chart/themes/solar/charcoal/index.js

@@ -1,3 +1,3 @@
-import '@refinitiv-ui/elements/lib/tooltip/themes/solar/charcoal';
+import '@refinitiv-ui/elements/tooltip/themes/solar/charcoal';
 
 elf.customStyles.define('ef-interactive-chart', ':host{--chart-color-1:#FF9933;--chart-color-2:#B10CF2;--chart-color-3:#7DE442;--chart-color-4:#3780BF;--chart-color-5:#FA4C11;--chart-color-6:#FFE433;--chart-color-7:#8C8C8C;--chart-color-8:#5A54FF;--chart-color-9:#E53766;--chart-color-10:#648608;--line-width:2;--fill-opacity:0.4;--text-color:rgba(194, 194, 194, 0.8);--background-color:#1A1A1C;--chart-up-color:#39C46E;--chart-down-color:#F5475B;--cross-hair-color:#E2E2E2;--grid-vert-line-color:rgba(10, 10, 10, 0.5);--grid-horz-line-color:rgba(10, 10, 10, 0.5);--scale-price-border-color:rgba(10, 10, 10, 0.5);--scale-times-border-color:rgba(10, 10, 10, 0.5);--chart-color-1:#FF9933;--chart-color-2:#B10CF2;--chart-color-3:#7DE442;--chart-color-4:#3780BF;--chart-color-5:#FA4C11;--chart-color-6:#FFE433;--chart-color-7:#8C8C8C;--chart-color-8:#5A54FF;--chart-color-9:#E53766;--chart-color-10:#648608;--chart-color-11:#48CBF7;--chart-color-12:#F3478E;--chart-color-13:#508BF7;--chart-color-14:#EFF748;--chart-color-15:#FF4043;--chart-color-16:#A7DB0B;--chart-color-17:#C2C2C2;--chart-color-18:#1578AD;--chart-color-19:#F2B530;--chart-color-20:#297835;--chart-color-21:#7045FF;--chart-color-22:#DD48F7;--chart-color-23:#09A8C0;--chart-color-24:#60E65C;--chart-color-25:#2960A3;--grid-vert-line-color:rgba(194, 194, 194, 0.1);--grid-horz-line-color:rgba(194, 194, 194, 0.1);--scale-price-border-color:rgba(194, 194, 194, 0.1);--scale-times-border-color:rgba(194, 194, 194, 0.1)}:host [part=legend]{position:absolute;left:15px;top:15px;z-index:1000;color:var(--text-color);font-size:90%}:host [part=legend] .row{margin:1px 5px}:host [part=legend] .price{margin-right:5px}:host [part=legend] .ohlc{margin-right:2px}:host [part=legend].yaxis-left{left:70px}:host [part=legend].yaxis-right{left:15px}:host [part=legend].horizontal{display:flex;max-width:calc(100% - 75px);flex-wrap:wrap}:host [part=jump-button-container]{display:none;position:absolute;transition:background-color .1s;width:23px;height:23px;color:#c2c2c2;background-color:#3c3c42;border:1px solid #000;box-shadow:0 0 0 0 rgba(0,0,0,.6);border-radius:100%;z-index:1000;cursor:pointer;background-image:linear-gradient(rgba(255,255,255,.1) 10%,rgba(255,255,255,0) 100%)}:host [part=jump-button-container]:hover{color:#e2e2e2;background-color:#4d4d55;border-color:#000;box-shadow:0 0 0 0 rgba(0,0,0,.9)}:host [part=jump-button-container]:active{background-color:#38383d;color:#c2c2c2;box-shadow:0 0 0 0 rgba(0,0,0,.6);background-image:linear-gradient(rgba(255,255,255,.1) 10%,rgba(255,255,255,0) 100%)}:host [part=jump-button]{position:relative;display:inline-block;width:5px;height:5px;border-top:2px solid #c2c2c2;border-right:2px solid #c2c2c2;transform:rotate(45deg) skew(0);margin-top:8px;margin-left:7px}:host [part=branding-container]{position:absolute;opacity:.6;bottom:3px;z-index:1000}:host [part=branding-container].left{left:10px}:host [part=branding-container].right{right:10px}:host [part=branding-container].none{top:13px;right:13px}:host [part=branding]{height:22px;width:22px;fill:rgba(194,194,194,.8)}:host [part=jump-button-container]:hover [part=jump-button]{border-color:#e2e2e2}');

package/lib/interactive-chart/themes/solar/pearl/index.js

@@ -1,3 +1,3 @@
-import '@refinitiv-ui/elements/lib/tooltip/themes/solar/pearl';
+import '@refinitiv-ui/elements/tooltip/themes/solar/pearl';
 
 elf.customStyles.define('ef-interactive-chart', ':host{--chart-color-1:#EE7600;--chart-color-2:#B10CF2;--chart-color-3:#309054;--chart-color-4:#3780BF;--chart-color-5:#FA4C11;--chart-color-6:#D9B500;--chart-color-7:#8C8C8C;--chart-color-8:#5A54FF;--chart-color-9:#E53766;--chart-color-10:#648608;--line-width:2;--fill-opacity:0.4;--text-color:rgba(72, 72, 72, 0.8);--background-color:#FFFFFF;--chart-up-color:#309054;--chart-down-color:#D94255;--cross-hair-color:#ACAFB5;--grid-vert-line-color:rgba(213, 216, 219, 0.5);--grid-horz-line-color:rgba(213, 216, 219, 0.5);--scale-price-border-color:rgba(213, 216, 219, 0.5);--scale-times-border-color:rgba(213, 216, 219, 0.5);--chart-color-1:#EE7600;--chart-color-2:#B10CF2;--chart-color-3:#309054;--chart-color-4:#3780BF;--chart-color-5:#FA4C11;--chart-color-6:#D9B500;--chart-color-7:#8C8C8C;--chart-color-8:#5A54FF;--chart-color-9:#E53766;--chart-color-10:#648608;--chart-color-11:#40B6DE;--chart-color-12:#F3478E;--chart-color-13:#508BF7;--chart-color-14:#AAB218;--chart-color-15:#FF4043;--chart-color-16:#80A808;--chart-color-17:#707070;--chart-color-18:#1578AC;--chart-color-19:#D9A22B;--chart-color-20:#297835;--chart-color-21:#7045FF;--chart-color-22:#DD48F7;--chart-color-23:#09A8C0;--chart-color-24:#4BB347;--chart-color-25:#2960A3;--grid-vert-line-color:rgba(72, 72, 72, 0.1);--grid-horz-line-color:rgba(72, 72, 72, 0.1);--scale-price-border-color:rgba(72, 72, 72, 0.1);--scale-times-border-color:rgba(72, 72, 72, 0.1)}:host [part=legend]{position:absolute;left:15px;top:15px;z-index:1000;color:var(--text-color);font-size:90%}:host [part=legend] .row{margin:1px 5px}:host [part=legend] .price{margin-right:5px}:host [part=legend] .ohlc{margin-right:2px}:host [part=legend].yaxis-left{left:70px}:host [part=legend].yaxis-right{left:15px}:host [part=legend].horizontal{display:flex;max-width:calc(100% - 75px);flex-wrap:wrap}:host [part=jump-button-container]{display:none;position:absolute;transition:background-color .1s;width:23px;height:23px;color:#505050;background-color:#fafbfc;border:1px solid #a9afba;box-shadow:0 0 0 0 rgba(0,0,0,.3);border-radius:100%;z-index:1000;cursor:pointer;background-image:linear-gradient(rgba(0,0,0,0) 0,rgba(0,0,0,.1) 100%)}:host [part=jump-button-container]:hover{color:#1d1d1d;background-color:#fff;border-color:#a9afba;box-shadow:0 0 0 0 rgba(0,0,0,.6)}:host [part=jump-button-container]:active{background-color:#fff;color:#1d1d1d;box-shadow:0 0 0 0 rgba(0,0,0,.3);background-image:none}:host [part=jump-button]{position:relative;display:inline-block;width:5px;height:5px;border-top:2px solid #505050;border-right:2px solid #505050;transform:rotate(45deg) skew(0);margin-top:8px;margin-left:7px}:host [part=branding-container]{position:absolute;opacity:.6;bottom:3px;z-index:1000}:host [part=branding-container].left{left:10px}:host [part=branding-container].right{right:10px}:host [part=branding-container].none{top:13px;right:13px}:host [part=branding]{height:22px;width:22px;fill:rgba(72,72,72,.8)}:host [part=jump-button-container]:hover [part=jump-button]{border-color:#1d1d1d}');

package/lib/item/helpers/types.d.ts

@@ -1,4 +1,4 @@
-import type { DataItem } from '@refinitiv-ui/utils/lib/collection.js';
+import type { DataItem } from '@refinitiv-ui/utils/collection.js';
 export declare type ItemType = 'text' | 'header' | 'divider';
 interface CommonItem extends DataItem {
     /**

package/lib/item/index.d.ts

@@ -44,19 +44,10 @@ export declare class Item extends ControlElement {
      * Set the icon name from the ef-icon list
      */
     icon: string | null;
-    private _selected;
     /**
      * Indicates that the item is selected
-     * @param value selected value
-     * @default false
      */
-    set selected(value: boolean);
-    get selected(): boolean;
-    /**
-     * Aria indicating current select state
-     * @ignore
-     */
-    ariaSelected: string;
+    selected: boolean;
     /**
      * Is the item part of a multiple selection
      */
@@ -93,10 +84,26 @@ export declare class Item extends ControlElement {
      */
     private checkSlotChildren;
     /**
-     * @override
+     * Handles aria-selected or aria-checked when toggle between single and multiple selection mode
+     * @returns {void}
+     **/
+    private multipleChanged;
+    /**
+     * Handles aria when selected state changes
+     * @returns {void}
+     */
+    private selectedChanged;
+    /**
+     * Control State behaviour will update tabindex based on the property
+     * @returns {void}
+     */
+    private typeChanged;
+    /**
+     * Invoked before update() to compute values needed during the update.
+     * @param changedProperties changed properties
      * @returns {void}
      */
-    protected update(changedProperties: PropertyValues): void;
+    protected willUpdate(changedProperties: PropertyValues): void;
     /**
      * Get icon template if icon attribute is defined
      */
@@ -131,11 +138,6 @@ export declare class Item extends ControlElement {
      * @returns whether element is truncated or not
      */
     get isTruncated(): boolean;
-    /**
-     * Control State behaviour will update tabindex based on the property
-     * @returns {void}
-     */
-    private typeChanged;
     /**
      * A `TemplateResult` that will be used
      * to render the updated internal template.
@@ -143,6 +145,11 @@ export declare class Item extends ControlElement {
      */
     protected render(): TemplateResult;
 }
+declare global {
+    interface HTMLElementTagNameMap {
+        'ef-item': Item;
+    }
+}
 
 declare global {
   interface HTMLElementTagNameMap {