@refinitiv-ui/elements 6.8.7 → 6.8.9

package/lib/icon/index.js

@@ -1,13 +1,13 @@
 import { __decorate } from "tslib";
-import { BasicElement, svg, css, DeprecationNotice } from '@refinitiv-ui/core';
+import { consume } from '@lit-labs/context';
+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 { efConfig } from '../configuration/index.js';
 import { VERSION } from '../version.js';
 import { IconLoader } from './utils/IconLoader.js';
 export { preload } from './utils/IconLoader.js';
-import { consume } from '@lit-labs/context';
-import { efConfig } from '../configuration/index.js';
 const EmptyTemplate = svg ``;
 /**
  * Cache for reusing SVG template results across multiple icons.
@@ -116,7 +116,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
@@ -147,8 +147,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;
@@ -161,8 +160,7 @@ let Icon = class Icon extends BasicElement {
      */
     setPrefix() {
         if (!IconLoader.isPrefixSet) {
-            const CDNPrefix = this.getComputedVariable('--cdn-prefix')
-                .replace(/^('|")|('|")$/g, '');
+            const CDNPrefix = this.getComputedVariable('--cdn-prefix').replace(/^('|")|('|")$/g, '');
             IconLoader.setCdnPrefix(CDNPrefix);
         }
     }

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

@@ -8,6 +8,7 @@ declare class IconLoader extends SVGLoader {
 declare const iconLoaderInstance: IconLoader;
 export { iconLoaderInstance as IconLoader };
 /**
+ * @deprecated Icon `preload()` is deprecated.
  * Helper function to preload set of icons.
  * It could help to reduce icon loading delay when ef-icon has a known set of icons that it can use.
  * @param attrs - list of arguments, representing icons.

package/lib/icon/utils/IconLoader.js

@@ -1,3 +1,4 @@
+import { DeprecationNotice } from '@refinitiv-ui/core';
 import { SVGLoader } from '@refinitiv-ui/utils/loader.js';
 /**
  * Caches and provides icon SVGs, Loaded either by name from CDN or directly by URL.
@@ -8,6 +9,12 @@ class IconLoader extends SVGLoader {
 const iconLoaderInstance = new IconLoader();
 export { iconLoaderInstance as IconLoader };
 /**
+ * Deprecation notice displays a warning message
+ * when deprecated features are used.
+ */
+const deprecationNotice = new DeprecationNotice('Icon `preload()` is deprecated.');
+/**
+ * @deprecated Icon `preload()` is deprecated.
  * Helper function to preload set of icons.
  * It could help to reduce icon loading delay when ef-icon has a known set of icons that it can use.
  * @param attrs - list of arguments, representing icons.
@@ -15,5 +22,6 @@ export { iconLoaderInstance as IconLoader };
  * @returns Array of promises, which will be resolved with SVG bodies.
  */
 export const preload = (...attrs) => {
-    return attrs.map(icon => iconLoaderInstance.loadSVG(icon));
+    deprecationNotice.once();
+    return attrs.map((icon) => iconLoaderInstance.loadSVG(icon));
 };

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
@@ -37,10 +37,10 @@ export declare class InteractiveChart extends ResponsiveElement {
      */
     disabledJumpButton: boolean;
     /**
-    * @deprecated `legendstyle` attribute is deprecated, use `legend-style` instead.
-    * @ignore
-    * Set legend style i.e. `horizontal`, `vertical`. Default is `vertical`.
-    **/
+     * @deprecated `legendstyle` attribute is deprecated, use `legend-style` instead.
+     * @ignore
+     * Set legend style i.e. `horizontal`, `vertical`. Default is `vertical`.
+     **/
     deprecatedLegendStyle: LegendStyle | undefined;
     /**
      * Set legend style i.e. `horizontal`, `vertical`.
@@ -53,7 +53,7 @@ export declare class InteractiveChart extends ResponsiveElement {
     /**
      * Deprecation notice displays a warning message
      * when deprecated features are used.
-    */
+     */
     private deprecationNotice;
     /**
      * @ignore
@@ -107,9 +107,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
@@ -119,9 +119,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
@@ -190,15 +190,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
@@ -264,13 +264,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
@@ -346,11 +346,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, DeprecationNotice } from '@refinitiv-ui/core';
+import { createChart as chart } from 'lightweight-charts';
+import { DeprecationNotice, 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
@@ -37,7 +37,7 @@ let InteractiveChart = InteractiveChart_1 = class InteractiveChart extends Respo
         /**
          * Deprecation notice displays a warning message
          * when deprecated features are used.
-        */
+         */
         this.deprecationNotice = new DeprecationNotice('`legendstyle` attribute and property are deprecated. Use `legend-style` for attribute and `legendStyle` property instead.');
         /**
          * @ignore
@@ -169,7 +169,8 @@ let InteractiveChart = InteractiveChart_1 = class InteractiveChart extends Respo
             if (changedProperties.has('deprecatedLegendStyle')) {
                 this.deprecationNotice.show();
             }
-            const oldLegendStyle = (changedProperties.get('legend-style') || changedProperties.get('deprecatedLegendStyle'));
+            const oldLegendStyle = (changedProperties.get('legend-style') ||
+                changedProperties.get('deprecatedLegendStyle'));
             this.onLegendStyleChange(this.legendStyle, oldLegendStyle);
         }
     }
@@ -192,9 +193,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();
@@ -221,9 +222,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);
@@ -417,9 +418,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;
@@ -471,12 +472,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++;
                     }
                 }
@@ -491,7 +492,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);
@@ -500,10 +502,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);
@@ -635,7 +637,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) {
@@ -657,11 +659,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.
-             */
-            /* istanbul ignore next */
             else if (rowLegend && dataSet.length) {
+                /* Update value legend element on subscribeCrosshairMove.
+                 * Don't need to be updated if chart has no data.
+                 */
+                /* istanbul ignore next */
                 let value;
                 let priceColor = '';
                 // When have price on event moved on the crosshair
@@ -682,7 +684,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;
                     }
@@ -710,7 +715,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;
@@ -738,16 +743,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),
@@ -885,7 +892,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;
@@ -897,7 +906,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;
@@ -905,10 +916,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;
                     }
                 }
@@ -942,7 +953,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
@@ -1001,11 +1012,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 {
@@ -1015,7 +1026,7 @@ let InteractiveChart = InteractiveChart_1 = class InteractiveChart extends Respo
         z-index: 0;
       }
 
-      [part=legend] {
+      [part='legend'] {
         position: absolute;
         z-index: 1000;
       }
@@ -1035,8 +1046,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)}>