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

package/lib/datetime-field/utils.d.ts

@@ -0,0 +1,25 @@
+import { DateTimeFormatPart, InputSelection } from './types';
+import { Direction } from './constants.js';
+/**
+ * Get a part index based on the selection
+ * @param selection Selection, containing selectionStart and selectionEnd
+ * @param parts The list of parts
+ * @returns index
+ */
+export declare const getSelectedPartIndex: (selection: InputSelection, parts: DateTimeFormatPart[]) => number;
+/**
+ * Get next available part index based on the selection, direction and input value
+ * @param selection Selection, containing selectionStart and selectionEnd
+ * @param parts The list of parts
+ * @param inputValue The date time string value
+ * @param direction Get the previous or the next part index
+ * @returns index
+ */
+export declare const getNextSelectedPartIndex: (selection: InputSelection, parts: DateTimeFormatPart[], inputValue: string, direction?: Direction) => number;
+/**
+ * Get part selectionStart and selectionEnd indexes
+ * @param index Part index
+ * @param parts The list of parts
+ * @returns selection
+ */
+export declare const selectPart: (index: number | undefined, parts: DateTimeFormatPart[]) => InputSelection;

package/lib/datetime-field/utils.js

@@ -0,0 +1,79 @@
+import { Direction } from './constants.js';
+const IterablePartTypes = ['year', 'day', 'month', 'hour', 'minute', 'second', 'weekday', 'dayPeriod', 'fractionalSecond'];
+const isAllowedPart = (part) => IterablePartTypes.includes(part.type);
+/**
+ * Get a part index based on the selection
+ * @param selection Selection, containing selectionStart and selectionEnd
+ * @param parts The list of parts
+ * @returns index
+ */
+export const getSelectedPartIndex = (selection, parts) => {
+    const selectionEnd = selection.selectionEnd || 0;
+    let accumulator = 0;
+    // Get the closest part to selectionEnd
+    for (let i = 0; i < parts.length; i += 1) {
+        const part = parts[i];
+        accumulator += part.value.length;
+        if (accumulator >= selectionEnd && isAllowedPart(part)) {
+            return i;
+        }
+    }
+    return 0;
+};
+/**
+ * Get next available part index based on the selection, direction and input value
+ * @param selection Selection, containing selectionStart and selectionEnd
+ * @param parts The list of parts
+ * @param inputValue The date time string value
+ * @param direction Get the previous or the next part index
+ * @returns index
+ */
+export const getNextSelectedPartIndex = (selection, parts, inputValue, direction = Direction.Up) => {
+    let selectedIndex;
+    const { selectionEnd, selectionStart } = selection;
+    if (selectionStart === 0 && selectionEnd === inputValue.length) {
+        // Full text selected
+        selectedIndex = direction === Direction.Up ? -1 : parts.length;
+    }
+    else if (selectionEnd === 0) {
+        // Cursor at the start of the text
+        selectedIndex = -1;
+        direction = Direction.Up;
+    }
+    else if (selectionEnd === inputValue.length && selectionEnd === selectionStart) {
+        // cursor at the end of the text
+        selectedIndex = parts.length;
+        direction = Direction.Down;
+    }
+    else {
+        selectedIndex = getSelectedPartIndex(selection, parts);
+    }
+    for (let i = selectedIndex + direction; direction === Direction.Up ? i < parts.length : i >= 0; i += direction) {
+        if (isAllowedPart(parts[i])) {
+            return i;
+        }
+    }
+    return selectedIndex;
+};
+/**
+ * Get part selectionStart and selectionEnd indexes
+ * @param index Part index
+ * @param parts The list of parts
+ * @returns selection
+ */
+export const selectPart = (index = 0, parts) => {
+    let selectionStart = 0;
+    let selectionEnd = 0;
+    for (let i = 0; i < parts.length; i += 1) {
+        const part = parts[i];
+        selectionEnd += part.value.length;
+        if (i === index) {
+            break;
+        }
+        selectionStart = selectionEnd;
+    }
+    return {
+        selectionStart,
+        selectionEnd
+    };
+};

package/lib/datetime-picker/index.js

@@ -1,9 +1,9 @@
 import { __decorate } from "tslib";
 import { ControlElement, html, css, WarningNotice } 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 { ifDefined } from '@refinitiv-ui/core/lib/directives/if-defined.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 { ifDefined } from '@refinitiv-ui/core/directives/if-defined.js';
 import { VERSION } from '../version.js';
 import '../calendar/index.js';
 import '../icon/index.js';
@@ -15,7 +15,7 @@ import { getDateFNSLocale } from './locales.js';
 import inputFormat from 'date-fns/esm/format/index.js';
 import inputParse from 'date-fns/esm/parse/index.js';
 import isValid from 'date-fns/esm/isValid/index.js';
-import { addMonths, subMonths, isAfter, isBefore, isValidDate, isValidDateTime, DateFormat, DateTimeFormat, parse, format } from '@refinitiv-ui/utils/lib/date.js';
+import { addMonths, subMonths, isAfter, isBefore, isValidDate, isValidDateTime, DateFormat, DateTimeFormat, parse, format } from '@refinitiv-ui/utils/date.js';
 import { DateTimeSegment, formatToView, getCurrentTime } from './utils.js';
 import { preload } from '../icon/index.js';
 preload('calendar', 'down', 'left', 'right'); /* preload calendar icons for faster loading */
@@ -727,7 +727,6 @@ let DatetimePicker = class DatetimePicker extends ControlElement {
      * @returns {void}
      */
     onCalendarValueChanged(event) {
-        var _a, _b;
         const values = event.target.values;
         this.interimSegments = values.map((value, index) => {
             const segment = this.interimSegments[index] || new DateTimeSegment();
@@ -741,7 +740,7 @@ let DatetimePicker = class DatetimePicker extends ControlElement {
         // in duplex mode, avoid jumping on views
         // Therefore if any of values have changed, save the current view
         if (this.isDuplex() && this.calendarEl && this.calendarToEl) {
-            this.notifyViewsChange([(_a = this.calendarEl) === null || _a === void 0 ? void 0 : _a.view, (_b = this.calendarToEl) === null || _b === void 0 ? void 0 : _b.view]);
+            this.notifyViewsChange([this.calendarEl?.view, this.calendarToEl?.view]);
         }
         // Close popup if there is no time picker
         const newValues = this.values;

package/lib/datetime-picker/utils.js

@@ -1,4 +1,4 @@
-import { format, DateFormat, parse, TimeFormat, toTimeSegment } from '@refinitiv-ui/utils/lib/date.js';
+import { format, DateFormat, parse, TimeFormat, toTimeSegment } from '@refinitiv-ui/utils/date.js';
 /**
  * A helper class to split date time string into date and time segments
  */

package/lib/dialog/draggable-element.js

@@ -86,9 +86,8 @@ class DraggableManager {
      * @returns {void}
      */
     deregister(draggableElement) {
-        var _a;
         if (this.draggableElements.has(draggableElement)) {
-            const handle = (_a = this.draggableElements.get(draggableElement)) === null || _a === void 0 ? void 0 : _a.handle;
+            const handle = this.draggableElements.get(draggableElement)?.handle;
             if (handle) {
                 DraggableManager.removeHandleCursor(handle);
             }

package/lib/dialog/index.d.ts

@@ -6,7 +6,7 @@ import '../panel/index.js';
 import '../header/index.js';
 import '../button/index.js';
 import { Translate } from '@refinitiv-ui/translate';
-import '@refinitiv-ui/phrasebook/lib/locale/en/dialog.js';
+import '@refinitiv-ui/phrasebook/locale/en/dialog.js';
 /**
  * Popup window, designed to contain and show any HTML content.
  * It provides modal and dragging functionality,

package/lib/dialog/index.js

@@ -1,10 +1,10 @@
 import { __decorate } from "tslib";
 import { css, html } 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 { isIE } from '@refinitiv-ui/utils/lib/browser.js';
+import { isIE } from '@refinitiv-ui/utils/browser.js';
 import { deregister as draggableDeregister, register as draggableRegister } from './draggable-element.js';
 import { Overlay } from '../overlay/index.js';
 import '../icon/index.js';
@@ -12,7 +12,7 @@ import '../panel/index.js';
 import '../header/index.js';
 import '../button/index.js';
 import { translate, TranslatePropertyKey } from '@refinitiv-ui/translate';
-import '@refinitiv-ui/phrasebook/lib/locale/en/dialog.js';
+import '@refinitiv-ui/phrasebook/locale/en/dialog.js';
 /**
  * Popup window, designed to contain and show any HTML content.
  * It provides modal and dragging functionality,

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

@@ -2,7 +2,7 @@ import { JSXInterface } from '../jsx';
 import { PropertyValues } from '@refinitiv-ui/core';
 import '../icon/index.js';
 import { TextField } from '../text-field/index.js';
-import { TemplateMap } from '@refinitiv-ui/core/lib/directives/template-map.js';
+import { TemplateMap } from '@refinitiv-ui/core/directives/template-map.js';
 /**
  * A form control element for email.
  *

package/lib/email-field/index.js

@@ -1,6 +1,6 @@
 import { __decorate } from "tslib";
-import { customElement } from '@refinitiv-ui/core/lib/decorators/custom-element.js';
-import { property } from '@refinitiv-ui/core/lib/decorators/property.js';
+import { customElement } from '@refinitiv-ui/core/decorators/custom-element.js';
+import { property } from '@refinitiv-ui/core/decorators/property.js';
 import '../icon/index.js';
 import { TextField } from '../text-field/index.js';
 /**
@@ -60,7 +60,12 @@ let EmailField = class EmailField extends TextField {
      * @returns template map
      */
     get decorateInputMap() {
-        return Object.assign(Object.assign({}, super.decorateInputMap), { 'type': 'email', 'inputmode': 'email', 'multiple': this.multiple });
+        return {
+            ...super.decorateInputMap,
+            'type': 'email',
+            'inputmode': 'email',
+            'multiple': this.multiple
+        };
     }
     /**
      * Check if input should be re-validated

package/lib/flag/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 { unsafeHTML } from '@refinitiv-ui/core/lib/directives/unsafe-html.js';
+import { customElement } from '@refinitiv-ui/core/decorators/custom-element.js';
+import { property } from '@refinitiv-ui/core/decorators/property.js';
+import { unsafeHTML } from '@refinitiv-ui/core/directives/unsafe-html.js';
 import { VERSION } from '../version.js';
 import { FlagLoader } from './utils/FlagLoader.js';
 export { preload } from './utils/FlagLoader.js';

package/lib/flag/utils/FlagLoader.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 flag SVGs, Loaded either by name from CDN or directly by URL.
  * Uses singleton pattern

package/lib/flag/utils/FlagLoader.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?:\/\//i).test(str);
 /**
  * Caches and provides flag SVGs, Loaded either by name from CDN or directly by URL.

package/lib/header/index.js

@@ -1,7 +1,7 @@
 import { __decorate } from "tslib";
 import { BasicElement, html, css } from '@refinitiv-ui/core';
-import { customElement } from '@refinitiv-ui/core/lib/decorators/custom-element.js';
-import { property } from '@refinitiv-ui/core/lib/decorators/property.js';
+import { customElement } from '@refinitiv-ui/core/decorators/custom-element.js';
+import { property } from '@refinitiv-ui/core/decorators/property.js';
 import { VERSION } from '../version.js';
 /**
  * Use to identify and separate different sections of a page.

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

@@ -1,4 +1,4 @@
-import { ColorCommonInstance } from '@refinitiv-ui/utils/lib/color.js';
+import { ColorCommonInstance } from '@refinitiv-ui/utils/color.js';
 import { interpolate } from 'd3-interpolate';
 /**
  * Check if the color is a light color

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/index.js

@@ -1,11 +1,11 @@
 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';
@@ -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;
         }
@@ -979,7 +971,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 +1007,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/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.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;
@@ -811,7 +810,6 @@ 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;
@@ -823,7 +821,7 @@ let InteractiveChart = InteractiveChart_1 = class InteractiveChart extends Respo
         // Handle update text price when mouse crosshairMove in chart
         else if (this.isNodeListElement(rowLegend)) {
             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 +887,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 +964,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/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 {
     /**