@refinitiv-ui/elements 6.8.7 → 6.8.9

package/lib/card/index.js

@@ -1,16 +1,16 @@
 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 { query } from '@refinitiv-ui/core/decorators/query.js';
 import { state } from '@refinitiv-ui/core/decorators/state.js';
-import { VERSION } from '../version.js';
+import '@refinitiv-ui/phrasebook/locale/en/card.js';
+import { translate } from '@refinitiv-ui/translate';
 import { isSlotEmpty } from '@refinitiv-ui/utils/is-slot-empty.js';
-import '../label/index.js';
 import '../button/index.js';
+import '../label/index.js';
 import '../overlay-menu/index.js';
-import '@refinitiv-ui/phrasebook/locale/en/card.js';
-import { translate } from '@refinitiv-ui/translate';
+import { VERSION } from '../version.js';
 /**
  * A card frame component.
  *
@@ -63,14 +63,15 @@ let Card = class Card extends BasicElement {
         display: flex;
         flex-flow: column nowrap;
       }
-      [part~=header] {
+      [part~='header'] {
         display: flex;
       }
-      [part~=header-body] {
+      [part~='header-body'] {
         flex: 1;
         min-width: 0px;
       }
-      [part~=footer]:not([part~="has-content"]), [part~=header]:not([part~="has-content"]) {
+      [part~='footer']:not([part~='has-content']),
+      [part~='header']:not([part~='has-content']) {
         display: none;
       }
     `;
@@ -172,24 +173,25 @@ let Card = class Card extends BasicElement {
      * @return menu template
      */
     get menuTemplate() {
-        return html `${this.menuData ? html `
-      <ef-button
-        part="menu-button"
-        icon="more-vertical"
-        transparent
-        aria-label=${this.t('OPEN_MENU')}
-        aria-haspopup="true"
-        aria-controls="menu-popup"
-        aria-expanded=${this.menuOpened}
-        @tap=${this.openMenu}
-      ></ef-button>
-      <ef-overlay-menu
-        id="menu-popup"
-        part="menu-popup"
-        .data=${this.menuData}
-        position="bottom-end"
-        @opened-changed=${this.onMenuOpenChanged}></ef-overlay-menu>` : undefined}
-    `;
+        return html `${this.menuData
+            ? html ` <ef-button
+            part="menu-button"
+            icon="more-vertical"
+            transparent
+            aria-label=${this.t('OPEN_MENU')}
+            aria-haspopup="true"
+            aria-controls="menu-popup"
+            aria-expanded=${this.menuOpened}
+            @tap=${this.openMenu}
+          ></ef-button>
+          <ef-overlay-menu
+            id="menu-popup"
+            part="menu-popup"
+            .data=${this.menuData}
+            position="bottom-end"
+            @opened-changed=${this.onMenuOpenChanged}
+          ></ef-overlay-menu>`
+            : undefined} `;
     }
     /**
      * Template of header
@@ -200,7 +202,9 @@ let Card = class Card extends BasicElement {
       <div part="header${this.withHeader ? ' has-content' : ''}">
         <div part="header-body">
           <slot name="header" @slotchange="${this.onHeaderSlotChange}"></slot>
-          ${!this.headerHasContent && this.header ? html `<ef-label line-clamp="3" part="header-text">${this.header}</ef-label>` : null}
+          ${!this.headerHasContent && this.header
+            ? html `<ef-label line-clamp="3" part="header-text">${this.header}</ef-label>`
+            : null}
         </div>
         ${this.menuTemplate}
       </div>
@@ -215,7 +219,9 @@ let Card = class Card extends BasicElement {
       <div part="footer${this.withFooter ? ' has-content' : ''}">
         <div part="footer-body">
           <slot name="footer" @slotchange="${this.onFooterSlotChange}"></slot>
-          ${!this.footerHasContent && this.footer ? html `<ef-label line-clamp="3">${this.footer}</ef-label>` : undefined}
+          ${!this.footerHasContent && this.footer
+            ? html `<ef-label line-clamp="3">${this.footer}</ef-label>`
+            : undefined}
         </div>
       </div>
     `;

package/lib/chart/helpers/legend.js

@@ -9,7 +9,7 @@ const isValidColor = (color) => {
      * Force return to string type because Chart.js doesn't support typescript
      * and some type of @types/chart.js isn't correct
      */
-    return (color && color !== 'transparent') ? color : undefined;
+    return color && color !== 'transparent' ? color : undefined;
 };
 /**
  * Get legend color by using point style
@@ -34,9 +34,9 @@ const getLegendColorUsePointStyle = (color1, color2) => {
  */
 const getLegendColorDontUsePointStyle = (dataset, solidFill = false) => {
     // Use background color for legend, if color of dataset or chart type is solid not opaque.
-    return isValidColor(solidFill ? dataset.backgroundColor : dataset.borderColor)
-        || isValidColor(dataset.pointBorderColor)
-        || dataset.pointBackgroundColor;
+    return (isValidColor(solidFill ? dataset.backgroundColor : dataset.borderColor) ||
+        isValidColor(dataset.pointBorderColor) ||
+        dataset.pointBackgroundColor);
 };
 /**
  * Get stroke style legend color
@@ -47,8 +47,9 @@ const getLegendColorDontUsePointStyle = (dataset, solidFill = false) => {
  */
 const getLegendStrokeStyle = (dataset, usePointStyle) => {
     if (usePointStyle) {
-        return getLegendColorUsePointStyle(dataset.pointBorderColor, dataset.pointBackgroundColor)
-            || isValidColor(dataset.borderColor) || dataset.backgroundColor;
+        return (getLegendColorUsePointStyle(dataset.pointBorderColor, dataset.pointBackgroundColor) ||
+            isValidColor(dataset.borderColor) ||
+            dataset.backgroundColor);
     }
     else {
         return isValidColor(dataset.borderColor) || getLegendColorDontUsePointStyle(dataset);
@@ -64,8 +65,9 @@ const getLegendStrokeStyle = (dataset, usePointStyle) => {
  */
 const getLegendFillStyle = (dataset, usePointStyle, solidFill = false) => {
     if (usePointStyle) {
-        return getLegendColorUsePointStyle(dataset.pointBackgroundColor, dataset.pointBorderColor)
-            || isValidColor(dataset.borderColor) || dataset.backgroundColor;
+        return (getLegendColorUsePointStyle(dataset.pointBackgroundColor, dataset.pointBorderColor) ||
+            isValidColor(dataset.borderColor) ||
+            dataset.backgroundColor);
     }
     else {
         return getLegendColorDontUsePointStyle(dataset, solidFill);

package/lib/chart/index.d.ts

@@ -1,11 +1,11 @@
 import { JSXInterface } from '../jsx';
 /// <reference types="chart.js" />
-import { BasicElement, PropertyValues, TemplateResult, CSSResultGroup } from '@refinitiv-ui/core';
 import 'chart.js/dist/Chart.bundle.min.js';
-import type { ChartJS, ChartConfig, ChartUpdateProps, DatasetColors } from './helpers/types';
-import type { Header } from '../header';
+import { BasicElement, CSSResultGroup, PropertyValues, TemplateResult } from '@refinitiv-ui/core';
 import '../header/index.js';
 import '../layout/index.js';
+import type { Header } from '../header';
+import type { ChartConfig, ChartJS, ChartUpdateProps, DatasetColors } from './helpers/types';
 declare global {
     interface Window {
         Chart: ChartJS;

package/lib/chart/index.js

@@ -1,16 +1,16 @@
 /* eslint @typescript-eslint/no-unsafe-call: 0 */
-/* eslint @typescript-eslint/no-unsafe-member-access: 0 */
 import { __decorate } from "tslib";
-import { BasicElement, html, css } from '@refinitiv-ui/core';
+/* eslint @typescript-eslint/no-unsafe-member-access: 0 */
+import 'chart.js/dist/Chart.bundle.min.js';
+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 { query } from '@refinitiv-ui/core/decorators/query.js';
-import { VERSION } from '../version.js';
 import { color as parseColor } from '@refinitiv-ui/utils/color.js';
-import 'chart.js/dist/Chart.bundle.min.js';
-import { legendHelper, merge } from './helpers/index.js';
 import '../header/index.js';
 import '../layout/index.js';
+import { VERSION } from '../version.js';
+import { legendHelper, merge } from './helpers/index.js';
 // Register plugins
 import doughnutCenterPlugin from './plugins/doughnut-center-label.js';
 window.Chart.pluginService.register(doughnutCenterPlugin);
@@ -61,9 +61,7 @@ let Chart = class Chart extends BasicElement {
                 return [];
             }
             const chartOption = DEFAULT_CHART_CONFIG[this.config.type];
-            if (this.datasets.length
-                && chartOption.legend
-                && Array.isArray(this.datasets[0].backgroundColor)) {
+            if (this.datasets.length && chartOption.legend && Array.isArray(this.datasets[0].backgroundColor)) {
                 let legends = [];
                 if (chartOption.legend.labels?.generateLabels) {
                     legends = chartOption.legend.labels?.generateLabels(chart);
@@ -266,7 +264,9 @@ let Chart = class Chart extends BasicElement {
     decorateConfig() {
         this.mergeConfigs();
         const extendColorsIfRequired = (currentColors, infoColors) => {
-            if (Array.isArray(currentColors) && Array.isArray(infoColors) && currentColors.length < infoColors.length) {
+            if (Array.isArray(currentColors) &&
+                Array.isArray(infoColors) &&
+                currentColors.length < infoColors.length) {
                 merge(currentColors, infoColors);
             }
         };
@@ -291,7 +291,8 @@ let Chart = class Chart extends BasicElement {
     datasetInfo(dataset) {
         const type = dataset.type || this.config?.type;
         let index = this.datasets.indexOf(dataset);
-        const isColorArray = (!!type && ['pie', 'doughnut', 'polarArea'].includes(type)) || type === 'bar' && this.datasets.length === 1;
+        const isColorArray = (!!type && ['pie', 'doughnut', 'polarArea'].includes(type)) ||
+            (type === 'bar' && this.datasets.length === 1);
         const isSolidFill = !!type && !CHART_TYPE_OPAQUE.includes(type);
         // Doughnut chart using same color sequence for each data in datasets
         let borderColor = null;
@@ -461,13 +462,12 @@ let Chart = class Chart extends BasicElement {
      * @return Render template
      */
     render() {
-        return html `
-      <ef-layout flex container>
-        <ef-header></ef-header>
-        <ef-layout part="chart" @resize="${this.onResize}">
-          <canvas id="canvas"></canvas>
-        </ef-layout>
-      </ef-layout>`;
+        return html ` <ef-layout flex container>
+      <ef-header></ef-header>
+      <ef-layout part="chart" @resize="${this.onResize}">
+        <canvas id="canvas"></canvas>
+      </ef-layout>
+    </ef-layout>`;
     }
 };
 __decorate([

package/lib/chart/plugins/doughnut-center-label.js

@@ -51,8 +51,9 @@ const plugins = {
                     chart._select = [];
                 }
                 if (chart.active.length) {
-                    if (chart._select.length && chart._select[0]._datasetIndex === chart.active[0]._datasetIndex
-                        && chart._select[0]._index === chart.active[0]._index) {
+                    if (chart._select.length &&
+                        chart._select[0]._datasetIndex === chart.active[0]._datasetIndex &&
+                        chart._select[0]._index === chart.active[0]._index) {
                         // reset value if user clicked on selected segment
                         chart._select = [];
                     }
@@ -110,7 +111,7 @@ const plugins = {
         }
         const textAreaWidth = chart.innerRadius;
         // Base font size is 30% and minus 4% per text lines ( if text has multiple lines ) of text area
-        const baseFontSize = textAreaWidth * (0.3 - (0.04 * (texts.length - 1)));
+        const baseFontSize = textAreaWidth * (0.3 - 0.04 * (texts.length - 1));
         // Keep minimum font size equal 5% of text area
         const computedFontSize = Math.max(textAreaWidth * 0.05, baseFontSize);
         // Use font size ratio from user if --doughnut-center-font-size CSS variable is provided
@@ -148,7 +149,7 @@ const plugins = {
                     targetText += '...';
                 }
             }
-            ctx.fillText(targetText, centerX, offsetY + (i * fontLineHeight));
+            ctx.fillText(targetText, centerX, offsetY + i * fontLineHeight);
         }
     },
     afterDatasetUpdate: function (chart) {
@@ -165,7 +166,7 @@ const plugins = {
         const datasetIndex = Number(config.selected.datasetIndex || 0);
         const visibleIndex = chart.getVisibleDatasetCount() - 1;
         // Validate index and datasetIndex
-        if (isNaN(selectedIndex) || (isNaN(datasetIndex) || datasetIndex < 0 || datasetIndex > visibleIndex)) {
+        if (isNaN(selectedIndex) || isNaN(datasetIndex) || datasetIndex < 0 || datasetIndex > visibleIndex) {
             return;
         }
         // Set selected item to the chart

package/lib/checkbox/index.d.ts

@@ -1,5 +1,5 @@
 import { JSXInterface } from '../jsx';
-import { ControlElement, TemplateResult, CSSResultGroup, PropertyValues } from '@refinitiv-ui/core';
+import { CSSResultGroup, ControlElement, PropertyValues, TemplateResult } from '@refinitiv-ui/core';
 import '../icon/index.js';
 /**
  * Form control for selecting one or several options

package/lib/checkbox/index.js

@@ -1,11 +1,11 @@
 import { __decorate } from "tslib";
-import { ControlElement, html, css } from '@refinitiv-ui/core';
+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 { query } from '@refinitiv-ui/core/decorators/query.js';
-import { VERSION } from '../version.js';
-import { registerOverflowTooltip } from '../tooltip/index.js';
 import '../icon/index.js';
+import { registerOverflowTooltip } from '../tooltip/index.js';
+import { VERSION } from '../version.js';
 /**
  * Form control for selecting one or several options
  * @fires checked-changed - Fired when the user checks or unchecks the checkbox. The event is not fired if the `checked` property is changed programmatically.
@@ -47,24 +47,25 @@ let Checkbox = class Checkbox extends ControlElement {
       :host {
         display: inline-block;
       }
-      [part=check] {
+      [part='check'] {
         visibility: hidden;
       }
-      :host([checked]) [part=check],
-      :host([indeterminate]) [part=check] {
+      :host([checked]) [part='check'],
+      :host([indeterminate]) [part='check'] {
         visibility: inherit;
       }
-      [part=label],
-      [part=container] {
+      [part='label'],
+      [part='container'] {
         display: inline-block;
         vertical-align: middle;
       }
-      [part=label] {
+      [part='label'] {
         white-space: nowrap;
         text-overflow: ellipsis;
         overflow: hidden;
       }
-      :host(:empty) [part=label], [part=label]:empty {
+      :host(:empty) [part='label'],
+      [part='label']:empty {
         display: none;
       }
     `;
@@ -147,9 +148,7 @@ let Checkbox = class Checkbox extends ControlElement {
     render() {
         return html `
       <div part="container">
-        <div part="check">
-          ${!this.indeterminate ? html `<ef-icon icon="tick"></ef-icon>` : null}
-        </div>
+        <div part="check">${!this.indeterminate ? html `<ef-icon icon="tick"></ef-icon>` : null}</div>
       </div>
       <div part="label"><slot></slot></div>
     `;

package/lib/clock/index.d.ts

@@ -1,5 +1,5 @@
 import { JSXInterface } from '../jsx';
-import { TemplateResult, CSSResultGroup, PropertyValues, ResponsiveElement, ElementSize } from '@refinitiv-ui/core';
+import { CSSResultGroup, ElementSize, PropertyValues, ResponsiveElement, TemplateResult } from '@refinitiv-ui/core';
 import '@refinitiv-ui/phrasebook/locale/en/clock.js';
 import { TranslatePromise } from '@refinitiv-ui/translate';
 /**
@@ -92,8 +92,8 @@ export declare class Clock extends ResponsiveElement {
      */
     showSeconds: boolean;
     /**
-    * Display clock in analogue style.
-    */
+     * Display clock in analogue style.
+     */
     analogue: boolean;
     /**
      * Enable interactive mode. Allowing the user to offset the value.
@@ -104,16 +104,16 @@ export declare class Clock extends ResponsiveElement {
      */
     private hoursPart;
     /**
-    * Getter for minutes part.
-    */
+     * Getter for minutes part.
+     */
     private minutesPart;
     /**
-    * Getter for seconds part.
-    */
+     * Getter for seconds part.
+     */
     private secondsPart;
     /**
-    * Size of the clock.
-    */
+     * Size of the clock.
+     */
     private size;
     /**
      * Get the display time in seconds.
@@ -208,11 +208,11 @@ export declare class Clock extends ResponsiveElement {
      */
     private getShiftAmountFromSegment;
     /**
-    * Returns `true` or `false` depends on the offset value's effect on giving segment
-    *
-    * @param segment segment
-    * @returns Result
-    */
+     * Returns `true` or `false` depends on the offset value's effect on giving segment
+     *
+     * @param segment segment
+     * @returns Result
+     */
     private isSegmentShifted;
     /**
      * Handles any keydown events
@@ -229,59 +229,59 @@ export declare class Clock extends ResponsiveElement {
      */
     private onTapStart;
     /**
-    * Handle valid control keys and execute their corresponding commands
-    * Will stop when readonly is set
-    * @param event Event Object
-    * @returns {void}
-    */
+     * Handle valid control keys and execute their corresponding commands
+     * Will stop when readonly is set
+     * @param event Event Object
+     * @returns {void}
+     */
     private manageControlKeys;
     /**
-    * Handles UP key press
-    * @returns {void}
-    */
+     * Handles UP key press
+     * @returns {void}
+     */
     private handleUpKey;
     /**
-    * Handle DOWN key press
-    * @returns {void}
-    */
+     * Handle DOWN key press
+     * @returns {void}
+     */
     private handleDownKey;
     /**
-    * Set aria-valuenow to display value and aria-valuetext to translated format
-    * @param updateAriaValueText condition to update aria-valueText
-    * @returns {void}
-    */
+     * Set aria-valuenow to display value and aria-valuetext to translated format
+     * @param updateAriaValueText condition to update aria-valueText
+     * @returns {void}
+     */
     private updateAriaValue;
     /**
-    * Get template of segment
-    * @param segment segment
-    * @param value segment's value
-    * @returns {TemplateResult} template
-    */
+     * Get template of segment
+     * @param segment segment
+     * @param value segment's value
+     * @returns {TemplateResult} template
+     */
     private generateSegmentTemplate;
     /**
-    * Template of divider
-    * @returns {TemplateResult} template
-    */
+     * Template of divider
+     * @returns {TemplateResult} template
+     */
     private get dividerTemplate();
     /**
-    * Template of amPm segment
-    * @returns {TemplateResult} template
-    */
+     * Template of amPm segment
+     * @returns {TemplateResult} template
+     */
     private get amPmTemplate();
     /**
-    * Template of hours segment
-    * @returns {TemplateResult} template
-    */
+     * Template of hours segment
+     * @returns {TemplateResult} template
+     */
     private get hoursSegmentTemplate();
     /**
-    * Template of minutes segment
-    * @returns {TemplateResult} template
-    */
+     * Template of minutes segment
+     * @returns {TemplateResult} template
+     */
     private get minutesSegmentTemplate();
     /**
-    * Template of seconds segment
-    * @returns {TemplateResult} template
-    */
+     * Template of seconds segment
+     * @returns {TemplateResult} template
+     */
     private get secondsSegmentTemplate();
     /**
      * Called when the element's dimension have changed
@@ -317,14 +317,14 @@ export declare class Clock extends ResponsiveElement {
      */
     protected willUpdate(changedProperties: PropertyValues): void;
     /**
-    * Template for digital clock
-    * @returns {TemplateResult} template
-    */
+     * Template for digital clock
+     * @returns {TemplateResult} template
+     */
     protected get digitalClockTemplate(): TemplateResult;
     /**
-    * Template for analogue clock
-    * @returns {TemplateResult} template
-    */
+     * Template for analogue clock
+     * @returns {TemplateResult} template
+     */
     protected get analogueClockTemplate(): TemplateResult;
     /**
      * A `TemplateResult` that will be used