@refinitiv-ui/elements 7.0.0-next.4 → 7.0.0-next.5

package/CHANGELOG.md

@@ -3,6 +3,50 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [6.8.6](https://github.com/Refinitiv/refinitiv-ui/compare/@refinitiv-ui/elements@6.8.5...@refinitiv-ui/elements@6.8.6) (2023-06-20)
+
+
+### Bug Fixes
+
+* **calendar, datetime-picker:** prevent deselect date on calendar ([#735](https://github.com/Refinitiv/refinitiv-ui/issues/735)) ([4b0799a](https://github.com/Refinitiv/refinitiv-ui/commit/4b0799a19725cba456fa41be35de24b79df466c5))
+* **number-field:** fix Floating point Division on validate method ([#757](https://github.com/Refinitiv/refinitiv-ui/issues/757)) ([a7095ae](https://github.com/Refinitiv/refinitiv-ui/commit/a7095ae861e0948f95cc73ac68d31eb5585a54a6))
+
+
+
+
+
+## [6.8.5](https://github.com/Refinitiv/refinitiv-ui/compare/@refinitiv-ui/elements@6.8.4...@refinitiv-ui/elements@6.8.5) (2023-06-08)
+
+**Note:** Version bump only for package @refinitiv-ui/elements
+
+
+
+
+
+## [6.8.4](https://github.com/Refinitiv/refinitiv-ui/compare/@refinitiv-ui/elements@6.8.4-next.1...@refinitiv-ui/elements@6.8.4) (2023-06-07)
+
+**Note:** Version bump only for package @refinitiv-ui/elements
+
+
+
+
+
+## [6.8.4-next.1](https://github.com/Refinitiv/refinitiv-ui/compare/@refinitiv-ui/elements@6.8.4-next.0...@refinitiv-ui/elements@6.8.4-next.1) (2023-06-06)
+
+**Note:** Version bump only for package @refinitiv-ui/elements
+
+
+
+
+
+## [6.8.3](https://github.com/Refinitiv/refinitiv-ui/compare/@refinitiv-ui/elements@6.8.2...@refinitiv-ui/elements@6.8.3) (2023-06-06)
+
+**Note:** Version bump only for package @refinitiv-ui/elements
+
+
+
+
+
 ## [6.8.2](https://github.com/Refinitiv/refinitiv-ui/compare/@refinitiv-ui/elements@6.8.1...@refinitiv-ui/elements@6.8.2) (2023-05-24)
 
 

package/lib/calendar/index.js

@@ -789,16 +789,12 @@ let Calendar = class Calendar extends ControlElement {
                     values = [value];
                 }
             }
-            else if (this.values.indexOf(value) === -1) {
-                values = [value];
-            }
             else {
-                // remove range if start/end index match
-                values = [];
+                values = [value];
             }
         }
         else {
-            values = this.value === value ? [] : [value];
+            values = [value];
         }
         this.notifyValuesChange(values);
     }

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

@@ -7,7 +7,7 @@ import 'chartjs-adapter-date-fns';
 import { DatasetColors } from '../helpers/index.js';
 import '../../header/index.js';
 declare module 'chart.js' {
-    interface PluginOptionsByType<TType extends ChartType> {
+    interface PluginOptionsByType<TType extends ChartType = ChartType> {
         'ef-chart': object;
     }
 }

package/lib/chart/elements/chart.js

@@ -381,7 +381,7 @@ let Chart = class Chart extends BasicElement {
         ChartJS.defaults.scale.grid.color = (line) => {
             return line.index === 0 ? this.getComputedVariable('--zero-line-color', 'transparent') : this.getComputedVariable('--grid-line-color', 'transparent');
         };
-        if (this.config?.type === 'polarArea' || this.config?.type === 'radar') {
+        if (ChartJS.defaults.scales.radialLinear) {
             ChartJS.defaults.scales.radialLinear.ticks.showLabelBackdrop = false;
         }
     }

package/lib/chart/plugins/doughnut-center-label.d.ts

@@ -1,20 +1,20 @@
 import { Chart as ChartJS } from 'chart.js';
 import type { Plugin, ChartType, ActiveElement } from 'chart.js';
-interface CenterLabel {
+export interface CenterLabel {
     label: string;
     bold?: boolean;
 }
-interface Selected {
+export interface Selected {
     datasetIndex?: number;
     index: number;
 }
-interface CenterLabelConfig {
+export interface CenterLabelConfig {
     defaultText: CenterLabel[];
     selected: Selected;
     onRenderLabel(chart: ChartJS, chartItems: ActiveElement[]): CenterLabel[];
 }
 declare module 'chart.js' {
-    interface PluginOptionsByType<TType extends ChartType> {
+    interface PluginOptionsByType<TType extends ChartType = ChartType> {
         'centerLabel'?: CenterLabelConfig;
     }
 }

package/lib/chart/plugins/doughnut-center-label.js

@@ -175,9 +175,9 @@ const plugins = {
         }
         const selectedIndex = Number(config.selected?.index);
         const datasetIndex = Number(config.selected.datasetIndex || 0);
-        const visibleIndexes = chart.getVisibleDatasetCount() - 1;
+        const visibleIndex = chart.getVisibleDatasetCount() - 1;
         // Validate index and datasetIndex
-        if (isNaN(selectedIndex) || (isNaN(datasetIndex) || datasetIndex < 0 || datasetIndex > visibleIndexes)) {
+        if (isNaN(selectedIndex) || (isNaN(datasetIndex) || datasetIndex < 0 || datasetIndex > visibleIndex)) {
             return;
         }
         // Set selected item to the chart

package/lib/collapse/index.js

@@ -5,11 +5,9 @@ import { property } from '@refinitiv-ui/core/decorators/property.js';
 import { state } from '@refinitiv-ui/core/decorators/state.js';
 import { ref, createRef } from '@refinitiv-ui/core/directives/ref.js';
 import { VERSION } from '../version.js';
-import { preload } from '../icon/index.js';
 import '../header/index.js';
 import '../panel/index.js';
 import '../icon/index.js';
-preload('right'); /* preload calendar icons for faster loading */
 /**
  * Allows users to hide non-critical information
  * or areas of the screen, maximizing the amount of real estate

package/lib/configuration/custom-elements.json

@@ -0,0 +1,15 @@
+{
+  "version": "experimental",
+  "tags": [
+    {
+      "name": "ef-configuration",
+      "properties": [
+        {
+          "name": "config",
+          "description": "Configuration data",
+          "default": "\"DEFAULT_CONFIG\""
+        }
+      ]
+    }
+  ]
+}

package/lib/configuration/custom-elements.md

@@ -0,0 +1,7 @@
+# ef-configuration
+
+## Properties
+
+| Property | Default          | Description        |
+|----------|------------------|--------------------|
+| `config` | "DEFAULT_CONFIG" | Configuration data |

package/lib/configuration/elements/configuration.d.ts

@@ -0,0 +1,44 @@
+import { JSXInterface } from '../../jsx';
+import { BasicElement, TemplateResult } from '@refinitiv-ui/core';
+import { type Config } from '../helpers/types.js';
+export declare class Configuration extends BasicElement {
+    /**
+     * Element version number
+     * @returns version number
+     */
+    static get version(): string;
+    /**
+     * Render slot as light DOM
+     * @returns Element
+     */
+    protected createRenderRoot(): this;
+    /**
+     * Configuration data
+     */
+    config: Config;
+    /**
+     * A `TemplateResult` that will be used
+     * to render the updated internal template.
+     * @return Render template
+     */
+    protected render(): TemplateResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'ef-configuration': Configuration;
+    }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'ef-configuration': Configuration;
+  }
+
+  namespace JSX {
+    interface IntrinsicElements {
+      'ef-configuration': Partial<Configuration> | JSXInterface.HTMLAttributes<Configuration>;
+    }
+  }
+}
+
+export {};

package/lib/configuration/elements/configuration.js

@@ -0,0 +1,46 @@
+import { __decorate } from "tslib";
+import { BasicElement, html } from '@refinitiv-ui/core';
+import { customElement } from '@refinitiv-ui/core/decorators/custom-element.js';
+import { state } from '@refinitiv-ui/core/decorators/state.js';
+import { VERSION } from '../../version.js';
+import { efConfig, DEFAULT_CONFIG } from '../helpers/context.js';
+import { provide } from '@lit-labs/context';
+let Configuration = class Configuration extends BasicElement {
+    constructor() {
+        super(...arguments);
+        /**
+         * Configuration data
+         */
+        this.config = DEFAULT_CONFIG;
+    }
+    /**
+     * Element version number
+     * @returns version number
+     */
+    static get version() {
+        return VERSION;
+    }
+    /**
+     * Render slot as light DOM
+     * @returns Element
+     */
+    createRenderRoot() {
+        return this;
+    }
+    /**
+     * A `TemplateResult` that will be used
+     * to render the updated internal template.
+     * @return Render template
+     */
+    render() {
+        return html `<slot></slot>`;
+    }
+};
+__decorate([
+    provide({ context: efConfig }),
+    state()
+], Configuration.prototype, "config", void 0);
+Configuration = __decorate([
+    customElement('ef-configuration', { theme: false })
+], Configuration);
+export { Configuration };

package/lib/configuration/helpers/context.d.ts

@@ -0,0 +1,5 @@
+import type { Config } from './types.js';
+export declare const DEFAULT_CONFIG: Config;
+export declare const efConfig: {
+    __context__: Config;
+};

package/lib/configuration/helpers/context.js

@@ -0,0 +1,3 @@
+import { createContext } from '@lit-labs/context';
+export const DEFAULT_CONFIG = { icon: { map: {} } };
+export const efConfig = createContext('ef-configuration');

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

@@ -0,0 +1,9 @@
+export type IconMap = {
+    [key: string]: string;
+};
+export type ConfigIcon = {
+    map: IconMap;
+};
+export type Config = {
+    icon: ConfigIcon;
+};

package/lib/configuration/helpers/types.js

@@ -0,0 +1 @@
+export {};

package/lib/configuration/index.d.ts

@@ -0,0 +1,3 @@
+export * from './elements/configuration.js';
+export { efConfig } from './helpers/context.js';
+export type { Config } from './helpers/types.js';

package/lib/configuration/index.js

@@ -0,0 +1,2 @@
+export * from './elements/configuration.js';
+export { efConfig } from './helpers/context.js';

package/lib/datetime-picker/index.js

@@ -16,8 +16,6 @@ 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/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 */
 const POPUP_POSITION = ['bottom-start', 'top-start', 'bottom-end', 'top-end', 'bottom-middle', 'top-middle'];
 const INPUT_FORMAT = {
     DATE: 'dd-MMM-yyyy',

package/lib/flag/index.d.ts

@@ -22,20 +22,6 @@ export declare class Flag extends BasicElement {
      */
     get flag(): string | null;
     set flag(value: string | null);
-    private _src;
-    /**
-     * Src location of an svg flag.
-     * @ignore
-     * @example https://cdn.io/flags/gb.svg
-     * @deprecated Use `flag` instead
-     * @default null
-     */
-    get src(): string | null;
-    /**
-      * @ignore
-      * @param value Location of an svg
-      */
-    set src(value: string | null);
     private _template;
     /**
      * The flag template to render

package/lib/flag/index.js

@@ -53,32 +53,6 @@ let Flag = class Flag extends BasicElement {
             void this.setFlagSrc();
         }
     }
-    /**
-     * Src location of an svg flag.
-     * @ignore
-     * @example https://cdn.io/flags/gb.svg
-     * @deprecated Use `flag` instead
-     * @default null
-     */
-    get src() {
-        return this._src;
-    }
-    /**
-      * @ignore
-      * @param value Location of an svg
-      */
-    set src(value) {
-        if (this.src !== value) {
-            this.deferFlagReady();
-            this._src = value;
-            if (value) {
-                void this.loadAndRenderFlag(value);
-            }
-            else {
-                this.clearFlag();
-            }
-        }
-    }
     /**
      * The flag template to render
      */
@@ -95,7 +69,6 @@ let Flag = class Flag extends BasicElement {
     constructor() {
         super();
         this._flag = null;
-        this._src = null;
         this._template = EmptyTemplate;
         this.flagReady = new Deferred();
         // `flagReady` resolves at this stage so that `updateComplete` would be resolvable
@@ -132,7 +105,13 @@ let Flag = class Flag extends BasicElement {
      */
     async setFlagSrc() {
         // keep `src` in-sync with `flag` so that flag svg would be resolved after every `flag` update
-        this.src = this.flag ? await FlagLoader.getSrc(this.flag) : this.flag;
+        const value = this.flag ? await FlagLoader.getSrc(this.flag) : this.flag;
+        if (value) {
+            await this.loadAndRenderFlag(value);
+        }
+        else {
+            this.clearFlag();
+        }
     }
     /**
      * Tries to load an flag from the url provided
@@ -176,9 +155,6 @@ let Flag = class Flag extends BasicElement {
 __decorate([
     property({ type: String })
 ], Flag.prototype, "flag", null);
-__decorate([
-    property({ type: String })
-], Flag.prototype, "src", null);
 Flag = __decorate([
     customElement('ef-flag')
 ], Flag);

package/lib/icon/index.d.ts

@@ -1,12 +1,17 @@
 import { JSXInterface } from '../jsx';
 import { BasicElement, CSSResultGroup, TemplateResult, PropertyValues } from '@refinitiv-ui/core';
-export { preload } from './utils/IconLoader.js';
+import { type Config } from '../configuration/index.js';
 export declare class Icon extends BasicElement {
     /**
      * Element version number
      * @returns version number
      */
     static get version(): string;
+    /**
+     * Icon map from ef-configuration
+     * @ignore
+     */
+    config?: Config;
     /**
      * A `CSSResultGroup` that will be used
      * to style the host, slotted children
@@ -17,25 +22,11 @@ export declare class Icon extends BasicElement {
     private _icon;
     /**
      * Name of a known icon to render or URL of SVG icon.
-     * @example home | https://cdn.io/icons/home.svg
+     * @example heart | https://cdn.io/icons/heart.svg
      * @default null
      */
     get icon(): string | null;
     set icon(value: string | null);
-    private _src;
-    /**
-     * Src location of an svg icon.
-     * @ignore
-     * @example https://cdn.io/icons/home.svg
-     * @deprecated Use `icon` instead
-     * @default null
-     */
-    get src(): string | null;
-    /**
-      * @ignore
-      * @param value Location of an svg
-      */
-    set src(value: string | null);
     private _template;
     /**
      * The icon template to render
@@ -49,6 +40,11 @@ export declare class Icon extends BasicElement {
      */
     private iconReady;
     constructor();
+    /**
+     * Check if the icon map configuration has content
+     * @returns icon map if exists
+     */
+    private get iconMap();
     /**
      * Called after the component is first rendered
      * @param changedProperties Properties which have changed
@@ -62,10 +58,15 @@ export declare class Icon extends BasicElement {
      */
     private deferIconReady;
     /**
-     * Helper method, used to set the icon src.
+     * Check if the icon is valid to render
+     * @returns false if icon value or icon map value is invalid
+     */
+    private isIconValid;
+    /**
+     * Update the icon renderer
      * @returns {void}
      */
-    private setIconSrc;
+    private updateRenderer;
     /**
      * Tries to load an icon from the url provided
      * and the renders this into the icon template.
@@ -73,6 +74,13 @@ export declare class Icon extends BasicElement {
      * @returns {void}
      */
     private loadAndRenderIcon;
+    /**
+     * Tries to load get an icon from the sprite url provided
+     * and the renders this into the icon template.
+     * @param iconName Name of the svg icon.
+     * @returns {void}
+     */
+    private loadAndRenderSpriteIcon;
     /**
      * Get and cache CDN prefix
      * This is a private URL which is set in the theme

package/lib/icon/index.js

@@ -3,10 +3,12 @@ import { BasicElement, svg, css } from '@refinitiv-ui/core';
 import { customElement } from '@refinitiv-ui/core/decorators/custom-element.js';
 import { property } from '@refinitiv-ui/core/decorators/property.js';
 import { unsafeSVG } from '@refinitiv-ui/core/directives/unsafe-svg.js';
-import { Deferred } from '@refinitiv-ui/utils/loader.js';
+import { Deferred, isUrl, isBase64svg } from '@refinitiv-ui/utils/loader.js';
 import { VERSION } from '../version.js';
 import { IconLoader } from './utils/IconLoader.js';
-export { preload } from './utils/IconLoader.js';
+import { consume } from '@lit-labs/context';
+import { efConfig } from '../configuration/index.js';
+import { SpriteLoader } from './utils/SpriteLoader.js';
 const EmptyTemplate = svg ``;
 /**
  * Cache for reusing SVG template results across multiple icons.
@@ -44,7 +46,7 @@ let Icon = class Icon extends BasicElement {
     }
     /**
      * Name of a known icon to render or URL of SVG icon.
-     * @example home | https://cdn.io/icons/home.svg
+     * @example heart | https://cdn.io/icons/heart.svg
      * @default null
      */
     get icon() {
@@ -55,36 +57,10 @@ let Icon = class Icon extends BasicElement {
         if (oldValue !== value) {
             this.deferIconReady();
             this._icon = value;
-            void this.setIconSrc();
+            requestAnimationFrame(() => this.updateRenderer());
             this.requestUpdate('icon', oldValue);
         }
     }
-    /**
-     * Src location of an svg icon.
-     * @ignore
-     * @example https://cdn.io/icons/home.svg
-     * @deprecated Use `icon` instead
-     * @default null
-     */
-    get src() {
-        return this._src;
-    }
-    /**
-      * @ignore
-      * @param value Location of an svg
-      */
-    set src(value) {
-        if (this.src !== value) {
-            this.deferIconReady();
-            this._src = value;
-            if (value) {
-                void this.loadAndRenderIcon(value);
-            }
-            else {
-                this.clearIcon();
-            }
-        }
-    }
     /**
      * The icon template to render
      */
@@ -101,13 +77,19 @@ let Icon = class Icon extends BasicElement {
     constructor() {
         super();
         this._icon = null;
-        this._src = null;
         this._template = EmptyTemplate;
         this.iconReady = new Deferred();
         // `iconReady` resolves at this stage so that `updateComplete` would be resolvable
         // even in the case that both `icon` and `src` attribute are missing.
         this.iconReady.resolve();
     }
+    /**
+     * Check if the icon map configuration has content
+     * @returns icon map if exists
+     */
+    get iconMap() {
+        return this.icon && this.config?.icon.map[this.icon] || null;
+    }
     /**
      * Called after the component is first rendered
      * @param changedProperties Properties which have changed
@@ -133,12 +115,36 @@ let Icon = class Icon extends BasicElement {
         this.iconReady = new Deferred();
     }
     /**
-     * Helper method, used to set the icon src.
+     * Check if the icon is valid to render
+     * @returns false if icon value or icon map value is invalid
+     */
+    isIconValid() {
+        if (!this._icon) {
+            return false;
+        }
+        if (this.iconMap && (!isBase64svg(this.iconMap) && !isUrl(this.iconMap))) {
+            return false;
+        }
+        return true;
+    }
+    /**
+     * Update the icon renderer
      * @returns {void}
      */
-    async setIconSrc() {
-        // keep `src` in-sync with `icon` so that icon svg would be resolved after every `icon` update
-        this.src = this.icon ? await IconLoader.getSrc(this.icon) : this.icon;
+    updateRenderer() {
+        if (!this.isIconValid()) {
+            return this.clearIcon();
+        }
+        const iconProperty = this._icon;
+        if (this.iconMap) {
+            void this.loadAndRenderIcon(this.iconMap);
+        }
+        else if (isUrl(iconProperty) || IconLoader.isPrefixSet) {
+            void this.loadAndRenderIcon(iconProperty);
+        }
+        else {
+            void this.loadAndRenderSpriteIcon(iconProperty);
+        }
     }
     /**
      * Tries to load an icon from the url provided
@@ -155,6 +161,21 @@ let Icon = class Icon extends BasicElement {
         }
         this.template = await iconTemplateCacheItem;
     }
+    /**
+     * Tries to load get an icon from the sprite url provided
+     * and the renders this into the icon template.
+     * @param iconName Name of the svg icon.
+     * @returns {void}
+     */
+    async loadAndRenderSpriteIcon(iconName) {
+        const iconTemplateCacheItem = iconTemplateCache.get(iconName);
+        if (!iconTemplateCacheItem) {
+            iconTemplateCache.set(iconName, SpriteLoader.loadSpriteSVG(iconName)
+                .then(body => svg `${unsafeSVG(body)}`));
+            return this.loadAndRenderIcon(iconName); // Load again and await cache result
+        }
+        this.template = await iconTemplateCacheItem;
+    }
     /**
      * Get and cache CDN prefix
      * This is a private URL which is set in the theme
@@ -163,10 +184,13 @@ let Icon = class Icon extends BasicElement {
      */
     setPrefix() {
         if (!IconLoader.isPrefixSet) {
-            const CDNPrefix = this.getComputedVariable('--cdn-prefix')
-                .replace(/^('|")|('|")$/g, '');
+            const CDNPrefix = this.getComputedVariable('--cdn-prefix');
             IconLoader.setCdnPrefix(CDNPrefix);
         }
+        if (!SpriteLoader.isPrefixSet) {
+            const CDNSpritePrefix = this.getComputedVariable('--cdn-sprite-prefix');
+            SpriteLoader.setCdnPrefix(CDNSpritePrefix);
+        }
     }
     /**
      * Clears SVG body from the icon template
@@ -184,12 +208,12 @@ let Icon = class Icon extends BasicElement {
         return this.template;
     }
 };
+__decorate([
+    consume({ context: efConfig, subscribe: true })
+], Icon.prototype, "config", void 0);
 __decorate([
     property({ type: String, reflect: true })
 ], Icon.prototype, "icon", null);
-__decorate([
-    property({ type: String })
-], Icon.prototype, "src", null);
 Icon = __decorate([
     customElement('ef-icon')
 ], Icon);

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

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

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

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

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

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

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

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

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

@@ -7,11 +7,3 @@ declare class IconLoader extends SVGLoader {
 }
 declare const iconLoaderInstance: IconLoader;
 export { iconLoaderInstance as IconLoader };
-/**
- * Helper function to preload set of icons.
- * It could help to reduce icon loading delay when ef-icon has a known set of icons that it can use.
- * @param attrs - list of arguments, representing icons.
- * Could be icon names, complete icon URLs or mix of both.
- * @returns Array of promises, which will be resolved with SVG bodies.
- */
-export declare const preload: (...attrs: string[]) => Promise<string | undefined>[];

package/lib/icon/utils/IconLoader.js

@@ -7,13 +7,3 @@ class IconLoader extends SVGLoader {
 }
 const iconLoaderInstance = new IconLoader();
 export { iconLoaderInstance as IconLoader };
-/**
- * Helper function to preload set of icons.
- * It could help to reduce icon loading delay when ef-icon has a known set of icons that it can use.
- * @param attrs - list of arguments, representing icons.
- * Could be icon names, complete icon URLs or mix of both.
- * @returns Array of promises, which will be resolved with SVG bodies.
- */
-export const preload = (...attrs) => {
-    return attrs.map(icon => iconLoaderInstance.loadSVG(icon));
-};

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

@@ -0,0 +1,22 @@
+import { SVGLoader } from '@refinitiv-ui/utils/loader.js';
+/**
+ * Caches and provides sprite icon SVG
+ * Uses singleton pattern
+ */
+declare class SpriteLoader extends SVGLoader {
+    getSrc(): Promise<string>;
+    /**
+     * Load and Create DOM sprite SVG
+     * @returns returns the DOM sprite SVG
+     */
+    private loadSprite;
+    /**
+     * Load and cache the DOM sprite svg
+     * Get an svg fragment of DOM sprite svg
+     * @param iconName Name of svg to load
+     * @returns returns the svg fragment body
+     */
+    loadSpriteSVG(iconName: string): Promise<string | undefined>;
+}
+declare const instance: SpriteLoader;
+export { instance as SpriteLoader };

package/lib/icon/utils/SpriteLoader.js

@@ -0,0 +1,38 @@
+import { SVGLoader } from '@refinitiv-ui/utils/loader.js';
+let spriteCache;
+/**
+ * Caches and provides sprite icon SVG
+ * Uses singleton pattern
+ */
+class SpriteLoader extends SVGLoader {
+    async getSrc() {
+        return await this.getCdnPrefix();
+    }
+    /**
+     * Load and Create DOM sprite SVG
+     * @returns returns the DOM sprite SVG
+     */
+    async loadSprite() {
+        const sprite = await this.loadSVG('sprite/icons');
+        if (!sprite) {
+            throw new Error("SpriteLoader: couldn't load SVG sprite source");
+        }
+        return new DOMParser().parseFromString(sprite, 'image/svg+xml');
+    }
+    /**
+     * Load and cache the DOM sprite svg
+     * Get an svg fragment of DOM sprite svg
+     * @param iconName Name of svg to load
+     * @returns returns the svg fragment body
+     */
+    async loadSpriteSVG(iconName) {
+        if (!spriteCache) {
+            spriteCache = this.loadSprite();
+        }
+        const sprite = await spriteCache;
+        const icon = sprite.getElementById(iconName);
+        return icon ? icon.outerHTML : undefined;
+    }
+}
+const instance = new SpriteLoader();
+export { instance as SpriteLoader };

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

@@ -36,12 +36,6 @@ export declare class InteractiveChart extends ResponsiveElement {
      * Hide jump to latest data button
      */
     disabledJumpButton: boolean;
-    /**
-    * @deprecated `legendstyle` attribute is deprecated, use `legend-style` instead.
-    * @ignore
-    * Set legend style i.e. `horizontal`, `vertical`. Default is `vertical`.
-    **/
-    deprecatedLegendStyle: LegendStyle | undefined;
     /**
      * Set legend style i.e. `horizontal`, `vertical`.
      * @param {LegendStyle} value legend style value
@@ -50,11 +44,6 @@ export declare class InteractiveChart extends ResponsiveElement {
      **/
     set legendStyle(value: LegendStyle);
     get legendStyle(): LegendStyle;
-    /**
-     * Deprecation noticed, used to display a warning message
-     * when deprecated features are used.
-    */
-    private deprecationNotice;
     /**
      * @ignore
      * Array of series instances in chart

package/lib/interactive-chart/index.js

@@ -1,6 +1,6 @@
 var InteractiveChart_1;
 import { __decorate } from "tslib";
-import { ResponsiveElement, html, css, DeprecationNotice } from '@refinitiv-ui/core';
+import { ResponsiveElement, html, css } from '@refinitiv-ui/core';
 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';
@@ -34,11 +34,6 @@ let InteractiveChart = InteractiveChart_1 = class InteractiveChart extends Respo
          * Hide jump to latest data button
          */
         this.disabledJumpButton = false;
-        /**
-         * Deprecation noticed, used to display a warning message
-         * when deprecated features are used.
-        */
-        this.deprecationNotice = new DeprecationNotice('`legendstyle` attribute and property are deprecated. Use `legend-style` for attribute and `legendStyle` property instead.');
         /**
          * @ignore
          * Array of series instances in chart
@@ -139,7 +134,7 @@ let InteractiveChart = InteractiveChart_1 = class InteractiveChart extends Respo
         }
     }
     get legendStyle() {
-        return this._legendStyle || this.deprecatedLegendStyle || LegendStyle.vertical;
+        return this._legendStyle || LegendStyle.vertical;
     }
     /**
      * @returns return config of property component
@@ -166,11 +161,8 @@ let InteractiveChart = InteractiveChart_1 = class InteractiveChart extends Respo
         if (changedProperties.has('disabledJumpButton')) {
             this.onJumpButtonChange();
         }
-        if (changedProperties.has('deprecatedLegendStyle') || changedProperties.has('legend-style')) {
-            if (changedProperties.has('deprecatedLegendStyle')) {
-                this.deprecationNotice.show();
-            }
-            const oldLegendStyle = (changedProperties.get('legend-style') || changedProperties.get('deprecatedLegendStyle'));
+        if (changedProperties.has('legend-style')) {
+            const oldLegendStyle = changedProperties.get('legend-style');
             this.onLegendStyleChange(this.legendStyle, oldLegendStyle);
         }
     }
@@ -1065,9 +1057,6 @@ __decorate([
 __decorate([
     property({ type: Boolean, reflect: true, attribute: 'disabled-jump-button' })
 ], InteractiveChart.prototype, "disabledJumpButton", void 0);
-__decorate([
-    property({ type: String, attribute: 'legendstyle' })
-], InteractiveChart.prototype, "deprecatedLegendStyle", void 0);
 __decorate([
     property({ type: String, attribute: 'legend-style' })
 ], InteractiveChart.prototype, "legendStyle", null);

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

@@ -216,6 +216,12 @@ export declare class NumberField extends FormFieldElement {
      * @returns step base
      */
     private get stepBase();
+    /**
+     * Count precision number
+     * @param number value to count
+     * @returns precision number
+     */
+    private getPrecision;
     /**
      * Check if value subtracted from the step base is not an integral multiple of the allowed value step
      * @param value value to check

package/lib/number-field/index.js

@@ -447,6 +447,25 @@ let NumberField = class NumberField extends FormFieldElement {
         }
         return 0;
     }
+    /**
+     * Count precision number
+     * @param number value to count
+     * @returns precision number
+     */
+    getPrecision(number) {
+        const getDecimalPrecision = (number) => {
+            const [wholeNumber, decimalNumber] = number.split('.');
+            return (wholeNumber.length ?? 0) + (decimalNumber?.length ?? 0);
+        };
+        const numberString = number.toString();
+        // Check if the number is in exponential notation.
+        if (numberString.includes('e')) {
+            const [mantissa, exponent] = numberString.split('e');
+            const precision = getDecimalPrecision(mantissa) + Math.abs(Number(exponent));
+            return precision;
+        }
+        return getDecimalPrecision(numberString);
+    }
     /**
      * Check if value subtracted from the step base is not an integral multiple of the allowed value step
      * @param value value to check
@@ -457,7 +476,12 @@ let NumberField = class NumberField extends FormFieldElement {
             return true;
         }
         const decimals = Math.max(this.getDecimalPlace(value), this.stepDecimals);
-        const division = (this.stepBase - value) / this.getAllowedValueStep();
+        const dividend = this.stepBase - value;
+        const divisor = this.getAllowedValueStep();
+        // calculate precision to prevent Floating point precision issue.
+        // e.g. 1111111/0.00001 would not result in 111111100000 as expected.
+        const precision = this.getPrecision(dividend) + this.getPrecision(divisor);
+        const division = parseFloat((dividend / divisor).toPrecision(precision));
         const number = decimals ? this.toFixedNumber(division, decimals) : division;
         // (2 - 1.01) % 0.33 needs to give 0. So we cannot use % directly as it is intended for integers
         return number % 1 === 0;

package/lib/password-field/index.js

@@ -2,12 +2,10 @@ import { __decorate } from "tslib";
 import { html } from '@refinitiv-ui/core';
 import { customElement } from '@refinitiv-ui/core/decorators/custom-element.js';
 import { state } from '@refinitiv-ui/core/decorators/state.js';
-import { preload } from '../icon/index.js';
 import { TextField } from '../text-field/index.js';
 import '../icon/index.js';
 import '@refinitiv-ui/phrasebook/locale/en/password-field.js';
 import { translate } from '@refinitiv-ui/translate';
-let isEyeOffPreloadRequested = false;
 /**
  * A form control element for password.
  *
@@ -58,10 +56,6 @@ let PasswordField = class PasswordField extends TextField {
      */
     firstUpdated(changedProperties) {
         super.firstUpdated(changedProperties);
-        if (!isEyeOffPreloadRequested) {
-            preload('eye-off');
-            isEyeOffPreloadRequested = true;
-        }
     }
     /**
      * Decorate `<input>` element with common properties extended from text-field:

package/lib/tree/elements/tree-item.js

@@ -4,10 +4,8 @@ import { customElement } from '@refinitiv-ui/core/decorators/custom-element.js';
 import { property } from '@refinitiv-ui/core/decorators/property.js';
 import { VERSION } from '../../version.js';
 import '../../icon/index.js';
-import { preload } from '../../icon/index.js';
 import '../../checkbox/index.js';
 import { CheckedState } from '../managers/tree-manager.js';
-preload('right');
 const emptyTemplate = html ``;
 /**
  * Displays a tree list item.

package/lib/version.js

@@ -1 +1 @@
-export const VERSION = '7.0.0-next.4';
+export const VERSION = '7.0.0-next.5';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@refinitiv-ui/elements",
-  "version": "7.0.0-next.4",
+  "version": "7.0.0-next.5",
   "description": "Element Framework Elements",
   "author": "LSEG",
   "license": "Apache-2.0",
@@ -107,6 +107,7 @@
     "./combo-box/themes/halo/light": "./lib/combo-box/themes/halo/light/index.js",
     "./combo-box/themes/solar/charcoal": "./lib/combo-box/themes/solar/charcoal/index.js",
     "./combo-box/themes/solar/pearl": "./lib/combo-box/themes/solar/pearl/index.js",
+    "./configuration": "./lib/configuration/index.js",
     "./counter": "./lib/counter/index.js",
     "./counter/themes/halo/dark": "./lib/counter/themes/halo/dark/index.js",
     "./counter/themes/halo/light": "./lib/counter/themes/halo/light/index.js",
@@ -338,9 +339,10 @@
     "version": "node ../../scripts/version/index.mjs"
   },
   "dependencies": {
+    "@lit-labs/context": "^0.3.1",
     "@refinitiv-ui/browser-sparkline": "1.1.8",
-    "@refinitiv-ui/halo-theme": "^7.0.0-next.2",
-    "@refinitiv-ui/solar-theme": "^7.0.0-next.2",
+    "@refinitiv-ui/halo-theme": "^7.0.0-next.3",
+    "@refinitiv-ui/solar-theme": "^7.0.0-next.3",
     "chart.js": "^4.3.0",
     "chartjs-adapter-date-fns": "^3.0.0",
     "d3-interpolate": "^3.0.1",
@@ -349,24 +351,24 @@
     "tslib": "^2.3.1"
   },
   "devDependencies": {
-    "@refinitiv-ui/core": "^7.0.0-next.1",
-    "@refinitiv-ui/demo-block": "^7.0.0-next.2",
-    "@refinitiv-ui/i18n": "^7.0.0-next.1",
-    "@refinitiv-ui/phrasebook": "^7.0.0-next.1",
-    "@refinitiv-ui/test-helpers": "^7.0.0-next.1",
-    "@refinitiv-ui/translate": "^7.0.0-next.2",
-    "@refinitiv-ui/utils": "^7.0.0-next.1",
+    "@refinitiv-ui/core": "^7.0.0-next.2",
+    "@refinitiv-ui/demo-block": "^7.0.0-next.3",
+    "@refinitiv-ui/i18n": "^7.0.0-next.2",
+    "@refinitiv-ui/phrasebook": "^7.0.0-next.2",
+    "@refinitiv-ui/test-helpers": "^7.0.0-next.2",
+    "@refinitiv-ui/translate": "^7.0.0-next.3",
+    "@refinitiv-ui/utils": "^7.0.0-next.2",
     "@types/d3-interpolate": "^3.0.1"
   },
   "peerDependencies": {
-    "@refinitiv-ui/core": "^7.0.0-next.1",
-    "@refinitiv-ui/i18n": "^7.0.0-next.1",
-    "@refinitiv-ui/phrasebook": "^7.0.0-next.1",
-    "@refinitiv-ui/translate": "^7.0.0-next.2",
-    "@refinitiv-ui/utils": "^7.0.0-next.1"
+    "@refinitiv-ui/core": "^7.0.0-next.2",
+    "@refinitiv-ui/i18n": "^7.0.0-next.2",
+    "@refinitiv-ui/phrasebook": "^7.0.0-next.2",
+    "@refinitiv-ui/translate": "^7.0.0-next.3",
+    "@refinitiv-ui/utils": "^7.0.0-next.2"
   },
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "02dbb152a8c6e4801ef6f5a7f1892eb01a0564f5"
+  "gitHead": "06280dbb2701c7c126651b796a327a51a109d970"
 }