@refinitiv-ui/elements 7.0.2 → 7.2.0

package/CHANGELOG.md

@@ -3,29 +3,43 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
-## [7.0.2](https://github.com/Refinitiv/refinitiv-ui/compare/@refinitiv-ui/elements@7.0.1...@refinitiv-ui/elements@7.0.2) (2023-07-19)
-
+# [7.2.0](https://github.com/Refinitiv/refinitiv-ui/compare/@refinitiv-ui/elements@7.1.0...@refinitiv-ui/elements@7.2.0) (2023-07-31)
 
 ### Bug Fixes
 
-* **notification,toggle:** make user-select overridable ([#835](https://github.com/Refinitiv/refinitiv-ui/issues/835)) ([011130e](https://github.com/Refinitiv/refinitiv-ui/commit/011130e76341ec362cbd86b7dd93f2d77464ce64))
+- **heatmap:** `HeatmapCell` properties other than `value` should be optional ([#866](https://github.com/Refinitiv/refinitiv-ui/issues/866)) ([c27d3d6](https://github.com/Refinitiv/refinitiv-ui/commit/c27d3d6a004f897a0d8c037899514c9fe154a21c))
+- **number-field:** add aria-valuetext to prevent VO announce % ([e127ccb](https://github.com/Refinitiv/refinitiv-ui/commit/e127ccb403f2dc1795f25a24f41ac293f701647e))
+
+### Features
 
+- **interactive-chart:** change chart instance access modifier to public ([88ed541](https://github.com/Refinitiv/refinitiv-ui/commit/88ed541212f494877678213f9d8a68c0c8fa0b2c))
+- **tooltip:** add data-tooltip alias for tooltip attribute ([#859](https://github.com/Refinitiv/refinitiv-ui/issues/859)) ([3d2a333](https://github.com/Refinitiv/refinitiv-ui/commit/3d2a333f28afacbac353d344beae5fa6c52f61db))
 
+# [7.1.0](https://github.com/Refinitiv/refinitiv-ui/compare/@refinitiv-ui/elements@7.0.2...@refinitiv-ui/elements@7.1.0) (2023-07-25)
 
+### Bug Fixes
 
+- **chart:** font doesn't update after font loaded ([#832](https://github.com/Refinitiv/refinitiv-ui/issues/832)) ([ff64371](https://github.com/Refinitiv/refinitiv-ui/commit/ff64371b292955f980c1bb8e1189afdf23702534))
+- **datetime-picker:** allow user to clear invalid value in input ([#847](https://github.com/Refinitiv/refinitiv-ui/issues/847)) ([30334e5](https://github.com/Refinitiv/refinitiv-ui/commit/30334e55d7001e33175ddcb7a3b612be1dd1121a))
+- **datetime-picker:** prevent view change when either from/to has been selected ([#841](https://github.com/Refinitiv/refinitiv-ui/issues/841)) ([4f92738](https://github.com/Refinitiv/refinitiv-ui/commit/4f92738c381ea13d799fa8767bb3e6b99442fc01))
 
-## [7.0.1](https://github.com/Refinitiv/refinitiv-ui/compare/@refinitiv-ui/elements@7.0.0...@refinitiv-ui/elements@7.0.1) (2023-07-17)
+### Features
 
+- **interactive-chart:** migrate interactive chart api ([#840](https://github.com/Refinitiv/refinitiv-ui/issues/840)) ([94ffcae](https://github.com/Refinitiv/refinitiv-ui/commit/94ffcae24302e3bcf53cb9ec86e1d6562ccb4ee4))
 
-### Bug Fixes
+## [7.0.2](https://github.com/Refinitiv/refinitiv-ui/compare/@refinitiv-ui/elements@7.0.1...@refinitiv-ui/elements@7.0.2) (2023-07-19)
 
-* **chart:** wrong type on onRenderLabel ([#820](https://github.com/Refinitiv/refinitiv-ui/issues/820)) ([29a0e44](https://github.com/Refinitiv/refinitiv-ui/commit/29a0e44993c54bcff0279eb11a9a7dcfb755cbc2))
-* flag attribute not reflecting when set through property ([#822](https://github.com/Refinitiv/refinitiv-ui/issues/822)) ([c6cb02a](https://github.com/Refinitiv/refinitiv-ui/commit/c6cb02a744e16fd2f3f356fcc6f66325c9245118))
-* **interactive-chart:** export chart interface ([#812](https://github.com/Refinitiv/refinitiv-ui/issues/812)) ([7ec5eab](https://github.com/Refinitiv/refinitiv-ui/commit/7ec5eabffc82e5a4866f9de7662b4d3d69e2640b))
+### Bug Fixes
 
+- **notification,toggle:** make user-select overridable ([#835](https://github.com/Refinitiv/refinitiv-ui/issues/835)) ([011130e](https://github.com/Refinitiv/refinitiv-ui/commit/011130e76341ec362cbd86b7dd93f2d77464ce64))
 
+## [7.0.1](https://github.com/Refinitiv/refinitiv-ui/compare/@refinitiv-ui/elements@7.0.0...@refinitiv-ui/elements@7.0.1) (2023-07-17)
 
+### Bug Fixes
 
+- **chart:** wrong type on onRenderLabel ([#820](https://github.com/Refinitiv/refinitiv-ui/issues/820)) ([29a0e44](https://github.com/Refinitiv/refinitiv-ui/commit/29a0e44993c54bcff0279eb11a9a7dcfb755cbc2))
+- flag attribute not reflecting when set through property ([#822](https://github.com/Refinitiv/refinitiv-ui/issues/822)) ([c6cb02a](https://github.com/Refinitiv/refinitiv-ui/commit/c6cb02a744e16fd2f3f356fcc6f66325c9245118))
+- **interactive-chart:** export chart interface ([#812](https://github.com/Refinitiv/refinitiv-ui/issues/812)) ([7ec5eab](https://github.com/Refinitiv/refinitiv-ui/commit/7ec5eabffc82e5a4866f9de7662b4d3d69e2640b))
 
 # [7.0.0](https://github.com/Refinitiv/refinitiv-ui/compare/@refinitiv-ui/elements@6.8.8...@refinitiv-ui/elements@7.0.0) (2023-06-30)
 

package/lib/chart/custom-elements.md

@@ -12,6 +12,6 @@ Charting component that uses ChartJS library
 
 ## Methods
 
-| Method        | Type                      | Description                                      |
-|---------------|---------------------------|--------------------------------------------------|
-| `updateChart` | `(updateMode: any): void` | Update all data, title, scales, legends and re-render the chart based on its config<br /><br />**updateMode**: Additional configuration for control an animation in the update process. |
+| Method        | Type                       | Description                                      |
+|---------------|----------------------------|--------------------------------------------------|
+| `updateChart` | `(updateMode?: any): void` | Update all data, title, scales, legends and re-render the chart based on its config<br /><br />**updateMode**: Additional configuration for control an animation in the update process. |

package/lib/chart/elements/chart.d.ts

@@ -106,6 +106,12 @@ export declare class Chart extends BasicElement {
      * @returns The value as a number, or, undefined if NaN.
      */
     protected cssVarAsNumber(...args: string[]): number | undefined;
+    /**
+     * Callback beforeUpdate event from Chartjs
+     * @param chart Chart.js instance
+     * @returns {void}
+     */
+    protected beforeUpdate: (chart: ChartJS) => void;
     /**
      * Inject theme color into each datasets
      * @param chart Chart.js instance
@@ -154,7 +160,7 @@ export declare class Chart extends BasicElement {
      * @param updateMode Additional configuration for control an animation in the update process.
      * @returns {void}
      */
-    updateChart(updateMode: UpdateMode): void;
+    updateChart(updateMode?: UpdateMode): void;
     /**
      * Template for title
      * Rendered when `config.plugins.title.text` is set

package/lib/chart/elements/chart.js

@@ -30,6 +30,16 @@ let Chart = class Chart extends BasicElement {
          * Canvas element used to render Chart
          */
         this.canvas = createRef();
+        /**
+         * Callback beforeUpdate event from Chartjs
+         * @param chart Chart.js instance
+         * @returns {void}
+         */
+        this.beforeUpdate = (chart) => {
+            // set global config again in case the CSS font isn't loaded when updating the chart
+            this.setGlobalConfig();
+            this.decorateColors(chart);
+        };
         /**
          * Inject theme color into each datasets
          * @param chart Chart.js instance
@@ -303,7 +313,6 @@ let Chart = class Chart extends BasicElement {
      */
     connectedCallback() {
         super.connectedCallback();
-        this.setGlobalConfig();
         if (this.canvas.value) {
             this.createChart();
         }
@@ -327,7 +336,7 @@ let Chart = class Chart extends BasicElement {
                 const option = this.themableChartOption;
                 merge(chart.config.options, option);
             },
-            beforeUpdate: this.decorateColors
+            beforeUpdate: this.beforeUpdate
         };
     }
     /**

package/lib/datetime-picker/index.js

@@ -252,7 +252,7 @@ let DatetimePicker = class DatetimePicker extends ControlElement {
      */
     set values(values) {
         const oldValues = this._values;
-        if (String(oldValues) !== String(values)) {
+        if (String(oldValues) !== String(values) || !values.length) {
             this._values = values;
             this.valuesToSegments();
             this.requestUpdate('_values', oldValues); /* segments are populated in update */
@@ -562,17 +562,17 @@ let DatetimePicker = class DatetimePicker extends ControlElement {
         }
         // duplex split
         if (index === 0) {
-            /* from. to must be after or the same */
+            // from. to must be after or the same when no value has been selected
             let after = views[1] || addMonths(view, 1);
-            if (isBefore(after, view)) {
+            if (this.values.every((value) => !value) && isBefore(after, view)) {
                 after = view;
             }
             return [view, formatToView(after)];
         }
         if (index === 1) {
-            /* to. from must be before or the same */
+            // to. from must be before or the same when no value has been selected
             let before = views[0] || subMonths(view, 1);
-            if (isAfter(before, view)) {
+            if (this.values.every((value) => !value) && isAfter(before, view)) {
                 before = view;
             }
             return [formatToView(before), view];

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

@@ -1,5 +1,5 @@
 type HeatmapConfig = {
-    data: Array<HeatmapCell[]>;
+    data: HeatmapCell[][];
     yAxis?: HeatmapYAxis;
     xAxis?: HeatmapXAxis;
 };
@@ -13,18 +13,18 @@ type HeatmapYAxis = {
     position: 'left' | 'right';
 };
 type HeatmapCell = {
-    rowIndex: number;
-    colIndex: number;
-    x: number;
-    y: number;
-    width: number;
-    height: number;
+    rowIndex?: number;
+    colIndex?: number;
+    x?: number;
+    y?: number;
+    width?: number;
+    height?: number;
     value: number | null;
     header?: string;
     label?: string;
-    foregroundColor: string;
-    defaultBackground: string;
-    backgroundColor: string;
+    foregroundColor?: string;
+    defaultBackground?: string;
+    backgroundColor?: string;
     animationFrame?: number;
     customLabel?: string;
     customBackgroundColor?: string;

package/lib/heatmap/index.js

@@ -318,15 +318,13 @@ let Heatmap = class Heatmap extends ResponsiveElement {
      */
     onResize() {
         this.updateTimer = 0;
-        if (!this.isSizeCalculated) {
-            if (this.offsetWidth || this.offsetHeight) {
-                this.isSizeCalculated = true;
-            }
-        }
         if (this.isSizeCalculated) {
             const spacing = parseFloat(this.getComputedVariable('--spacing', '0'));
             this.cellMargin = spacing / 2;
         }
+        else {
+            this.isSizeCalculated = Boolean(this.offsetWidth || this.offsetHeight);
+        }
         // calculate responsive height
         if (this.responsiveHeight || !this.offsetHeight) {
             const width = this.offsetWidth;
@@ -397,12 +395,17 @@ let Heatmap = class Heatmap extends ResponsiveElement {
      */
     /* c8 ignore start */
     updateTooltipOverlayPosition(cell) {
+        if (cell.x === undefined ||
+            cell.y === undefined ||
+            cell.width === undefined ||
+            cell.height === undefined) {
+            return;
+        }
         // Compensate x-axis height for overlay when x-axis is at top position
         let marginOverlayTop = 0;
         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`;
         this.tooltipOverlay.style.top = `${cell.y + marginOverlayTop}px`;
         this.tooltipOverlay.style.width = `${cell.width}px`;
@@ -417,7 +420,7 @@ let Heatmap = class Heatmap extends ResponsiveElement {
      */
     /* c8 ignore start */
     hoverCellChanged(cell, previousCell) {
-        if (cell && cell.value !== null) {
+        if (cell && cell.value !== null && cell.backgroundColor) {
             if (this.tooltipCallback) {
                 this.updateTooltipOverlayPosition(cell);
             }
@@ -427,7 +430,7 @@ let Heatmap = class Heatmap extends ResponsiveElement {
             this.fade(cell, cell.backgroundColor, fadedColor, 100);
         }
         // returns color of previous cell to default cell color
-        if (previousCell && previousCell.value !== null) {
+        if (previousCell && previousCell.value !== null && previousCell.backgroundColor) {
             previousCell.foregroundColor = this.foregroundColor;
             this.fade(previousCell, previousCell.backgroundColor, this.getBackgroundColor(previousCell.value), 300);
         }
@@ -487,6 +490,12 @@ let Heatmap = class Heatmap extends ResponsiveElement {
      */
     /* c8 ignore start */
     resetCell(cell) {
+        if (cell.x === undefined ||
+            cell.y === undefined ||
+            cell.width === undefined ||
+            cell.height === undefined) {
+            return;
+        }
         this.canvasContext?.clearRect(cell.x, cell.y, cell.width, cell.height);
     }
     /* c8 ignore stop */
@@ -504,6 +513,9 @@ let Heatmap = class Heatmap extends ResponsiveElement {
         const start = performance.now();
         const end = start + duration;
         const fadingAnimation = (time) => {
+            if (cell.colIndex === undefined || cell.rowIndex === undefined) {
+                return;
+            }
             cell.x = this.colTrack.getContentStart(cell.colIndex);
             cell.y = this.rowTrack.getContentStart(cell.rowIndex);
             cell.width = this.colTrack.getContentSize(cell.colIndex);
@@ -641,12 +653,18 @@ let Heatmap = class Heatmap extends ResponsiveElement {
      * @returns {void}
      */
     paintLabel(cell) {
+        if (!this.canvasContext ||
+            cell.x === undefined ||
+            cell.y === undefined ||
+            cell.width === undefined ||
+            cell.height === undefined ||
+            cell.foregroundColor === undefined) {
+            return;
+        }
         const margin = cell.header ? this.calculateHeaderMargin(cell.height) : 0;
         const label = typeof cell.customLabel === 'string' ? cell.customLabel : cell.label;
-        if (this.canvasContext) {
-            this.canvasContext.fillStyle = cell.customForegroundColor || cell.foregroundColor;
-            this.canvasContext.fillText(label || '', cell.x + cell.width / 2, cell.y + 1 + cell.height / 2 + margin);
-        }
+        this.canvasContext.fillStyle = cell.customForegroundColor || cell.foregroundColor;
+        this.canvasContext.fillText(label || '', cell.x + cell.width / 2, cell.y + 1 + cell.height / 2 + margin);
     }
     /**
      * Check if the text (label / header and label) can be paint on the cell
@@ -796,15 +814,21 @@ let Heatmap = class Heatmap extends ResponsiveElement {
      * @returns {void}
      */
     paintHeader(cell) {
-        if (this.canvasContext) {
-            const labelFontStyle = this.canvasContext.font;
-            const margin = this.labelHidden ? 0 : this.calculateHeaderMargin(cell.height);
-            this.canvasContext.font = 'bold ' + labelFontStyle;
-            this.canvasContext.fillStyle = cell.customForegroundColor || cell.foregroundColor;
-            this.canvasContext.fillText(cell.header || '', cell.x + cell.width / 2, cell.y + 1 + cell.height / 2 - margin);
-            // Reverts font style to paint label correctly
-            this.canvasContext.font = labelFontStyle;
+        if (!this.canvasContext ||
+            cell.x === undefined ||
+            cell.y === undefined ||
+            cell.width === undefined ||
+            cell.height === undefined ||
+            cell.foregroundColor === undefined) {
+            return;
         }
+        const labelFontStyle = this.canvasContext.font;
+        const margin = this.labelHidden ? 0 : this.calculateHeaderMargin(cell.height);
+        this.canvasContext.font = 'bold ' + labelFontStyle;
+        this.canvasContext.fillStyle = cell.customForegroundColor || cell.foregroundColor;
+        this.canvasContext.fillText(cell.header || '', cell.x + cell.width / 2, cell.y + 1 + cell.height / 2 - margin);
+        // Reverts font style to paint label correctly
+        this.canvasContext.font = labelFontStyle;
     }
     /**
      * Paints header to all cells
@@ -847,10 +871,16 @@ let Heatmap = class Heatmap extends ResponsiveElement {
      * @returns {void}
      */
     paintCellBackground(cell) {
-        if (this.canvasContext) {
-            this.canvasContext.fillStyle = cell.customBackgroundColor || cell.backgroundColor;
-            this.canvasContext.fillRect(cell.x, cell.y, cell.width, cell.height);
+        if (!this.canvasContext ||
+            cell.x === undefined ||
+            cell.y === undefined ||
+            cell.width === undefined ||
+            cell.height === undefined ||
+            cell.backgroundColor === undefined) {
+            return;
         }
+        this.canvasContext.fillStyle = cell.customBackgroundColor || cell.backgroundColor;
+        this.canvasContext.fillRect(cell.x, cell.y, cell.width, cell.height);
     }
     /**
      * Construct and renders x-axis
@@ -1011,7 +1041,6 @@ let Heatmap = class Heatmap extends ResponsiveElement {
         if (this.hoverCell && this.canvasContext && this.tooltipCallback) {
             return this.tooltipCallback(this.hoverCell);
         }
-        return undefined;
     }
     /* c8 ignore stop */
     /**
@@ -1084,10 +1113,10 @@ __decorate([
     property({ type: Number })
 ], Heatmap.prototype, "saturation", void 0);
 __decorate([
-    property({ type: Function, attribute: false })
+    property({ attribute: false })
 ], Heatmap.prototype, "tooltipCallback", void 0);
 __decorate([
-    property({ type: Function, attribute: false })
+    property({ attribute: false })
 ], Heatmap.prototype, "renderCallback", void 0);
 __decorate([
     query('[part=canvas]', true)

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/index.d.ts

@@ -49,10 +49,14 @@ export declare class InteractiveChart extends ResponsiveElement {
      * 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;

package/lib/interactive-chart/index.js

@@ -1,6 +1,6 @@
 var InteractiveChart_1;
 import { __decorate } from "tslib";
-import { createChart as chart } from 'lightweight-charts';
+import { ColorType, createChart as chart } from 'lightweight-charts';
 import { ResponsiveElement, css, html } from '@refinitiv-ui/core';
 import { customElement } from '@refinitiv-ui/core/decorators/custom-element.js';
 import { property } from '@refinitiv-ui/core/decorators/property.js';
@@ -39,10 +39,14 @@ let InteractiveChart = InteractiveChart_1 = class InteractiveChart extends Respo
          * Array of series instances in chart
          */
         this.seriesList = [];
+        /**
+         * lightweight-charts object
+         * @type {IChartApi | null}
+         */
+        this.chart = null;
         this.jumpButtonInitialized = false;
         this.legendInitialized = false;
         this.isCrosshairVisible = false;
-        this.chart = null;
         this.rowLegend = null;
         this.timeScale = null;
         this.width = 0;
@@ -507,7 +511,10 @@ let InteractiveChart = InteractiveChart_1 = class InteractiveChart extends Respo
             // Create object same as the theme
             const chartThemeOptions = {
                 layout: {
-                    backgroundColor: this.theme.backgroundColor,
+                    background: {
+                        type: ColorType.Solid,
+                        color: this.theme.backgroundColor
+                    },
                     textColor: this.theme.textColor,
                     fontFamily: defaultFontFamily
                 },
@@ -659,14 +666,29 @@ let InteractiveChart = InteractiveChart_1 = class InteractiveChart extends Respo
                 let value;
                 let priceColor = '';
                 // When have price on event moved on the crosshair
-                if (eventMove?.seriesPrices.get(this.seriesList[idx]) && eventMove.time) {
-                    value = eventMove.seriesPrices.get(this.seriesList[idx]);
+                if (eventMove?.seriesData.get(this.seriesList[idx]) && eventMove.time) {
+                    const data = eventMove.seriesData.get(this.seriesList[idx]);
+                    switch (chartType) {
+                        case 'line':
+                        case 'area':
+                        case 'volume':
+                            value = data.value;
+                            break;
+                        case 'bar':
+                        case 'candlestick': {
+                            const { open, high, low, close } = data;
+                            value = { open, high, low, close };
+                            break;
+                        }
+                        default:
+                            break;
+                    }
                     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?.seriesPrices.get(this.seriesList[idx]) && eventMove?.time) {
+                else if (!eventMove?.seriesData.get(this.seriesList[idx]) && eventMove?.time) {
                     value = NO_DATA_POINT;
                     this.isCrosshairVisible = true;
                     this.hasDataPoint = false;
@@ -885,11 +907,9 @@ let InteractiveChart = InteractiveChart_1 = class InteractiveChart extends Respo
             return this.getLegendPriceColor(this.seriesList[index].options().color);
         }
         else if (chartType === 'candlestick') {
-            const value = seriesData.hasOwnProperty('seriesPrices')
-                ? seriesData?.seriesPrices.get(this.seriesList[index])
-                : seriesData;
+            const { close, open } = seriesData;
             const barStyle = this.seriesList[index].options();
-            const colorBar = value.close > value.open ? barStyle.borderUpColor : barStyle.borderDownColor;
+            const colorBar = close > open ? barStyle.borderUpColor : barStyle.borderDownColor;
             return colorBar;
         }
         else if (chartType === 'bar') {
@@ -899,8 +919,8 @@ let InteractiveChart = InteractiveChart_1 = class InteractiveChart extends Respo
             return this.getLegendPriceColor(this.seriesList[index].options().lineColor);
         }
         else if (chartType === 'volume') {
-            const priceValue = seriesData.hasOwnProperty('seriesPrices')
-                ? seriesData.seriesPrices.get(this.seriesList[index])
+            const priceValue = seriesData.hasOwnProperty('seriesData')
+                ? seriesData.seriesData.get(this.seriesList[index])
                 : seriesData.value;
             let dataItem = {};
             this.internalConfig.series[index].data.forEach((dataConfig) => {

package/lib/number-field/index.d.ts

@@ -315,6 +315,7 @@ export declare class NumberField extends FormFieldElement {
      * inputmode="decimal" - show decimals keyboard by default
      * role="spinbutton" - number field is actually a spinner
      * aria-valuenow - current value or 0
+     * aria-valuetext - current value or 0, need this to improve user-friendly and human-understandable when screen reader announce value
      * @keydown - Listener for `keydown` event. Runs `this.onInputKeyDown`
      * @beforeinput - Listener for `beforeinput` event. Runs `this.onBeforeInputChange`
      * @returns template map

package/lib/number-field/index.js

@@ -724,6 +724,7 @@ let NumberField = class NumberField extends FormFieldElement {
      * inputmode="decimal" - show decimals keyboard by default
      * role="spinbutton" - number field is actually a spinner
      * aria-valuenow - current value or 0
+     * aria-valuetext - current value or 0, need this to improve user-friendly and human-understandable when screen reader announce value
      * @keydown - Listener for `keydown` event. Runs `this.onInputKeyDown`
      * @beforeinput - Listener for `beforeinput` event. Runs `this.onBeforeInputChange`
      * @returns template map
@@ -736,6 +737,7 @@ let NumberField = class NumberField extends FormFieldElement {
             inputmode: 'decimal',
             role: 'spinbutton',
             'aria-valuenow': `${this.value || 0}`,
+            'aria-valuetext': `${this.value || 0}`,
             '@keydown': this.onInputKeyDown,
             '@beforeinput': this.onBeforeInputChange
         };

package/lib/tooltip/helpers/renderer.d.ts

@@ -1,6 +1,6 @@
 import type { TooltipRenderer } from './types';
 /**
- * A default renderer that renders `tooltip` attribute
+ * A default renderer that renders `tooltip` or `data-tooltip` attributes
  * @param target Target to check
  * @returns tooltip or null or undefined
  */

package/lib/tooltip/helpers/renderer.js

@@ -1,11 +1,11 @@
 /**
- * A default renderer that renders `tooltip` attribute
+ * A default renderer that renders `tooltip` or `data-tooltip` attributes
  * @param target Target to check
  * @returns tooltip or null or undefined
  */
 const tooltipRenderer = (target) => {
-    if (target.hasAttribute('tooltip')) {
-        return target.getAttribute('tooltip');
+    if (target.hasAttribute('tooltip') || target.hasAttribute('data-tooltip')) {
+        return target.getAttribute('tooltip') || target.getAttribute('data-tooltip');
     }
 };
 export { tooltipRenderer };

package/lib/version.js

@@ -1 +1 @@
-export const VERSION = '7.0.2';
+export const VERSION = '7.2.0';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@refinitiv-ui/elements",
-  "version": "7.0.2",
+  "version": "7.2.0",
   "description": "Element Framework Elements",
   "author": "Refinitiv",
   "license": "Apache-2.0",
@@ -348,7 +348,7 @@
     "chartjs-adapter-date-fns": "^3.0.0",
     "d3-interpolate": "^3.0.1",
     "date-fns": "^2.29.3",
-    "lightweight-charts": "^3.8.0",
+    "lightweight-charts": "^4.0.1",
     "tslib": "^2.3.1"
   },
   "devDependencies": {
@@ -371,5 +371,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "4b0c3b0bfdf6a89b519ff20fc9429490bef54d7f"
+  "gitHead": "c890f2c543e97eb3397bd2b7b506c624679c8f5b"
 }