@refinitiv-ui/elements 6.18.5 → 6.19.0

package/CHANGELOG.md

@@ -3,6 +3,16 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [6.19.0](https://github.com/Refinitiv/refinitiv-ui/compare/@refinitiv-ui/elements@6.18.6...@refinitiv-ui/elements@6.19.0) (2025-04-23)
+
+### Features
+
+- **icon:** add icon sprites ([#1274](https://github.com/Refinitiv/refinitiv-ui/issues/1274)) ([be7f5d7](https://github.com/Refinitiv/refinitiv-ui/commit/be7f5d71b5e0c071eee08c01c9bfc1c9cb146f53))
+
+## [6.18.6](https://github.com/Refinitiv/refinitiv-ui/compare/@refinitiv-ui/elements@6.18.5...@refinitiv-ui/elements@6.18.6) (2024-11-14)
+
+**Note:** Version bump only for package @refinitiv-ui/elements
+
 ## [6.18.5](https://github.com/Refinitiv/refinitiv-ui/compare/@refinitiv-ui/elements@6.18.4...@refinitiv-ui/elements@6.18.5) (2024-09-23)
 
 ### Bug Fixes

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

@@ -1,3 +1,3 @@
 import '@refinitiv-ui/elements/header/themes/halo/dark';
 import '@refinitiv-ui/elements/layout/themes/halo/dark';
-dispatchEvent(new CustomEvent('ef.customStyles.define', { detail: { name: 'ef-chart', styles: ':host{font-size:12px;--grid-line-color:rgba(38, 38, 38, 0.5);--zero-line-color:rgba(38, 38, 38, 0.5);--animation-duration:1000;--line-width:2px;--line-tension:0;--multi-dataset-border-color:#1A1A1A;--tooltip-background-color:rgba(204, 204, 204, 0.9);--tooltip-title-color:#0D0D0D;--tooltip-body-color:#0D0D0D;--tooltip-border-radius:0px;--tooltip-caret-size:7px;--tooltip-padding-x:7px;--tooltip-padding-y:5px;--tooltip-title-spacing:0;--legend-key-box-width:4px;--chart-color-1:#6678FF;--chart-color-2:#FFFFFF;--chart-color-3:#FFC800;--chart-color-4:#9064CD;--chart-color-5:#00D0D4;--chart-color-6:#FF5000;--chart-color-7:#00C389;--chart-color-8:#EA2E6C;--tooltip-background-color:#FFFFFF;--tooltip-title-color:#0D0D0D;--tooltip-body-color:#0D0D0D;--tooltip-padding-x:8px;--tooltip-padding-y:4px;--chart-color-1:#6678FF;--chart-color-2:#FFFFFF;--chart-color-3:#FFC800;--chart-color-4:#9064CD;--chart-color-5:#00D0D4;--chart-color-6:#FF5000;--chart-color-7:#00C389;--chart-color-8:#EA2E6C;--chart-color-9:#999999;--chart-color-10:#3BBAFF;--chart-color-11:#198C8C;--chart-color-12:#C36241;--chart-color-13:#CCD2FF;--chart-color-14:#808080;--chart-color-15:#FFDE66;--chart-color-16:#BCA2E1;--chart-color-17:#59DFE1;--chart-color-18:#FF9666;--chart-color-19:#6CEFC8;--chart-color-20:#F281A7;--chart-color-21:#CCCCCC;--chart-color-22:#89D5FF;--chart-color-23:#75BABA;--chart-color-24:#DBA08D;--chart-color-25:#F6ABC4}' }}));
+dispatchEvent(new CustomEvent('ef.customStyles.define', { detail: { name: 'ef-chart', styles: ':host{font-size:12px;--grid-line-color:rgba(38, 38, 38, 0.5);--zero-line-color:rgba(38, 38, 38, 0.5);--animation-duration:1000;--line-width:2px;--line-tension:0;--multi-dataset-border-color:#1A1A1A;--tooltip-background-color:rgba(204, 204, 204, 0.9);--tooltip-title-color:#0D0D0D;--tooltip-body-color:#0D0D0D;--tooltip-border-radius:0px;--tooltip-caret-size:7px;--tooltip-padding-x:7px;--tooltip-padding-y:5px;--tooltip-title-spacing:0;--legend-key-box-width:4px;--chart-color-1:#6678FF;--chart-color-2:#E6E6E6;--chart-color-3:#FFC800;--chart-color-4:#9064CD;--chart-color-5:#00D0D4;--chart-color-6:#FF5000;--chart-color-7:#00C389;--chart-color-8:#EA2E6C;--tooltip-background-color:#FFFFFF;--tooltip-title-color:#0D0D0D;--tooltip-body-color:#0D0D0D;--tooltip-padding-x:8px;--tooltip-padding-y:4px;--chart-color-1:#6678FF;--chart-color-2:#E6E6E6;--chart-color-3:#FFC800;--chart-color-4:#9064CD;--chart-color-5:#00D0D4;--chart-color-6:#FF5000;--chart-color-7:#00C389;--chart-color-8:#EA2E6C;--chart-color-9:#999999;--chart-color-10:#3BBAFF;--chart-color-11:#198C8C;--chart-color-12:#C36241;--chart-color-13:#CCD2FF;--chart-color-14:#808080;--chart-color-15:#FFDE66;--chart-color-16:#BCA2E1;--chart-color-17:#59DFE1;--chart-color-18:#FF9666;--chart-color-19:#6CEFC8;--chart-color-20:#F281A7;--chart-color-21:#CCCCCC;--chart-color-22:#89D5FF;--chart-color-23:#75BABA;--chart-color-24:#DBA08D;--chart-color-25:#F6ABC4}' }}));

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 { createRef, ref } from '@refinitiv-ui/core/directives/ref.js';
 import '../header/index.js';
-import { preload } from '../icon/index.js';
 import '../icon/index.js';
 import '../panel/index.js';
 import { VERSION } from '../version.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/datetime-picker/index.js

@@ -11,7 +11,6 @@ import { TranslatePropertyKey, getLocale, translate } from '@refinitiv-ui/transl
 import { DateFormat, DateTimeFormat, addMonths, format, isAfter, isBefore, isValidDate, isValidDateTime, isWeekend, parse, subMonths } from '@refinitiv-ui/utils/date.js';
 import '../calendar/index.js';
 import '../icon/index.js';
-import { preload } from '../icon/index.js';
 import '../overlay/index.js';
 import '../text-field/index.js';
 import '../time-picker/index.js';
@@ -19,7 +18,6 @@ import { VERSION } from '../version.js';
 import { CALENDAR_FROM_ID, CALENDAR_ID, CALENDAR_TO_ID, INPUT_FORMAT, INPUT_FROM_ID, INPUT_ID, INPUT_TO_ID, POPUP_POSITION, TIMEPICKER_FROM_ID, TIMEPICKER_ID, TIMEPICKER_TO_ID, TRANSLATION_KEYS } from './constants.js';
 import { getDateFNSLocale } from './locales.js';
 import { DateTimeSegment, formatToView, getCurrentTime } from './utils.js';
-preload('calendar', 'down', 'left', 'right'); /* preload calendar icons for faster loading */
 /**
  * Control to pick date and time
  *

package/lib/flag/index.js

@@ -15,7 +15,7 @@ let Flag = class Flag extends BasicElement {
          * Deprecation notice displays a warning message
          * when deprecated features are used.
          */
-        this.deprecationNotice = new DeprecationNotice('`src` attribute and property are deprecated. Use `flag` for attribute and property instead.');
+        this.deprecationNotice = new DeprecationNotice('`src` attribute and property are deprecated. Use `flag` attribute and property instead.');
         this._src = null;
         this._template = EmptyTemplate;
     }

package/lib/icon/index.d.ts

@@ -1,7 +1,15 @@
 import { JSXInterface } from '../jsx';
-import { BasicElement, CSSResultGroup, PropertyValues, TemplateResult } from '@refinitiv-ui/core';
+import { BasicElement, CSSResultGroup, PropertyValues, SVGTemplateResult, TemplateResult } from '@refinitiv-ui/core';
 import type { Config } from '../configuration/index.js';
+export { IconLoader } from './utils/IconLoader.js';
+export { SpriteLoader } from './utils/SpriteLoader.js';
 export { preload } from './utils/IconLoader.js';
+/**
+ * Cache for reusing SVG template results across multiple icons.
+ * Reusing these templates increases performance dramatically when many icons are rendered.
+ * As the cache key is an absolute URL, we can assume no clashes will occur.
+ */
+export declare const iconTemplateCache: Map<string, Promise<SVGTemplateResult>>;
 export declare class Icon extends BasicElement {
     /**
      * Element version number
@@ -53,6 +61,13 @@ export declare class Icon extends BasicElement {
      */
     private get template();
     private set template(value);
+    /**
+     * A deferred promise representing icon ready.
+     * It would be resolved when the icon svg has been fetched and parsed, or
+     * when the icon svg is unavailable/invalid.
+     */
+    private iconReady;
+    constructor();
     /**
      * Check if the icon map configuration has content
      * @returns icon map if exists
@@ -64,11 +79,22 @@ export declare class Icon extends BasicElement {
      * @returns {void}
      */
     protected firstUpdated(changedProperties: PropertyValues): void;
+    protected getUpdateComplete(): Promise<boolean>;
     /**
-     * Helper method, used to set the icon src.
+     * instantiate a new deferred promise for icon ready if it's not pending already
      * @returns {void}
      */
-    private setIconSrc;
+    private deferIconReady;
+    /**
+     * 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 updateRenderer;
     /**
      * Tries to load an icon from the url provided
      * and the renders this into the icon template.
@@ -76,6 +102,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

@@ -4,9 +4,13 @@ import { BasicElement, DeprecationNotice, css, svg } from '@refinitiv-ui/core';
 import { customElement } from '@refinitiv-ui/core/decorators/custom-element.js';
 import { property } from '@refinitiv-ui/core/decorators/property.js';
 import { unsafeSVG } from '@refinitiv-ui/core/directives/unsafe-svg.js';
+import { Deferred, isBase64svg, isUrl } from '@refinitiv-ui/utils/loader.js';
 import { efConfig } from '../configuration/index.js';
 import { VERSION } from '../version.js';
 import { IconLoader } from './utils/IconLoader.js';
+import { SpriteLoader } from './utils/SpriteLoader.js';
+export { IconLoader } from './utils/IconLoader.js';
+export { SpriteLoader } from './utils/SpriteLoader.js';
 export { preload } from './utils/IconLoader.js';
 const EmptyTemplate = svg ``;
 /**
@@ -14,19 +18,8 @@ const EmptyTemplate = svg ``;
  * Reusing these templates increases performance dramatically when many icons are rendered.
  * As the cache key is an absolute URL, we can assume no clashes will occur.
  */
-const iconTemplateCache = new Map();
+export const iconTemplateCache = new Map();
 let Icon = class Icon extends BasicElement {
-    constructor() {
-        super(...arguments);
-        this._icon = null;
-        /**
-         * Deprecation notice displays a warning message
-         * when deprecated features are used.
-         */
-        this.deprecationNotice = new DeprecationNotice('`src` attribute and property are deprecated. Use `icon` for attribute and property instead.');
-        this._src = null;
-        this._template = EmptyTemplate;
-    }
     /**
      * Element version number
      * @returns version number
@@ -65,8 +58,9 @@ let Icon = class Icon extends BasicElement {
     set icon(value) {
         const oldValue = this._icon;
         if (oldValue !== value) {
+            this.deferIconReady();
             this._icon = value;
-            void this.setIconSrc();
+            requestAnimationFrame(() => this.updateRenderer());
             this.requestUpdate('icon', oldValue);
         }
     }
@@ -87,13 +81,7 @@ let Icon = class Icon extends BasicElement {
     set src(value) {
         if (this.src !== value) {
             this._src = value;
-            this.clearIcon();
-            if (this.icon && this.iconMap) {
-                void this.loadAndRenderIcon(this.iconMap);
-            }
-            else if (value) {
-                void this.loadAndRenderIcon(value);
-            }
+            this.icon = value;
         }
         if (value && !this.icon) {
             this.deprecationNotice.once();
@@ -110,6 +98,22 @@ let Icon = class Icon extends BasicElement {
             this._template = value;
             this.requestUpdate();
         }
+        this.iconReady.resolve();
+    }
+    constructor() {
+        super();
+        this._icon = null;
+        /**
+         * Deprecation notice displays a warning message
+         * when deprecated features are used.
+         */
+        this.deprecationNotice = new DeprecationNotice('`src` attribute and property are deprecated. Use `icon` attribute and property instead.');
+        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 `icon` attribute is missing.
+        this.iconReady.resolve();
     }
     /**
      * Check if the icon map configuration has content
@@ -131,12 +135,52 @@ let Icon = class Icon extends BasicElement {
          */
         this.setPrefix();
     }
+    async getUpdateComplete() {
+        const result = await super.getUpdateComplete();
+        await this.iconReady.promise;
+        return result;
+    }
+    /**
+     * instantiate a new deferred promise for icon ready if it's not pending already
+     * @returns {void}
+     */
+    deferIconReady() {
+        if (this.iconReady.isPending()) {
+            return;
+        }
+        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() {
-        this.src = this.icon ? await IconLoader.getSrc(this.icon) : null;
+    updateRenderer() {
+        if (!this.isIconValid()) {
+            return this.clearIcon();
+        }
+        const iconProperty = this._icon;
+        if (this.iconMap) {
+            void this.loadAndRenderIcon(this.iconMap);
+        }
+        else if (isUrl(iconProperty) || IconLoader.isPrefixResolved) {
+            void this.loadAndRenderIcon(iconProperty);
+        }
+        else {
+            void this.loadAndRenderSpriteIcon(iconProperty);
+        }
     }
     /**
      * Tries to load an icon from the url provided
@@ -152,6 +196,20 @@ 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
@@ -159,10 +217,15 @@ let Icon = class Icon extends BasicElement {
      * @returns {void}
      */
     setPrefix() {
-        if (!IconLoader.isPrefixSet) {
-            const CDNPrefix = this.getComputedVariable('--cdn-prefix').replace(/^('|")|('|")$/g, '');
+        // This prefix for individual icons allows supporting custom prefix of self-managed icons.
+        if (IconLoader.isPrefixPending) {
+            const CDNPrefix = this.getComputedVariable('--cdn-prefix');
             IconLoader.setCdnPrefix(CDNPrefix);
         }
+        if (SpriteLoader.isPrefixPending) {
+            const CDNSpritePrefix = this.getComputedVariable('--cdn-sprite-prefix');
+            SpriteLoader.setCdnPrefix(CDNSpritePrefix);
+        }
     }
     /**
      * Clears SVG body from the icon template

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

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

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

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

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

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

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

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

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

@@ -0,0 +1,23 @@
+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>;
+    reset(): void;
+}
+declare const instance: SpriteLoader;
+export { instance as SpriteLoader };

package/lib/icon/utils/SpriteLoader.js

@@ -0,0 +1,42 @@
+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;
+    }
+    reset() {
+        super.reset();
+        spriteCache = undefined;
+    }
+}
+const instance = new SpriteLoader();
+export { instance as SpriteLoader };

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

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

package/lib/password-field/index.js

@@ -5,11 +5,9 @@ import { state } from '@refinitiv-ui/core/decorators/state.js';
 import '@refinitiv-ui/phrasebook/locale/en/password-field.js';
 import { translate } from '@refinitiv-ui/translate';
 import { VISUALLY_HIDDEN_STYLE } from '@refinitiv-ui/utils/accessibility.js';
-import { preload } from '../icon/index.js';
 import '../icon/index.js';
 import { TextField } from '../text-field/index.js';
 import { deregisterOverflowTooltip } from '../tooltip/index.js';
-let isEyeOffPreloadRequested = false;
 /**
  * A form control element for password.
  *
@@ -75,10 +73,6 @@ let PasswordField = class PasswordField extends TextField {
      */
     firstUpdated(changedProperties) {
         super.firstUpdated(changedProperties);
-        if (!isEyeOffPreloadRequested) {
-            preload('eye-off');
-            isEyeOffPreloadRequested = true;
-        }
         // password shouldn't display value on tooltip when value is overflow
         deregisterOverflowTooltip(this);
     }

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

@@ -1,4 +1,4 @@
 import '@refinitiv-ui/elements/layout/themes/halo/dark';
 import '@refinitiv-ui/elements/progress-bar/themes/halo/dark';
-dispatchEvent(new CustomEvent('ef.customStyles.define', { detail: { name: 'ef-tornado-chart', styles: ':host{--primary-color:#6678FF;--secondary-color:#6678FF;--responsive-width:450;font-size:12px;--primary-color:#6678FF;--secondary-color:#FFFFFF}:host [part=legend]{display:flex;justify-content:flex-end;margin-bottom:25px}:host [part=legend-item]{display:inline-flex;overflow:hidden;align-items:center;margin-right:10px}:host [part=legend][vertical]{justify-content:flex-start;flex-wrap:wrap}:host [part=primary-symbol],:host [part=secondary-symbol]{flex:none;width:15px;height:15px;border-radius:1px;margin-right:5px}:host [part=primary-symbol]{background-color:var(--primary-color)}:host [part=secondary-symbol]{background-color:var(--secondary-color)}:host [part=primary-label],:host [part=secondary-label]{text-overflow:ellipsis;overflow:hidden;white-space:nowrap}' }}));
+dispatchEvent(new CustomEvent('ef.customStyles.define', { detail: { name: 'ef-tornado-chart', styles: ':host{--primary-color:#6678FF;--secondary-color:#6678FF;--responsive-width:450;font-size:12px;--primary-color:#6678FF;--secondary-color:#E6E6E6}:host [part=legend]{display:flex;justify-content:flex-end;margin-bottom:25px}:host [part=legend-item]{display:inline-flex;overflow:hidden;align-items:center;margin-right:10px}:host [part=legend][vertical]{justify-content:flex-start;flex-wrap:wrap}:host [part=primary-symbol],:host [part=secondary-symbol]{flex:none;width:15px;height:15px;border-radius:1px;margin-right:5px}:host [part=primary-symbol]{background-color:var(--primary-color)}:host [part=secondary-symbol]{background-color:var(--secondary-color)}:host [part=primary-label],:host [part=secondary-label]{text-overflow:ellipsis;overflow:hidden;white-space:nowrap}' }}));
 dispatchEvent(new CustomEvent('ef.customStyles.define', { detail: { name: 'ef-tornado-item', styles: ':host{margin:0;padding:0 5px;--primary-color:var(\'--primary-color\', #6678FF);--secondary-color:var(\'--secondary-color\', #6678FF)}:host(:hover),:host([highlighted]){background-color:rgba(204,204,204,.05)}:host [part=label]{text-align:left;margin:0;text-overflow:ellipsis;overflow:hidden;white-space:nowrap}:host [part=primary-bar],:host [part=secondary-bar]{width:100%;height:20px}:host [part=primary-bar]{color:var(--primary-color);margin-left:50px}:host [part=secondary-bar]{color:var(--secondary-color);margin-right:50px}:host [part=seperator]{height:30px;border-left:2px solid #404040}:host([vertical]){border-left:2px solid #404040;padding-bottom:5px}:host([vertical]) [part=label]{margin:3px}:host([vertical]) [part=seperator]{display:none}:host([vertical]) [part=container]{align-items:inherit}:host([vertical]) [part=primary-bar]{margin:0 50px 0 0}:host([vertical]) [part=secondary-bar]{margin:3px 50px 0 0}:host([highlighted]) [part=label],:host([highlighted]) [part=primary-bar],:host([highlighted]) [part=secondary-bar]{font-weight:600}' }}));

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 '../../checkbox/index.js';
 import '../../icon/index.js';
-import { preload } from '../../icon/index.js';
 import { VERSION } from '../../version.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 = '6.18.5';
+export const VERSION = '6.19.0';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@refinitiv-ui/elements",
-  "version": "6.18.5",
+  "version": "6.19.0",
   "description": "Element Framework Elements",
   "author": "LSEG",
   "license": "Apache-2.0",
@@ -339,8 +339,8 @@
   },
   "dependencies": {
     "@lit-labs/context": "^0.3.1",
-    "@refinitiv-ui/halo-theme": "^6.9.1",
-    "@refinitiv-ui/solar-theme": "^6.5.3",
+    "@refinitiv-ui/halo-theme": "^6.10.0",
+    "@refinitiv-ui/solar-theme": "^6.6.0",
     "@types/chart.js": "^2.9.31",
     "chart.js": "~2.9.4",
     "d3-interpolate": "^3.0.1",
@@ -350,25 +350,25 @@
     "tslib": "^2.3.1"
   },
   "devDependencies": {
-    "@refinitiv-ui/core": "^6.6.0",
-    "@refinitiv-ui/demo-block": "^6.1.28",
-    "@refinitiv-ui/i18n": "^6.0.21",
+    "@refinitiv-ui/core": "^6.6.1",
+    "@refinitiv-ui/demo-block": "^6.1.30",
+    "@refinitiv-ui/i18n": "^6.0.22",
     "@refinitiv-ui/phrasebook": "^6.3.9",
-    "@refinitiv-ui/test-helpers": "^6.0.15",
-    "@refinitiv-ui/translate": "^6.0.35",
-    "@refinitiv-ui/utils": "^6.3.2",
+    "@refinitiv-ui/test-helpers": "^6.1.0",
+    "@refinitiv-ui/translate": "^6.0.36",
+    "@refinitiv-ui/utils": "^6.4.0",
     "@types/d3-interpolate": "^3.0.1"
   },
   "peerDependencies": {
     "@refinitiv-ui/browser-sparkline": "^1.0.0 || ^2.0.0",
-    "@refinitiv-ui/core": "^6.6.0",
-    "@refinitiv-ui/i18n": "^6.0.21",
+    "@refinitiv-ui/core": "^6.6.1",
+    "@refinitiv-ui/i18n": "^6.0.22",
     "@refinitiv-ui/phrasebook": "^6.3.9",
-    "@refinitiv-ui/translate": "^6.0.35",
-    "@refinitiv-ui/utils": "^6.3.2"
+    "@refinitiv-ui/translate": "^6.0.36",
+    "@refinitiv-ui/utils": "^6.4.0"
   },
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "a0494fbf3faf992f4632d5c4b1f5e18f752ab44e"
+  "gitHead": "1d093a683a9b34ed8d0cbfcf3c8e4e14361b787a"
 }