@refinitiv-ui/elements 7.0.0 → 7.0.2

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 ``;
 /**
@@ -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/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

package/lib/interactive-chart/index.js

@@ -1,15 +1,15 @@
 var InteractiveChart_1;
 import { __decorate } from "tslib";
-import { ResponsiveElement, html, css } from '@refinitiv-ui/core';
+import { createChart as chart } from 'lightweight-charts';
+import { ResponsiveElement, css, html } from '@refinitiv-ui/core';
 import { customElement } from '@refinitiv-ui/core/decorators/custom-element.js';
 import { property } from '@refinitiv-ui/core/decorators/property.js';
 import { query } from '@refinitiv-ui/core/decorators/query.js';
-import { VERSION } from '../version.js';
 import { color as parseColor } from '@refinitiv-ui/utils/color.js';
-import { createChart as chart } from 'lightweight-charts';
 import '../tooltip/index.js';
-import { LegendStyle } from './helpers/types.js';
+import { VERSION } from '../version.js';
 import { merge } from './helpers/merge.js';
+import { LegendStyle } from './helpers/types.js';
 const NOT_AVAILABLE_DATA = 'N/A';
 const NO_DATA_POINT = '--';
 /**
@@ -24,7 +24,7 @@ let InteractiveChart = InteractiveChart_1 = class InteractiveChart extends Respo
         /**
          * Chart configurations for init chart
          * @type {InteractiveChartConfig}
-        */
+         */
         this.config = null;
         /**
          * Hide legend
@@ -185,9 +185,9 @@ let InteractiveChart = InteractiveChart_1 = class InteractiveChart extends Respo
         }
     }
     /**
-    * Legend value observer
-    * @returns {void}
-    */
+     * Legend value observer
+     * @returns {void}
+     */
     onLegendChange() {
         if (!this.disabledLegend) {
             this.createLegend();
@@ -214,9 +214,9 @@ let InteractiveChart = InteractiveChart_1 = class InteractiveChart extends Respo
         }
     }
     /**
-    * Jump last value observer
-    * @returns {void}
-    */
+     * Jump last value observer
+     * @returns {void}
+     */
     onJumpButtonChange() {
         if (!this.disabledJumpButton) {
             this.createJumpButton(this.width, this.height);
@@ -410,9 +410,9 @@ let InteractiveChart = InteractiveChart_1 = class InteractiveChart extends Respo
         return color || {};
     }
     /**
-    * Create data configuration from theme
-    * @returns {void}
-    */
+     * Create data configuration from theme
+     * @returns {void}
+     */
     createSeriesOptions() {
         if (this.theme) {
             let colorIndex = 0;
@@ -464,12 +464,12 @@ let InteractiveChart = InteractiveChart_1 = class InteractiveChart extends Respo
                         wickDownColor: this.theme.chartDownColor
                     };
                     // Update color index
-                    if (!seriesOptions.upColor
-                        || !seriesOptions.downColor
-                        || !seriesOptions.borderUpColor
-                        || !seriesOptions.borderDownColor
-                        || !seriesOptions.wickUpColor
-                        || !seriesOptions.wickDownColor) {
+                    if (!seriesOptions.upColor ||
+                        !seriesOptions.downColor ||
+                        !seriesOptions.borderUpColor ||
+                        !seriesOptions.borderDownColor ||
+                        !seriesOptions.wickUpColor ||
+                        !seriesOptions.wickDownColor) {
                         colorIndex++;
                     }
                 }
@@ -484,7 +484,8 @@ let InteractiveChart = InteractiveChart_1 = class InteractiveChart extends Respo
                 }
                 // Update config seriesOptions not have seriesOptions
                 if (!this.internalConfig.series[index].seriesOptions) {
-                    this.internalConfig.series[index].seriesOptions = seriesThemeOptions;
+                    this.internalConfig.series[index].seriesOptions =
+                        seriesThemeOptions;
                 }
                 else {
                     merge(seriesOptions, seriesThemeOptions);
@@ -493,10 +494,10 @@ let InteractiveChart = InteractiveChart_1 = class InteractiveChart extends Respo
         }
     }
     /**
-    * Apply Theme to chart
-    * @param config value config
-    * @returns {void}
-    */
+     * Apply Theme to chart
+     * @param config value config
+     * @returns {void}
+     */
     applyTheme(config) {
         if (this.chart && this.theme) {
             const style = getComputedStyle(this);
@@ -628,7 +629,7 @@ let InteractiveChart = InteractiveChart_1 = class InteractiveChart extends Respo
         for (let idx = 0; idx < this.internalConfig.series.length; idx++) {
             const chartType = this.internalConfig.series[idx].type;
             const dataSet = this.internalConfig.series[idx].data || [];
-            const symbol = (this.internalConfig.series[idx].symbolName || this.internalConfig.series[idx].symbol) || '';
+            const symbol = this.internalConfig.series[idx].symbolName || this.internalConfig.series[idx].symbol || '';
             const isLegendVisible = this.internalConfig.series[idx].legendVisible !== false;
             // Create row legend element
             if (!rowLegend) {
@@ -650,11 +651,11 @@ let InteractiveChart = InteractiveChart_1 = class InteractiveChart extends Respo
                 }
                 this.legendContainer.appendChild(rowLegendElem);
             }
-            /* Update value legend element on subscribeCrosshairMove.
-             * Don't need to be updated if chart has no data.
-             */
-            /* c8 ignore start */
             else if (rowLegend && dataSet.length) {
+                /* Update value legend element on subscribeCrosshairMove.
+                 * Don't need to be updated if chart has no data.
+                 */
+                /* c8 ignore start */
                 let value;
                 let priceColor = '';
                 // When have price on event moved on the crosshair
@@ -675,7 +676,10 @@ let InteractiveChart = InteractiveChart_1 = class InteractiveChart extends Respo
                     const latestData = dataSet[dataSet.length - 1];
                     if (latestData) {
                         priceColor = this.getColorInSeries(latestData, chartType, idx);
-                        value = chartType === 'bar' || chartType === 'candlestick' ? latestData : latestData.value;
+                        value =
+                            chartType === 'bar' || chartType === 'candlestick'
+                                ? latestData
+                                : latestData.value;
                         this.isCrosshairVisible = false;
                         this.hasDataPoint = true;
                     }
@@ -704,7 +708,7 @@ let InteractiveChart = InteractiveChart_1 = class InteractiveChart extends Respo
         if (chartType === 'bar' || chartType === 'candlestick') {
             if (!this.hasDataPoint && rowLegendElem instanceof NodeList) {
                 const spanElem = rowLegendElem[index].querySelectorAll('span.price,span.ohlc');
-                spanElem.forEach(span => rowLegendElem[index].removeChild(span));
+                spanElem.forEach((span) => rowLegendElem[index].removeChild(span));
                 const span = document.createElement('span');
                 span.className = 'price';
                 span.textContent = value;
@@ -732,16 +736,18 @@ let InteractiveChart = InteractiveChart_1 = class InteractiveChart extends Respo
         }
     }
     /**
-    * 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}
+     */
     createTextOHLC(rowLegend, rowData, priceColor, index) {
         // Uses price formatter if provided
-        const formatter = this.internalConfig.series[index].hasOwnProperty('legendPriceFormatter') ? this.internalConfig.series[index].legendPriceFormatter : null;
+        const formatter = this.internalConfig.series[index].hasOwnProperty('legendPriceFormatter')
+            ? this.internalConfig.series[index].legendPriceFormatter
+            : null;
         if (formatter) {
             rowData = {
                 open: formatter(rowData.open),
@@ -879,7 +885,9 @@ let InteractiveChart = InteractiveChart_1 = class InteractiveChart extends Respo
             return this.getLegendPriceColor(this.seriesList[index].options().color);
         }
         else if (chartType === 'candlestick') {
-            const value = seriesData.hasOwnProperty('seriesPrices') ? seriesData?.seriesPrices.get(this.seriesList[index]) : seriesData;
+            const value = seriesData.hasOwnProperty('seriesPrices')
+                ? seriesData?.seriesPrices.get(this.seriesList[index])
+                : seriesData;
             const barStyle = this.seriesList[index].options();
             const colorBar = value.close > value.open ? barStyle.borderUpColor : barStyle.borderDownColor;
             return colorBar;
@@ -891,7 +899,9 @@ let InteractiveChart = InteractiveChart_1 = class InteractiveChart extends Respo
             return this.getLegendPriceColor(this.seriesList[index].options().lineColor);
         }
         else if (chartType === 'volume') {
-            const priceValue = seriesData.hasOwnProperty('seriesPrices') ? seriesData.seriesPrices.get(this.seriesList[index]) : seriesData.value;
+            const priceValue = seriesData.hasOwnProperty('seriesPrices')
+                ? seriesData.seriesPrices.get(this.seriesList[index])
+                : seriesData.value;
             let dataItem = {};
             this.internalConfig.series[index].data.forEach((dataConfig) => {
                 const data = dataConfig;
@@ -899,10 +909,10 @@ let InteractiveChart = InteractiveChart_1 = class InteractiveChart extends Respo
                 const timeSeriesData = seriesData.time;
                 //  if via time point data string format 'yyyy-mm-dd' or object '{ year: 2019, month: 6, day: 1 }'
                 if (time.hasOwnProperty('day') && time.hasOwnProperty('month') && time.hasOwnProperty('year')) {
-                    if (time.day === timeSeriesData.day
-                        && time.month === timeSeriesData.month
-                        && time.year === timeSeriesData.year
-                        && data.value === priceValue) {
+                    if (time.day === timeSeriesData.day &&
+                        time.month === timeSeriesData.month &&
+                        time.year === timeSeriesData.year &&
+                        data.value === priceValue) {
                         dataItem = dataConfig;
                     }
                 }
@@ -936,7 +946,7 @@ let InteractiveChart = InteractiveChart_1 = class InteractiveChart extends Respo
             const position = this.getPriceScalePosition();
             const pricePosition = position === 'left' ? 30 : 0;
             const buttonTop = `${height - 70}px`;
-            const buttonLeft = `${(width + pricePosition) - 100}px`;
+            const buttonLeft = `${width + pricePosition - 100}px`;
             this.jumpButtonContainer.style.top = buttonTop;
             this.jumpButtonContainer.style.left = buttonLeft;
             // Create subscribeVisibleTimeRangeChange
@@ -995,11 +1005,11 @@ let InteractiveChart = InteractiveChart_1 = class InteractiveChart extends Respo
         return colors;
     }
     /**
-    * 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() {
         return css `
       :host {
@@ -1009,7 +1019,7 @@ let InteractiveChart = InteractiveChart_1 = class InteractiveChart extends Respo
         z-index: 0;
       }
 
-      [part=legend] {
+      [part='legend'] {
         position: absolute;
         z-index: 1000;
       }
@@ -1029,8 +1039,12 @@ let InteractiveChart = InteractiveChart_1 = class InteractiveChart extends Respo
         <div part="jump-button"></div>
       </div>
       <div part="branding-container" title="" tooltip="Powered by Trading View">
-        <svg width="33" height="19" viewBox="0 0 611 314"  part="branding">
-          <path fill-rule="evenodd" clip-rule="evenodd" d="M341 124C375.242 124 403 96.2417 403 62C403 27.7583 375.242 0 341 0C306.758 0 279 27.7583 279 62C279 96.2417 306.758 124 341 124ZM481 314H337L467 4H611L481 314ZM124 4H248V128V314H124V128H0V4H124Z"/>
+        <svg width="33" height="19" viewBox="0 0 611 314" part="branding">
+          <path
+            fill-rule="evenodd"
+            clip-rule="evenodd"
+            d="M341 124C375.242 124 403 96.2417 403 62C403 27.7583 375.242 0 341 0C306.758 0 279 27.7583 279 62C279 96.2417 306.758 124 341 124ZM481 314H337L467 4H611L481 314ZM124 4H248V128V314H124V128H0V4H124Z"
+          />
         </svg>
       </div>
       <div part="chart"></div>

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

@@ -17,7 +17,7 @@ interface CommonLabelItem extends CommonItem {
     icon?: string;
     /**
      * Set the tooltip text
-    */
+     */
     tooltip?: string;
 }
 /**

package/lib/item/index.d.ts

@@ -1,8 +1,8 @@
 import { JSXInterface } from '../jsx';
-import { ControlElement, CSSResultGroup, PropertyValues, TemplateResult } from '@refinitiv-ui/core';
-import '../icon/index.js';
+import { CSSResultGroup, ControlElement, PropertyValues, TemplateResult } from '@refinitiv-ui/core';
 import '../checkbox/index.js';
-import type { ItemType, ItemText, ItemHeader, ItemDivider, ItemData } from './helpers/types';
+import '../icon/index.js';
+import type { ItemData, ItemDivider, ItemHeader, ItemText, ItemType } from './helpers/types';
 export type { ItemType, ItemText, ItemHeader, ItemDivider, ItemData };
 /**
  * Used as a basic building block to compose complex custom elements,

package/lib/item/index.js

@@ -2,14 +2,13 @@ import { __decorate } from "tslib";
 import { ControlElement, 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 { VERSION } from '../version.js';
-import '../icon/index.js';
+import { createRef, ref } from '@refinitiv-ui/core/directives/ref.js';
+import { isElementOverflown } from '@refinitiv-ui/utils/element.js';
 import '../checkbox/index.js';
+import '../icon/index.js';
 import { registerOverflowTooltip } from '../tooltip/index.js';
-import { isElementOverflown } from '@refinitiv-ui/utils/element.js';
-import { createRef, ref } from '@refinitiv-ui/core/directives/ref.js';
-const isAllWhitespaceTextNode = (node) => node.nodeType === document.TEXT_NODE
-    && !node.textContent?.trim();
+import { VERSION } from '../version.js';
+const isAllWhitespaceTextNode = (node) => node.nodeType === document.TEXT_NODE && !node.textContent?.trim();
 /**
  * Used as a basic building block to compose complex custom elements,
  * additionally it can be used by applications
@@ -85,7 +84,7 @@ let Item = class Item extends ControlElement {
          */
         this.checkSlotChildren = (event) => {
             const slot = event.target;
-            this.isSlotEmpty = !slot.assignedNodes().filter(node => !this.isIgnorable(node)).length;
+            this.isSlotEmpty = !slot.assignedNodes().filter((node) => !this.isIgnorable(node)).length;
             this.requestUpdate();
         };
     }
@@ -107,18 +106,18 @@ let Item = class Item extends ControlElement {
         display: flex;
         align-items: center;
       }
-      [part=checkbox] {
+      [part='checkbox'] {
         pointer-events: none;
       }
-      [part=left],
-      [part=right] {
+      [part='left'],
+      [part='right'] {
         display: flex;
         align-items: center;
       }
-      [part=center] {
+      [part='center'] {
         flex: 1;
       }
-      :host([type=divider]) > * {
+      :host([type='divider']) > * {
         display: none;
       }
     `;
@@ -128,8 +127,7 @@ let Item = class Item extends ControlElement {
      * @returns whether node can be ignored.
      */
     isIgnorable(node) {
-        return node.nodeType === document.COMMENT_NODE
-            || isAllWhitespaceTextNode(node);
+        return node.nodeType === document.COMMENT_NODE || isAllWhitespaceTextNode(node);
     }
     /**
      * Handles aria-selected or aria-checked when toggle between single and multiple selection mode
@@ -216,13 +214,15 @@ let Item = class Item extends ControlElement {
      * @returns return true if an item is overflown.
      */
     isItemOverflown() {
-        return this.isItemElementOverflown(this.labelRef.value) || this.isItemElementOverflown(this.subLabelRef.value);
+        return (this.isItemElementOverflown(this.labelRef.value) || this.isItemElementOverflown(this.subLabelRef.value));
     }
     /**
      * Get icon template if icon attribute is defined
      */
     get iconTemplate() {
-        return this.icon !== null && this.icon !== undefined ? html `<ef-icon part="icon" .icon="${this.icon}"></ef-icon>` : undefined;
+        return this.icon !== null && this.icon !== undefined
+            ? html `<ef-icon part="icon" .icon="${this.icon}"></ef-icon>`
+            : undefined;
     }
     /**
      * Get subLabel template if it is defined and no slot content present
@@ -241,7 +241,10 @@ let Item = class Item extends ControlElement {
      */
     get slotContent() {
         const nodes = this.slotRef.value?.assignedNodes() || [];
-        return nodes.map(node => node.textContent).join(' ').trim();
+        return nodes
+            .map((node) => node.textContent)
+            .join(' ')
+            .trim();
     }
     /**
      * Get template for `for` attribute.
@@ -256,7 +259,9 @@ let Item = class Item extends ControlElement {
      */
     get multipleTemplate() {
         const multiple = this.multiple && (!this.type || this.type === 'text');
-        return multiple ? html `<ef-checkbox part="checkbox" .checked="${this.selected}" tabindex="-1"></ef-checkbox>` : undefined;
+        return multiple
+            ? html `<ef-checkbox part="checkbox" .checked="${this.selected}" tabindex="-1"></ef-checkbox>`
+            : undefined;
     }
     /**
      * Return true if the item can be highlighted. True if not disabled and type is Text
@@ -274,8 +279,7 @@ let Item = class Item extends ControlElement {
     render() {
         return html `
       <div part="left">
-        ${this.iconTemplate}
-        ${this.multipleTemplate}
+        ${this.iconTemplate} ${this.multipleTemplate}
         <slot name="left"></slot>
       </div>
       <div part="center" ${ref(this.labelRef)}>

package/lib/jsx.d.ts

@@ -48,9 +48,11 @@ export declare namespace JSXInterface {
     innerHTML?: string;
     key?: string | number;
     accessKey?: string;
-    class?: string | {
-      [className: string]: boolean;
-    };
+    class?:
+      | string
+      | {
+          [className: string]: boolean;
+        };
     contentEditable?: boolean | string;
     contenteditable?: boolean | string;
     contextMenu?: string;
@@ -220,4 +222,4 @@ export declare namespace JSXInterface {
     onTransitionEnd?: (event: TransitionEvent) => void;
     onTransitionEndCapture?: (event: TransitionEvent) => void;
   }
-}
+}

package/lib/label/index.d.ts

@@ -1,5 +1,5 @@
 import { JSXInterface } from '../jsx';
-import { BasicElement, TemplateResult, CSSResultGroup } from '@refinitiv-ui/core';
+import { BasicElement, CSSResultGroup, TemplateResult } from '@refinitiv-ui/core';
 /**
  * Displays a text with alternative truncation
  */

package/lib/label/index.js

@@ -1,10 +1,10 @@
 import { __decorate } from "tslib";
-import { BasicElement, html, css } from '@refinitiv-ui/core';
+import { BasicElement, 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 { styleMap } from '@refinitiv-ui/core/directives/style-map.js';
-import { VERSION } from '../version.js';
 import { addTooltipCondition, removeTooltipCondition } from '../tooltip/index.js';
+import { VERSION } from '../version.js';
 /**
  * Configuration object
  * for mutations observers
@@ -144,7 +144,10 @@ let Label = class Label extends BasicElement {
     recalculate(mutation = false) {
         const oldValue = this.text;
         const raw = this.textContent || '';
-        this.chunks = raw.split(_).map(chunk => chunk.trim()).filter(chunk => chunk);
+        this.chunks = raw
+            .split(_)
+            .map((chunk) => chunk.trim())
+            .filter((chunk) => chunk);
         const newValue = this.text;
         if (oldValue !== newValue) {
             this.requestUpdate('text', oldValue);
@@ -178,7 +181,9 @@ let Label = class Label extends BasicElement {
         }
         const leftPart = html `<div class="split left">${left.join(_)}</div>`;
         const centerPart = isSingleWord ? undefined : html `<div class="split center">&nbsp;</div>`;
-        const rightPart = right.length ? html `<div class="split right"><span dir="ltr">${right.join(_)}</span></div>` : undefined;
+        const rightPart = right.length
+            ? html `<div class="split right"><span dir="ltr">${right.join(_)}</span></div>`
+            : undefined;
         return html `${leftPart}${centerPart}${rightPart}`;
     }
     /**
@@ -190,9 +195,7 @@ let Label = class Label extends BasicElement {
             '-webkit-line-clamp': `${this.lineClamp}`,
             wordBreak: this.lineClamp === 1 ? 'break-all' : ''
         };
-        return html `
-      <span class="clamp" style="${styleMap(styles)}">${this.text}</span>
-    `;
+        return html ` <span class="clamp" style="${styleMap(styles)}">${this.text}</span> `;
     }
     /**
      * A `TemplateResult` that will be used