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

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/interactive-chart/themes/halo/dark/index.js

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

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

@@ -1,3 +1,2 @@
 import '@refinitiv-ui/elements/tooltip/themes/halo/light';
-
 dispatchEvent(new CustomEvent('ef.customStyles.define', { detail: { name: 'ef-interactive-chart', styles: ':host{--chart-color-1:#334BFF;--chart-color-2:#000000;--chart-color-3:#7F6400;--chart-color-4:#71549F;--chart-color-5:#007678;--chart-color-6:#CC4000;--chart-color-7:#007653;--chart-color-8:#D22962;--chart-color-9:#595959;--chart-color-10:#236F99;--line-width:2;--fill-opacity:0.4;--text-color:rgba(13, 13, 13, 0.8);--background-color:#FAFAFA;--chart-up-color:#246B3E;--chart-down-color:#B63243;--cross-hair-color:#404040;--grid-vert-line-color:rgba(242, 242, 242, 0.5);--grid-horz-line-color:rgba(242, 242, 242, 0.5);--scale-price-border-color:rgba(242, 242, 242, 0.5);--scale-times-border-color:rgba(242, 242, 242, 0.5)}:host [part=legend]{top:15px;color:var(--text-color);font-size:90%}:host [part=legend] .row{margin:1px 5px}:host [part=legend] .price{margin-right:5px}:host [part=legend] .ohlc{margin-right:2px}:host [part=legend].horizontal{display:flex;max-width:calc(100% - 75px);flex-wrap:wrap}:host [part=jump-button-container]{display:none;position:absolute;transition:background-color .1s;width:23px;height:23px;color:#0d0d0d;border:1px solid #ccc;box-shadow:0 0 0 0 rgba(0,0,0,.25);border-radius:100%;z-index:1000;cursor:pointer;background-color:#fafafa}:host [part=jump-button-container]:hover{color:#fff;border-color:#1429bd;box-shadow:0 0 0 0 rgba(0,0,0,.55);background-color:#fff}:host [part=jump-button-container]:active{color:#fff;box-shadow:0 0 0 0 rgba(0,0,0,.25);background-color:#fafafa}:host [part=jump-button]{position:relative;display:inline-block;width:5px;height:5px;border-top:2px solid #0d0d0d;border-right:2px solid #0d0d0d;transform:rotate(45deg) skew(0);margin-top:8px;margin-left:7px}:host [part=branding-container]{position:absolute;opacity:.6;bottom:3px;z-index:1000}:host [part=branding-container].left{left:10px}:host [part=branding-container].right{right:10px}:host [part=branding-container].none{top:13px;right:13px}:host [part=branding]{height:22px;width:22px;fill:rgba(13,13,13,.8)}:host [part=jump-button-container],:host [part=jump-button-container]:hover,:host [part=jump-button]{border-color:#8d8d8d}' }}));

package/lib/interactive-chart/themes/solar/charcoal/index.js

@@ -1,3 +1,2 @@
 import '@refinitiv-ui/elements/tooltip/themes/solar/charcoal';
-
 dispatchEvent(new CustomEvent('ef.customStyles.define', { detail: { name: 'ef-interactive-chart', styles: ':host{--chart-color-1:#FF9933;--chart-color-2:#B10CF2;--chart-color-3:#7DE442;--chart-color-4:#3780BF;--chart-color-5:#FA4C11;--chart-color-6:#FFE433;--chart-color-7:#8C8C8C;--chart-color-8:#5A54FF;--chart-color-9:#E53766;--chart-color-10:#648608;--line-width:2;--fill-opacity:0.4;--text-color:rgba(194, 194, 194, 0.8);--background-color:#1A1A1C;--chart-up-color:#39C46E;--chart-down-color:#F5475B;--cross-hair-color:#E2E2E2;--grid-vert-line-color:rgba(10, 10, 10, 0.5);--grid-horz-line-color:rgba(10, 10, 10, 0.5);--scale-price-border-color:rgba(10, 10, 10, 0.5);--scale-times-border-color:rgba(10, 10, 10, 0.5);--chart-color-1:#FF9933;--chart-color-2:#B10CF2;--chart-color-3:#7DE442;--chart-color-4:#3780BF;--chart-color-5:#FA4C11;--chart-color-6:#FFE433;--chart-color-7:#8C8C8C;--chart-color-8:#5A54FF;--chart-color-9:#E53766;--chart-color-10:#648608;--chart-color-11:#48CBF7;--chart-color-12:#F3478E;--chart-color-13:#508BF7;--chart-color-14:#EFF748;--chart-color-15:#FF4043;--chart-color-16:#A7DB0B;--chart-color-17:#C2C2C2;--chart-color-18:#1578AD;--chart-color-19:#F2B530;--chart-color-20:#297835;--chart-color-21:#7045FF;--chart-color-22:#DD48F7;--chart-color-23:#09A8C0;--chart-color-24:#60E65C;--chart-color-25:#2960A3;--grid-vert-line-color:rgba(194, 194, 194, 0.1);--grid-horz-line-color:rgba(194, 194, 194, 0.1);--scale-price-border-color:rgba(194, 194, 194, 0.1);--scale-times-border-color:rgba(194, 194, 194, 0.1)}:host [part=legend]{top:15px;color:var(--text-color);font-size:90%}:host [part=legend] .row{margin:1px 5px}:host [part=legend] .price{margin-right:5px}:host [part=legend] .ohlc{margin-right:2px}:host [part=legend].horizontal{display:flex;max-width:calc(100% - 75px);flex-wrap:wrap}:host [part=jump-button-container]{display:none;position:absolute;transition:background-color .1s;width:23px;height:23px;color:#c2c2c2;background-color:#3c3c42;border:1px solid #000;box-shadow:0 0 0 0 rgba(0,0,0,.6);border-radius:100%;z-index:1000;cursor:pointer;background-image:linear-gradient(rgba(255,255,255,.1) 10%,rgba(255,255,255,0) 100%)}:host [part=jump-button-container]:hover{color:#e2e2e2;background-color:#4d4d55;border-color:#000;box-shadow:0 0 0 0 rgba(0,0,0,.9)}:host [part=jump-button-container]:active{background-color:#38383d;color:#c2c2c2;box-shadow:0 0 0 0 rgba(0,0,0,.6);background-image:linear-gradient(rgba(255,255,255,.1) 10%,rgba(255,255,255,0) 100%)}:host [part=jump-button]{position:relative;display:inline-block;width:5px;height:5px;border-top:2px solid #c2c2c2;border-right:2px solid #c2c2c2;transform:rotate(45deg) skew(0);margin-top:8px;margin-left:7px}:host [part=branding-container]{position:absolute;opacity:.6;bottom:3px;z-index:1000}:host [part=branding-container].left{left:10px}:host [part=branding-container].right{right:10px}:host [part=branding-container].none{top:13px;right:13px}:host [part=branding]{height:22px;width:22px;fill:rgba(194,194,194,.8)}:host [part=jump-button-container]:hover [part=jump-button]{border-color:#e2e2e2}' }}));

package/lib/interactive-chart/themes/solar/pearl/index.js

@@ -1,3 +1,2 @@
 import '@refinitiv-ui/elements/tooltip/themes/solar/pearl';
-
 dispatchEvent(new CustomEvent('ef.customStyles.define', { detail: { name: 'ef-interactive-chart', styles: ':host{--chart-color-1:#EE7600;--chart-color-2:#B10CF2;--chart-color-3:#309054;--chart-color-4:#3780BF;--chart-color-5:#FA4C11;--chart-color-6:#D9B500;--chart-color-7:#8C8C8C;--chart-color-8:#5A54FF;--chart-color-9:#E53766;--chart-color-10:#648608;--line-width:2;--fill-opacity:0.4;--text-color:rgba(72, 72, 72, 0.8);--background-color:#FFFFFF;--chart-up-color:#309054;--chart-down-color:#D94255;--cross-hair-color:#ACAFB5;--grid-vert-line-color:rgba(213, 216, 219, 0.5);--grid-horz-line-color:rgba(213, 216, 219, 0.5);--scale-price-border-color:rgba(213, 216, 219, 0.5);--scale-times-border-color:rgba(213, 216, 219, 0.5);--chart-color-1:#EE7600;--chart-color-2:#B10CF2;--chart-color-3:#309054;--chart-color-4:#3780BF;--chart-color-5:#FA4C11;--chart-color-6:#D9B500;--chart-color-7:#8C8C8C;--chart-color-8:#5A54FF;--chart-color-9:#E53766;--chart-color-10:#648608;--chart-color-11:#40B6DE;--chart-color-12:#F3478E;--chart-color-13:#508BF7;--chart-color-14:#AAB218;--chart-color-15:#FF4043;--chart-color-16:#80A808;--chart-color-17:#707070;--chart-color-18:#1578AC;--chart-color-19:#D9A22B;--chart-color-20:#297835;--chart-color-21:#7045FF;--chart-color-22:#DD48F7;--chart-color-23:#09A8C0;--chart-color-24:#4BB347;--chart-color-25:#2960A3;--grid-vert-line-color:rgba(72, 72, 72, 0.1);--grid-horz-line-color:rgba(72, 72, 72, 0.1);--scale-price-border-color:rgba(72, 72, 72, 0.1);--scale-times-border-color:rgba(72, 72, 72, 0.1)}:host [part=legend]{top:15px;color:var(--text-color);font-size:90%}:host [part=legend] .row{margin:1px 5px}:host [part=legend] .price{margin-right:5px}:host [part=legend] .ohlc{margin-right:2px}:host [part=legend].horizontal{display:flex;max-width:calc(100% - 75px);flex-wrap:wrap}:host [part=jump-button-container]{display:none;position:absolute;transition:background-color .1s;width:23px;height:23px;color:#505050;background-color:#fafbfc;border:1px solid #a9afba;box-shadow:0 0 0 0 rgba(0,0,0,.3);border-radius:100%;z-index:1000;cursor:pointer;background-image:linear-gradient(rgba(0,0,0,0) 0,rgba(0,0,0,.1) 100%)}:host [part=jump-button-container]:hover{color:#1d1d1d;background-color:#fff;border-color:#a9afba;box-shadow:0 0 0 0 rgba(0,0,0,.6)}:host [part=jump-button-container]:active{background-color:#fff;color:#1d1d1d;box-shadow:0 0 0 0 rgba(0,0,0,.3);background-image:none}:host [part=jump-button]{position:relative;display:inline-block;width:5px;height:5px;border-top:2px solid #505050;border-right:2px solid #505050;transform:rotate(45deg) skew(0);margin-top:8px;margin-left:7px}:host [part=branding-container]{position:absolute;opacity:.6;bottom:3px;z-index:1000}:host [part=branding-container].left{left:10px}:host [part=branding-container].right{right:10px}:host [part=branding-container].none{top:13px;right:13px}:host [part=branding]{height:22px;width:22px;fill:rgba(72,72,72,.8)}:host [part=jump-button-container]:hover [part=jump-button]{border-color:#1d1d1d}' }}));

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/item/themes/halo/dark/index.js

@@ -1,4 +1,3 @@
 import '@refinitiv-ui/elements/icon/themes/halo/dark';
 import '@refinitiv-ui/elements/checkbox/themes/halo/dark';
-
 dispatchEvent(new CustomEvent('ef.customStyles.define', { detail: { name: 'ef-item', styles: ':host{line-height:normal;outline:0;cursor:pointer;padding:0 8px;min-height:24px;box-sizing:border-box;touch-action:manipulation}:host([selected]){color:#fff;font-weight:600}:host([readonly]){cursor:default}:host([focused]),:host([highlighted]){background-color:#1429bd;color:#fff}:host([focused]:not([selected])),:host([highlighted]:not([selected])){color:#fff}:host [part=center],:host [part=sub-label]{text-overflow:ellipsis;overflow:hidden;white-space:nowrap}:host([disabled]){color:rgba(204,204,204,.5)}:host([type=divider]),:host([type=header]){pointer-events:none;min-height:auto}:host([type=divider]) [part=sub-label],:host([type=header]) [part=sub-label]{display:none}:host([type=header]){color:#999;background-color:transparent;font-size:83%;font-weight:600;border:none;height:24px;align-items:flex-end;margin:0;min-height:0;text-transform:uppercase;align-items:center}:host([type=divider]){border:none;padding:0;margin:0;height:5px;background:linear-gradient(#404040,#404040) 0 center/calc(100% - (0px * 2)) 1px no-repeat}:host [part=checkbox],:host [part=icon],:host [part=left] ::slotted(*){margin:0 .5em 0 0}:host [part=right] ::slotted(*){margin-left:.5em}:host [part=checkbox]{margin-right:8px}:host [part=sub-label]{font-size:90%}:host([sub-label]){padding:4px 8px}:host([selected]:not([highlighted]):not([focused])){background-color:#333}:host([selected]:not([highlighted]):not([focused]):not([multiple])){background-image:linear-gradient(#334bff,#334bff);background-size:4px 100%;background-position:left top;background-repeat:no-repeat}:host([selected][focused]),:host([selected][highlighted]){color:#fff}' }}));

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

@@ -1,4 +1,3 @@
 import '@refinitiv-ui/elements/icon/themes/halo/light';
 import '@refinitiv-ui/elements/checkbox/themes/halo/light';
-
 dispatchEvent(new CustomEvent('ef.customStyles.define', { detail: { name: 'ef-item', styles: ':host{line-height:normal;outline:0;cursor:pointer;padding:0 8px;min-height:24px;box-sizing:border-box;touch-action:manipulation}:host([selected]){color:#0d0d0d;font-weight:600}:host([readonly]){cursor:default}:host([focused]),:host([highlighted]){background-color:#1429bd;color:#fff}:host([focused]:not([selected])),:host([highlighted]:not([selected])){color:#fff}:host [part=center],:host [part=sub-label]{text-overflow:ellipsis;overflow:hidden;white-space:nowrap}:host([disabled]){color:rgba(64,64,64,.5)}:host([type=divider]),:host([type=header]){pointer-events:none;min-height:auto}:host([type=divider]) [part=sub-label],:host([type=header]) [part=sub-label]{display:none}:host([type=header]){color:#737373;background-color:transparent;font-size:83%;font-weight:600;border:none;height:24px;align-items:flex-end;margin:0;min-height:0;text-transform:uppercase;align-items:center}:host([type=divider]){border:none;padding:0;margin:0;height:5px;background:linear-gradient(#d9d9d9,#d9d9d9) 0 center/calc(100% - (0px * 2)) 1px no-repeat}:host [part=checkbox],:host [part=icon],:host [part=left] ::slotted(*){margin:0 .5em 0 0}:host [part=right] ::slotted(*){margin-left:.5em}:host [part=checkbox]{margin-right:8px}:host [part=sub-label]{font-size:90%}:host([sub-label]){padding:4px 8px}:host([selected]:not([highlighted]):not([focused])){background-color:#e6e6e6}:host([selected]:not([highlighted]):not([focused]):not([multiple])){background-image:linear-gradient(#334bff,#334bff);background-size:4px 100%;background-position:left top;background-repeat:no-repeat}:host([selected][focused]),:host([selected][highlighted]){color:#fff}' }}));

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

@@ -1,4 +1,3 @@
 import '@refinitiv-ui/elements/icon/themes/solar/charcoal';
 import '@refinitiv-ui/elements/checkbox/themes/solar/charcoal';
-
 dispatchEvent(new CustomEvent('ef.customStyles.define', { detail: { name: 'ef-item', styles: ':host{line-height:normal;outline:0;cursor:pointer;padding:0 7px;min-height:22px;box-sizing:border-box;touch-action:manipulation}:host([selected]){color:#f93}:host([readonly]){cursor:default}:host([focused]),:host([highlighted]){background-color:rgba(255,255,255,.1)}:host([focused]:not([selected])),:host([highlighted]:not([selected])){color:#fff}:host [part=center],:host [part=sub-label]{text-overflow:ellipsis;overflow:hidden;white-space:nowrap}:host([disabled]){color:rgba(194,194,194,.5)}:host([type=divider]),:host([type=header]){pointer-events:none;min-height:auto}:host([type=divider]) [part=sub-label],:host([type=header]) [part=sub-label]{display:none}:host([type=header]){color:#c2c2c2;background-color:#4a4a52;font-size:100%;font-weight:400;border:1px solid #0a0a0a;height:22px;align-items:flex-end;margin:0;min-height:0;text-transform:uppercase;border:none;border-top:1px solid #0a0a0a;border-bottom:1px solid transparent;text-transform:none;align-items:center}:host([type=divider]){border:none;padding:0;margin:0;height:5px;background:linear-gradient(#2e2e33,#2e2e33) 0 center/calc(100% - (0px * 2)) 1px no-repeat}:host [part=checkbox],:host [part=icon],:host [part=left] ::slotted(*){margin:0 .5em 0 0}:host [part=sub-label]{font-size:80%}:host [part=icon],:host [part=left] ::slotted(*){margin-right:.33em}:host [part=right] ::slotted(*){margin-left:.33em}' }}));

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

@@ -1,4 +1,3 @@
 import '@refinitiv-ui/elements/icon/themes/solar/pearl';
 import '@refinitiv-ui/elements/checkbox/themes/solar/pearl';
-
 dispatchEvent(new CustomEvent('ef.customStyles.define', { detail: { name: 'ef-item', styles: ':host{line-height:normal;outline:0;cursor:pointer;padding:0 7px;min-height:22px;box-sizing:border-box;touch-action:manipulation}:host([selected]){color:#ee7600}:host([readonly]){cursor:default}:host([focused]),:host([highlighted]){background-color:rgba(0,0,0,.08)}:host([focused]:not([selected])),:host([highlighted]:not([selected])){color:#000}:host [part=center],:host [part=sub-label]{text-overflow:ellipsis;overflow:hidden;white-space:nowrap}:host([disabled]){color:rgba(72,72,72,.5)}:host([type=divider]),:host([type=header]){pointer-events:none;min-height:auto}:host([type=divider]) [part=sub-label],:host([type=header]) [part=sub-label]{display:none}:host([type=header]){color:#484848;background-color:#f2f3f7;font-size:100%;font-weight:400;border:1px solid #d5d8db;height:22px;align-items:flex-end;margin:0;min-height:0;text-transform:uppercase;border:none;border-top:1px solid #d5d8db;border-bottom:1px solid transparent;text-transform:none;align-items:center}:host([type=divider]){border:none;padding:0;margin:0;height:5px;background:linear-gradient(#a9afba,#a9afba) 0 center/calc(100% - (0px * 2)) 1px no-repeat}:host [part=checkbox],:host [part=icon],:host [part=left] ::slotted(*){margin:0 .5em 0 0}:host [part=sub-label]{font-size:80%}:host [part=icon],:host [part=left] ::slotted(*){margin-right:.33em}:host [part=right] ::slotted(*){margin-left:.33em}' }}));

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

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

@@ -1,3 +1,2 @@
 import '@refinitiv-ui/elements/tooltip/themes/halo/dark';
-
 dispatchEvent(new CustomEvent('ef.customStyles.define', { detail: { name: 'ef-label', styles: ':host([warning]){color:#ffc800}:host([error]),:host([error][warning]){color:#f5475b}' }}));

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

@@ -1,3 +1,2 @@
 import '@refinitiv-ui/elements/tooltip/themes/halo/light';
-
 dispatchEvent(new CustomEvent('ef.customStyles.define', { detail: { name: 'ef-label', styles: ':host([warning]){color:#cca000}:host([error]),:host([error][warning]){color:#d94255}' }}));

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

@@ -1,3 +1,2 @@
 import '@refinitiv-ui/elements/tooltip/themes/solar/charcoal';
-
 dispatchEvent(new CustomEvent('ef.customStyles.define', { detail: { name: 'ef-label', styles: ':host([warning]){color:#f93}:host([error]),:host([error][warning]){color:#f5475b}' }}));

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

@@ -1,3 +1,2 @@
 import '@refinitiv-ui/elements/tooltip/themes/solar/pearl';
-
 dispatchEvent(new CustomEvent('ef.customStyles.define', { detail: { name: 'ef-label', styles: ':host([warning]){color:#f93}:host([error]),:host([error][warning]){color:#d94255}' }}));

package/lib/layout/index.d.ts

@@ -1,5 +1,5 @@
 import { JSXInterface } from '../jsx';
-import { ResponsiveElement, TemplateResult, CSSResultGroup, PropertyValues } from '@refinitiv-ui/core';
+import { CSSResultGroup, PropertyValues, ResponsiveElement, TemplateResult } from '@refinitiv-ui/core';
 /**
  * Layout component for creating responsive applications and components
  * @fires resize - Fired when the element's size changes.
@@ -11,11 +11,11 @@ export declare class Layout extends ResponsiveElement {
      */
     static get version(): 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;
     /**
      * Displays debug lines.
@@ -88,7 +88,7 @@ export declare class Layout extends ResponsiveElement {
      * A `TemplateResult` that will be used
      * to render the updated internal template.
      * @return Render template
-      */
+     */
     protected render(): TemplateResult;
 }
 declare global {