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

package/lib/heatmap/index.d.ts

@@ -1,8 +1,8 @@
 import { JSXInterface } from '../jsx';
-import { ResponsiveElement, TemplateResult, CSSResultGroup, PropertyValues } from '@refinitiv-ui/core';
+import { CSSResultGroup, PropertyValues, ResponsiveElement, TemplateResult } from '@refinitiv-ui/core';
 import '../canvas/index.js';
 import '../tooltip/index.js';
-import type { HeatmapXAxis, HeatmapCell, HeatmapConfig, HeatmapYAxis, HeatmapCustomisableProperties, HeatmapTooltipCallback, HeatmapRenderCallback } from './helpers/types';
+import type { HeatmapCell, HeatmapConfig, HeatmapCustomisableProperties, HeatmapRenderCallback, HeatmapTooltipCallback, HeatmapXAxis, HeatmapYAxis } from './helpers/types';
 export type { HeatmapXAxis, HeatmapCell, HeatmapConfig, HeatmapYAxis, HeatmapCustomisableProperties, HeatmapTooltipCallback, HeatmapRenderCallback };
 /**
  * A graphical representation of data where the individual
@@ -239,9 +239,9 @@ export declare class Heatmap extends ResponsiveElement {
      */
     private initialiseRowTrack;
     /**
-      * Initialize column track
-      * @returns {void}
-      */
+     * Initialize column track
+     * @returns {void}
+     */
     private initialiseColumnTrack;
     /**
      * Hit testing on heatmap
@@ -404,10 +404,10 @@ export declare class Heatmap extends ResponsiveElement {
      */
     private paintAllCellBackground;
     /**
-    * Paints a single cell background colour
-    * @param {HeatmapCell} cell cell to paint
-    * @returns {void}
-    */
+     * Paints a single cell background colour
+     * @param {HeatmapCell} cell cell to paint
+     * @returns {void}
+     */
     private paintCellBackground;
     /**
      * Construct and renders x-axis

package/lib/heatmap/index.js

@@ -1,16 +1,16 @@
 import { __decorate } from "tslib";
-import { ResponsiveElement, html, css } from '@refinitiv-ui/core';
+import { ResponsiveElement, css, html } from '@refinitiv-ui/core';
 import { customElement } from '@refinitiv-ui/core/decorators/custom-element.js';
 import { property } from '@refinitiv-ui/core/decorators/property.js';
 import { query } from '@refinitiv-ui/core/decorators/query.js';
-import { VERSION } from '../version.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 { VERSION } from '../version.js';
+import { blend, brighten, darken, interpolate, isLight } from './helpers/color.js';
+import { MIN_FONT_SIZE, getMaximumTextWidth, getResponsiveFontSize } from './helpers/text.js';
 import { Track } from './helpers/track.js';
-import { blend, brighten, darken, isLight, interpolate } from './helpers/color.js';
-import { getResponsiveFontSize, getMaximumTextWidth, MIN_FONT_SIZE } from './helpers/text.js';
 const CELL_PADDING = 0.12;
 const CELL_MAX_TEXT_WIDTH = 1 - CELL_PADDING;
 const DEFAULT_CANVAS_RATIO = 0.75; // ratio — 4:3
@@ -37,13 +37,13 @@ let Heatmap = class Heatmap extends ResponsiveElement {
       :host {
         display: block;
       }
-      #container{
+      #container {
         width: 100%;
         height: 100%;
         display: flex;
       }
       #canvas-container {
-        min-width:0;
+        min-width: 0;
         display: flex;
         width: 100%;
         flex-direction: column;
@@ -52,14 +52,14 @@ let Heatmap = class Heatmap extends ResponsiveElement {
       #tooltip-overlay {
         position: absolute;
       }
-      [part=canvas] {
+      [part='canvas'] {
         flex-grow: 1;
       }
-      [part=x-axis] {
+      [part='x-axis'] {
         display: flex;
         align-items: center;
       }
-      [part=y-axis]{
+      [part='y-axis'] {
         display: flex;
         flex-direction: column;
       }
@@ -133,7 +133,7 @@ let Heatmap = class Heatmap extends ResponsiveElement {
      */
     get columnCount() {
         let result = 0;
-        this.rows?.forEach(columns => {
+        this.rows?.forEach((columns) => {
             if (columns.length > result) {
                 result = columns.length;
             }
@@ -268,14 +268,14 @@ let Heatmap = class Heatmap extends ResponsiveElement {
             this.labelHiddenChanged();
         }
         // Re-paints whole canvas when at least one of the following properties changes
-        if (changedProperties.has('config')
-            || changedProperties.has('blend')
-            || changedProperties.has('minPoint')
-            || changedProperties.has('midPoint')
-            || changedProperties.has('maxPoint')
-            || changedProperties.has('saturation')
-            || changedProperties.has('axisHidden')
-            || changedProperties.has('labelWidth')) {
+        if (changedProperties.has('config') ||
+            changedProperties.has('blend') ||
+            changedProperties.has('minPoint') ||
+            changedProperties.has('midPoint') ||
+            changedProperties.has('maxPoint') ||
+            changedProperties.has('saturation') ||
+            changedProperties.has('axisHidden') ||
+            changedProperties.has('labelWidth')) {
             this.prepareAndPaint();
         }
     }
@@ -293,7 +293,8 @@ let Heatmap = class Heatmap extends ResponsiveElement {
      */
     /* c8 ignore start */
     onMouseMove(event) {
-        if (event.composedPath().includes(this.canvas) || this.tooltipCallback && this.tooltipOverlay === event.target) {
+        if (event.composedPath().includes(this.canvas) ||
+            (this.tooltipCallback && this.tooltipOverlay === event.target)) {
             this.hoverCell = this.hitTest(event);
         }
         else {
@@ -350,9 +351,9 @@ let Heatmap = class Heatmap extends ResponsiveElement {
         this.rowTrack.margin = this.cellMargin;
     }
     /**
-      * Initialize column track
-      * @returns {void}
-      */
+     * Initialize column track
+     * @returns {void}
+     */
     initialiseColumnTrack() {
         this.colTrack.init(this.offsetWidth, this.columnCount);
         this.colTrack.margin = this.cellMargin;
@@ -644,7 +645,7 @@ let Heatmap = class Heatmap extends ResponsiveElement {
         const label = typeof cell.customLabel === 'string' ? cell.customLabel : cell.label;
         if (this.canvasContext) {
             this.canvasContext.fillStyle = cell.customForegroundColor || cell.foregroundColor;
-            this.canvasContext.fillText(label || '', cell.x + cell.width / 2, (cell.y + 1 + cell.height / 2) + margin);
+            this.canvasContext.fillText(label || '', cell.x + cell.width / 2, cell.y + 1 + cell.height / 2 + margin);
         }
     }
     /**
@@ -669,12 +670,15 @@ let Heatmap = class Heatmap extends ResponsiveElement {
         canvas.textAlign = 'center';
         canvas.textBaseline = 'middle';
         canvas.font = `${fontSize}px ${fontFamily}`;
-        let isWithinMinCellWidth = ((this.labelWidth || getMaximumTextWidth(canvas, this.cells, this.hasCellHeader)) / contentWidth) <= CELL_MAX_TEXT_WIDTH;
+        let isWithinMinCellWidth = (this.labelWidth || getMaximumTextWidth(canvas, this.cells, this.hasCellHeader)) / contentWidth <=
+            CELL_MAX_TEXT_WIDTH;
         // Tries to get the largest possible font size that is within `CELL_MAX_TEXT_WIDTH`
         if (!isWithinMinCellWidth && fontSize !== MIN_FONT_SIZE) {
             while (!isWithinMinCellWidth) {
                 canvas.font = `${fontSize}px ${fontFamily}`; // Should assigned new font size to canvas before calculated again.
-                isWithinMinCellWidth = ((this.labelWidth || getMaximumTextWidth(canvas, this.cells, this.hasCellHeader)) / contentWidth) <= CELL_MAX_TEXT_WIDTH;
+                isWithinMinCellWidth =
+                    (this.labelWidth || getMaximumTextWidth(canvas, this.cells, this.hasCellHeader)) / contentWidth <=
+                        CELL_MAX_TEXT_WIDTH;
                 // Stops when reaches minimum font-size
                 if (fontSize === MIN_FONT_SIZE) {
                     break;
@@ -684,7 +688,9 @@ let Heatmap = class Heatmap extends ResponsiveElement {
                 }
             }
         }
-        const isWithinMinCellHeight = this.hasCellHeader ? (fontSize * 2) < contentHeight : fontSize < contentHeight;
+        const isWithinMinCellHeight = this.hasCellHeader
+            ? fontSize * 2 < contentHeight
+            : fontSize < contentHeight;
         this.contentWithinCellBoundary = isWithinMinCellWidth && isWithinMinCellHeight;
         return this.contentWithinCellBoundary;
     }
@@ -738,10 +744,10 @@ let Heatmap = class Heatmap extends ResponsiveElement {
         }
         const saturateRatio = 1 - saturation;
         if (value > this.midPoint) {
-            return ((value - this.midPoint) / (this.maxPoint - this.midPoint) * saturateRatio) + saturation;
+            return ((value - this.midPoint) / (this.maxPoint - this.midPoint)) * saturateRatio + saturation;
         }
         else {
-            return ((value - this.midPoint) / (this.midPoint - this.minPoint) * saturateRatio) - saturation;
+            return ((value - this.midPoint) / (this.midPoint - this.minPoint)) * saturateRatio - saturation;
         }
     }
     /* c8 ignore stop */
@@ -795,7 +801,7 @@ let Heatmap = class Heatmap extends ResponsiveElement {
             const margin = this.labelHidden ? 0 : this.calculateHeaderMargin(cell.height);
             this.canvasContext.font = 'bold ' + labelFontStyle;
             this.canvasContext.fillStyle = cell.customForegroundColor || cell.foregroundColor;
-            this.canvasContext.fillText(cell.header || '', cell.x + cell.width / 2, (cell.y + 1 + cell.height / 2) - margin);
+            this.canvasContext.fillText(cell.header || '', cell.x + cell.width / 2, cell.y + 1 + cell.height / 2 - margin);
             // Reverts font style to paint label correctly
             this.canvasContext.font = labelFontStyle;
         }
@@ -836,10 +842,10 @@ let Heatmap = class Heatmap extends ResponsiveElement {
         }
     }
     /**
-    * Paints a single cell background colour
-    * @param {HeatmapCell} cell cell to paint
-    * @returns {void}
-    */
+     * Paints a single cell background colour
+     * @param {HeatmapCell} cell cell to paint
+     * @returns {void}
+     */
     paintCellBackground(cell) {
         if (this.canvasContext) {
             this.canvasContext.fillStyle = cell.customBackgroundColor || cell.backgroundColor;
@@ -960,7 +966,7 @@ let Heatmap = class Heatmap extends ResponsiveElement {
                 yAxisElement.removeChild(yAxisElement.lastChild);
             }
         }
-        this.rowTrack.init(this.offsetHeight - (this.crossBox.offsetHeight + (this.cellMargin * 2)), this.rowCount);
+        this.rowTrack.init(this.offsetHeight - (this.crossBox.offsetHeight + this.cellMargin * 2), this.rowCount);
         // Clear yAxis element before re-create yAxis
         while (yAxisElement.children.length > laneCount) {
             if (yAxisElement.lastChild) {
@@ -1026,20 +1032,23 @@ let Heatmap = class Heatmap extends ResponsiveElement {
     render() {
         return html `
       <div id="container" @mousemove=${this.onMouseMove} @mouseleave=${this.onMouseLeave}>
-        ${this.config?.yAxis && !this.axisHidden ? html `
-        <div id="y-axis-container">
-          <div part="cross-box"></div>
-          <div part="y-axis"></div>
-        </div>` : null}
+        ${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">
           ${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>
       </div>
-      ${this.tooltipCallback ? html `
-        <ef-tooltip .condition=${this.tooltipCondition} .renderer=${this.tooltipRenderer}></ef-tooltip>
-      ` : null}
+      ${this.tooltipCallback
+            ? html `
+            <ef-tooltip .condition=${this.tooltipCondition} .renderer=${this.tooltipRenderer}></ef-tooltip>
+          `
+            : null}
     `;
     }
 };

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

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

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

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

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

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

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

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

package/lib/icon/index.d.ts

@@ -1,6 +1,6 @@
 import { JSXInterface } from '../jsx';
-import { BasicElement, CSSResultGroup, TemplateResult, PropertyValues } from '@refinitiv-ui/core';
-import { type Config } from '../configuration/index.js';
+import { BasicElement, CSSResultGroup, PropertyValues, TemplateResult } from '@refinitiv-ui/core';
+import type { Config } from '../configuration/index.js';
 export declare class Icon extends BasicElement {
     /**
      * Element version number

package/lib/icon/index.js

@@ -1,13 +1,13 @@
 import { __decorate } from "tslib";
-import { BasicElement, svg, css } from '@refinitiv-ui/core';
+import { consume } from '@lit-labs/context';
+import { BasicElement, 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, isUrl, isBase64svg } from '@refinitiv-ui/utils/loader.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 { consume } from '@lit-labs/context';
-import { efConfig } from '../configuration/index.js';
 import { SpriteLoader } from './utils/SpriteLoader.js';
 const EmptyTemplate = svg ``;
 /**
@@ -80,7 +80,7 @@ let Icon = class Icon extends BasicElement {
         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.
+        // even in the case that `icon` attribute is missing.
         this.iconReady.resolve();
     }
     /**
@@ -88,7 +88,7 @@ let Icon = class Icon extends BasicElement {
      * @returns icon map if exists
      */
     get iconMap() {
-        return this.icon && this.config?.icon.map[this.icon] || null;
+        return (this.icon && this.config?.icon.map[this.icon]) || null;
     }
     /**
      * Called after the component is first rendered
@@ -122,7 +122,7 @@ let Icon = class Icon extends BasicElement {
         if (!this._icon) {
             return false;
         }
-        if (this.iconMap && (!isBase64svg(this.iconMap) && !isUrl(this.iconMap))) {
+        if (this.iconMap && !isBase64svg(this.iconMap) && !isUrl(this.iconMap)) {
             return false;
         }
         return true;
@@ -155,8 +155,7 @@ let Icon = class Icon extends BasicElement {
     async loadAndRenderIcon(src) {
         const iconTemplateCacheItem = iconTemplateCache.get(src);
         if (!iconTemplateCacheItem) {
-            iconTemplateCache.set(src, IconLoader.loadSVG(src)
-                .then(body => svg `${unsafeSVG(body)}`));
+            iconTemplateCache.set(src, IconLoader.loadSVG(src).then((body) => svg `${unsafeSVG(body)}`));
             return this.loadAndRenderIcon(src); // Load again and await cache result
         }
         this.template = await iconTemplateCacheItem;
@@ -170,8 +169,7 @@ let Icon = class Icon extends BasicElement {
     async loadAndRenderSpriteIcon(iconName) {
         const iconTemplateCacheItem = iconTemplateCache.get(iconName);
         if (!iconTemplateCacheItem) {
-            iconTemplateCache.set(iconName, SpriteLoader.loadSpriteSVG(iconName)
-                .then(body => svg `${unsafeSVG(body)}`));
+            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;

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

@@ -1,2 +1 @@
-
 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 @@
-
 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 @@
-
 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 @@
-
 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/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/color.js';
+import type { HSLColor, RGBColor } from '@refinitiv-ui/utils/color.js';
+import type { AreaSeriesPartialOptions, AreaStyleOptions, BarData, BarSeriesPartialOptions, BarStyleOptions, CandlestickSeriesPartialOptions, CandlestickStyleOptions, ChartOptions, DeepPartial, HistogramData, HistogramSeriesPartialOptions, HistogramStyleOptions, ISeriesApi, LineData, LineSeriesPartialOptions, LineStyleOptions, SeriesPartialOptions, SeriesType } from 'lightweight-charts';
 type SeriesOptions = AreaSeriesPartialOptions | BarSeriesPartialOptions | CandlestickSeriesPartialOptions | HistogramSeriesPartialOptions | LineSeriesPartialOptions;
 type SeriesStyleOptions = LineStyleOptions & AreaStyleOptions & BarStyleOptions & CandlestickStyleOptions & HistogramStyleOptions;
 type SeriesData = LineData[] | BarData[] | HistogramData[];
@@ -43,4 +43,4 @@ interface InteractiveChartSeries {
     data: SeriesData;
     seriesOptions?: SeriesPartialOptions<SeriesOptions>;
 }
-export { InteractiveChartConfig, InteractiveChartSeries, Time, Theme, RowLegend, SeriesList, SeriesDataItem, SeriesStyleOptions, ColorToStringFunction, LegendStyle };
+export { InteractiveChartConfig, InteractiveChartSeries, Time, Theme, RowLegend, SeriesList, SeriesData, SeriesDataItem, SeriesOptions, SeriesStyleOptions, ColorToStringFunction, LegendStyle };

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

@@ -1,10 +1,10 @@
 import { JSXInterface } from '../jsx';
-import { ResponsiveElement, TemplateResult, CSSResultGroup, PropertyValues, ElementSize } from '@refinitiv-ui/core';
 import { IChartApi, MouseEventParams } from 'lightweight-charts';
+import { CSSResultGroup, ElementSize, PropertyValues, ResponsiveElement, TemplateResult } from '@refinitiv-ui/core';
 import '../tooltip/index.js';
-import type { InteractiveChartConfig, InteractiveChartSeries, RowLegend, SeriesList, SeriesDataItem } from './helpers/types';
 import { LegendStyle } from './helpers/types.js';
-export type { InteractiveChartConfig, InteractiveChartSeries, LegendStyle };
+import type { InteractiveChartConfig, InteractiveChartSeries, RowLegend, SeriesData, SeriesDataItem, SeriesList, SeriesOptions, SeriesStyleOptions, Theme, Time } from './helpers/types.js';
+export type { InteractiveChartConfig, InteractiveChartSeries, Time, Theme, RowLegend, SeriesList, SeriesData, SeriesDataItem, SeriesOptions, SeriesStyleOptions, LegendStyle };
 /**
  * A charting component that allows you to create several use cases of financial chart.
  * By lightweight-charts library.
@@ -26,7 +26,7 @@ export declare class InteractiveChart extends ResponsiveElement {
     /**
      * Chart configurations for init chart
      * @type {InteractiveChartConfig}
-    */
+     */
     config: InteractiveChartConfig | null;
     /**
      * Hide legend
@@ -96,9 +96,9 @@ export declare class InteractiveChart extends ResponsiveElement {
      */
     resizedCallback(size: ElementSize): void;
     /**
-    * Legend value observer
-    * @returns {void}
-    */
+     * Legend value observer
+     * @returns {void}
+     */
     private onLegendChange;
     /**
      * Legend style observer
@@ -108,9 +108,9 @@ export declare class InteractiveChart extends ResponsiveElement {
      */
     private onLegendStyleChange;
     /**
-    * Jump last value observer
-    * @returns {void}
-    */
+     * Jump last value observer
+     * @returns {void}
+     */
     private onJumpButtonChange;
     /**
      * update width and height of chart
@@ -179,15 +179,15 @@ export declare class InteractiveChart extends ResponsiveElement {
      */
     private convertColorToString;
     /**
-    * Create data configuration from theme
-    * @returns {void}
-    */
+     * Create data configuration from theme
+     * @returns {void}
+     */
     private createSeriesOptions;
     /**
-    * Apply Theme to chart
-    * @param config value config
-    * @returns {void}
-    */
+     * Apply Theme to chart
+     * @param config value config
+     * @returns {void}
+     */
     private applyTheme;
     /**
      * Apply text color legend from chart options
@@ -253,13 +253,13 @@ export declare class InteractiveChart extends ResponsiveElement {
      */
     private createSpanOHLC;
     /**
-    * Create text used by several series types such as bars or candlesticks
-    * @param rowLegend Legend element
-    * @param rowData Value of series
-    * @param priceColor color of series
-    * @param index Series index
-    * @returns {void}
-    */
+     * Create text used by several series types such as bars or candlesticks
+     * @param rowLegend Legend element
+     * @param rowData Value of series
+     * @param priceColor color of series
+     * @param index Series index
+     * @returns {void}
+     */
     private createTextOHLC;
     /**
      * Create text price used by several series types
@@ -335,11 +335,11 @@ export declare class InteractiveChart extends ResponsiveElement {
      */
     colors(): string[];
     /**
-    * A `CSSResultGroup` that will be used
-    * to style the host, slotted children
-    * and the internal template of the element.
-    * @return CSS template
-    */
+     * A `CSSResultGroup` that will be used
+     * to style the host, slotted children
+     * and the internal template of the element.
+     * @return CSS template
+     */
     static get styles(): CSSResultGroup;
     /**
      * A `TemplateResult` that will be used