@refinitiv-ui/elements 7.0.0 → 7.0.1

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/elements/chart.d.ts

@@ -1,11 +1,11 @@
 import { JSXInterface } from '../../jsx';
-import { BasicElement, nothing, PropertyValues, TemplateResult, CSSResultGroup } from '@refinitiv-ui/core';
-import { Ref } from '@refinitiv-ui/core/directives/ref.js';
 import { Chart as ChartJS } from 'chart.js';
-import type { ChartConfiguration, ChartDataset, ChartOptions, ChartType, LegendItem, UpdateMode } from 'chart.js';
 import 'chartjs-adapter-date-fns';
-import { DatasetColors } from '../helpers/index.js';
+import { BasicElement, CSSResultGroup, PropertyValues, TemplateResult, nothing } from '@refinitiv-ui/core';
+import { Ref } from '@refinitiv-ui/core/directives/ref.js';
 import '../../header/index.js';
+import { DatasetColors } from '../helpers/index.js';
+import type { ChartConfiguration, ChartDataset, ChartOptions, ChartType, LegendItem, UpdateMode } from 'chart.js';
 declare module 'chart.js' {
     interface PluginOptionsByType<TType extends ChartType = ChartType> {
         'ef-chart': object;

package/lib/chart/elements/chart.js

@@ -1,14 +1,14 @@
 import { __decorate } from "tslib";
-import { BasicElement, html, css, nothing } from '@refinitiv-ui/core';
+import { Chart as ChartJS } from 'chart.js';
+import 'chartjs-adapter-date-fns';
+import { BasicElement, css, html, nothing } from '@refinitiv-ui/core';
 import { customElement } from '@refinitiv-ui/core/decorators/custom-element.js';
 import { property } from '@refinitiv-ui/core/decorators/property.js';
-import { ref, createRef } from '@refinitiv-ui/core/directives/ref.js';
+import { createRef, ref } from '@refinitiv-ui/core/directives/ref.js';
 import { color as parseColor } from '@refinitiv-ui/utils/color.js';
+import '../../header/index.js';
 import { VERSION } from '../../version.js';
-import { Chart as ChartJS } from 'chart.js';
-import 'chartjs-adapter-date-fns';
 import { merge } from '../helpers/index.js';
-import '../../header/index.js';
 const CSS_COLOR_PREFIX = '--chart-color-';
 /**
  * Charting component that uses ChartJS library
@@ -40,7 +40,7 @@ let Chart = class Chart extends BasicElement {
                 let colors;
                 let borderColor;
                 let backgroundColor;
-                const isMultipleDatasets = (chart.config.data.datasets.length > 1);
+                const isMultipleDatasets = chart.config.data.datasets.length > 1;
                 // From old requirement, Only line, radar, scatter, polarArea type are opaque backgroundColor
                 switch (dataset.type ?? this.config?.type) {
                     case 'line':
@@ -66,7 +66,9 @@ let Chart = class Chart extends BasicElement {
                     case 'polarArea':
                         const index = isMultipleDatasets ? 0 : datasetIndex;
                         colors = this.generateColors(true, dataset.data ? dataset.data.length : 1, index);
-                        borderColor = isMultipleDatasets ? this.getComputedVariable('--multi-dataset-border-color', '#fff') : colors.solid;
+                        borderColor = isMultipleDatasets
+                            ? this.getComputedVariable('--multi-dataset-border-color', '#fff')
+                            : colors.solid;
                         backgroundColor = this.config?.type === 'polarArea' ? colors.opaque : colors.solid;
                         if (!dataset.borderColor) {
                             dataset.borderColor = borderColor;
@@ -75,10 +77,14 @@ let Chart = class Chart extends BasicElement {
                             dataset.backgroundColor = backgroundColor;
                         }
                         // Add more colors if items aren't enough
-                        if (Array.isArray(dataset.borderColor) && Array.isArray(borderColor) && dataset.borderColor.length < borderColor.length) {
+                        if (Array.isArray(dataset.borderColor) &&
+                            Array.isArray(borderColor) &&
+                            dataset.borderColor.length < borderColor.length) {
                             merge(dataset.borderColor, borderColor);
                         }
-                        if (Array.isArray(dataset.backgroundColor) && Array.isArray(backgroundColor) && dataset.backgroundColor.length < backgroundColor.length) {
+                        if (Array.isArray(dataset.backgroundColor) &&
+                            Array.isArray(backgroundColor) &&
+                            dataset.backgroundColor.length < backgroundColor.length) {
                             merge(dataset.backgroundColor, backgroundColor);
                         }
                         break;
@@ -95,10 +101,14 @@ let Chart = class Chart extends BasicElement {
                             dataset.backgroundColor = backgroundColor;
                         }
                         // Add more colors if items aren't enough
-                        if (Array.isArray(dataset.borderColor) && Array.isArray(borderColor) && dataset.borderColor.length < borderColor.length) {
+                        if (Array.isArray(dataset.borderColor) &&
+                            Array.isArray(borderColor) &&
+                            dataset.borderColor.length < borderColor.length) {
                             merge(dataset.borderColor, borderColor);
                         }
-                        if (Array.isArray(dataset.backgroundColor) && Array.isArray(backgroundColor) && dataset.backgroundColor.length < backgroundColor.length) {
+                        if (Array.isArray(dataset.backgroundColor) &&
+                            Array.isArray(backgroundColor) &&
+                            dataset.backgroundColor.length < backgroundColor.length) {
                             merge(dataset.backgroundColor, backgroundColor);
                         }
                         break;
@@ -149,10 +159,10 @@ let Chart = class Chart extends BasicElement {
             }
             let legends = [];
             const datasets = chart.config.data.datasets;
-            if (datasets.length
-                && chart?.config?.options?.plugins?.legend
-                && Array.isArray(datasets[0].backgroundColor)
-                && ['pie', 'doughnut'].includes(chartType)) {
+            if (datasets.length &&
+                chart?.config?.options?.plugins?.legend &&
+                Array.isArray(datasets[0].backgroundColor) &&
+                ['pie', 'doughnut'].includes(chartType)) {
                 return this.generateArcLegendLabels(legends, chart);
             }
             if (ChartJS.defaults.plugins.legend.labels.generateLabels) {
@@ -202,7 +212,7 @@ let Chart = class Chart extends BasicElement {
         min-height: 300px;
         box-sizing: border-box;
       }
-      [part=container] {
+      [part='container'] {
         position: absolute;
         top: 0;
         right: 0;
@@ -211,11 +221,11 @@ let Chart = class Chart extends BasicElement {
         display: flex;
         flex-direction: column;
       }
-      [part=chart] {
+      [part='chart'] {
         flex: 1 1 auto;
         position: relative;
       }
-      [part=title] {
+      [part='title'] {
         margin-bottom: 12px;
       }
       canvas {
@@ -379,7 +389,9 @@ let Chart = class Chart extends BasicElement {
         ChartJS.defaults.font.style = cssStyle.getPropertyValue('font-style');
         // Set global grid color
         ChartJS.defaults.scale.grid.color = (line) => {
-            return line.index === 0 ? this.getComputedVariable('--zero-line-color', 'transparent') : this.getComputedVariable('--grid-line-color', 'transparent');
+            return line.index === 0
+                ? this.getComputedVariable('--zero-line-color', 'transparent')
+                : this.getComputedVariable('--grid-line-color', 'transparent');
         };
         if (ChartJS.defaults.scales.radialLinear) {
             ChartJS.defaults.scales.radialLinear.ticks.showLabelBackdrop = false;
@@ -412,14 +424,9 @@ let Chart = class Chart extends BasicElement {
         if (!this.config) {
             return;
         }
-        let plugins = [
-            this.createPlugin()
-        ];
+        let plugins = [this.createPlugin()];
         if (Array.isArray(this.config.plugins) && this.config.plugins.length > 0) {
-            plugins = [
-                ...plugins,
-                ...this.config.plugins
-            ];
+            plugins = [...plugins, ...this.config.plugins];
         }
         merge(this.config, {
             plugins,
@@ -505,13 +512,12 @@ let Chart = class Chart extends BasicElement {
      * @return Render template
      */
     render() {
-        return html `
-      <div part="container">
-        ${this.titleTemplate}
-        <div part="chart">
-          <canvas ${ref(this.canvas)}></canvas>
-        </div>
-      </div>`;
+        return html ` <div part="container">
+      ${this.titleTemplate}
+      <div part="chart">
+        <canvas ${ref(this.canvas)}></canvas>
+      </div>
+    </div>`;
     }
 };
 __decorate([

package/lib/chart/plugins/doughnut-center-label.d.ts

@@ -1,5 +1,5 @@
 import { Chart as ChartJS } from 'chart.js';
-import type { Plugin, ChartType, ActiveElement } from 'chart.js';
+import type { ActiveElement, ChartType, Plugin } from 'chart.js';
 export interface CenterLabel {
     label: string;
     bold?: boolean;
@@ -11,11 +11,11 @@ export interface Selected {
 export interface CenterLabelConfig {
     defaultText: CenterLabel[];
     selected: Selected;
-    onRenderLabel(chart: ChartJS, chartItems: ActiveElement[]): CenterLabel[];
+    onRenderLabel(chart: ChartJS, chartItems: ActiveElement[]): CenterLabel[] | undefined;
 }
 declare module 'chart.js' {
     interface PluginOptionsByType<TType extends ChartType = ChartType> {
-        'centerLabel'?: CenterLabelConfig;
+        centerLabel?: CenterLabelConfig;
     }
 }
 declare const plugins: Plugin;

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

@@ -28,8 +28,11 @@ const drawItemBorder = function (chart, active) {
         arcOptions.backgroundColor = datasets.backgroundColor[chartItem.index];
         arcOptions.backgroundColor = getHoverColor(arcOptions.backgroundColor);
     }
-    arcOptions.borderWidth = arcOptions.borderWidth || (datasets.borderWidth || chart.config.options?.elements?.arc?.borderWidth);
-    arcOptions.borderColor = (getComputedStyle(chart.canvas).getPropertyValue('--doughnut-border-color') || ChartJS.defaults.color);
+    arcOptions.borderWidth =
+        arcOptions.borderWidth ||
+            (datasets.borderWidth || chart.config.options?.elements?.arc?.borderWidth);
+    arcOptions.borderColor = (getComputedStyle(chart.canvas).getPropertyValue('--doughnut-border-color') ||
+        ChartJS.defaults.color);
     const sA = element.startAngle;
     const eA = element.endAngle;
     if (ctx) {
@@ -60,8 +63,9 @@ const plugins = {
                     chart._select = [];
                 }
                 if (chart.getActiveElements().length) {
-                    if (chart._select.length && chart._select[0].datasetIndex === chart.getActiveElements()[0].datasetIndex
-                        && chart._select[0].index === chart.getActiveElements()[0].index) {
+                    if (chart._select.length &&
+                        chart._select[0].datasetIndex === chart.getActiveElements()[0].datasetIndex &&
+                        chart._select[0].index === chart.getActiveElements()[0].index) {
                         // reset value if user clicked on selected segment
                         chart._select = [];
                     }
@@ -95,9 +99,9 @@ const plugins = {
         if (activeElements.length > 0) {
             active = activeElements;
         }
-        const renderText = config.onRenderLabel(chart, active);
+        const labels = config.onRenderLabel(chart, active);
         // Get Texts
-        const texts = renderText || config.defaultText;
+        const texts = labels || config.defaultText;
         if (!texts) {
             return;
         }
@@ -122,7 +126,7 @@ const plugins = {
             ctx.fill();
         }
         // Base font size is 30% and minus 4% per text lines ( if text has multiple lines ) of text area
-        const baseFontSize = innerRadius * (0.3 - (0.04 * (texts.length - 1)));
+        const baseFontSize = innerRadius * (0.3 - 0.04 * (texts.length - 1));
         // Keep minimum font size equal 5% of text area
         const computedFontSize = Math.max(innerRadius * 0.05, baseFontSize);
         // Use font size ratio from user if --doughnut-center-font-size CSS variable is provided
@@ -160,7 +164,7 @@ const plugins = {
                     targetText += '...';
                 }
             }
-            ctx.fillText(targetText, centerX, offsetY + (i * fontLineHeight));
+            ctx.fillText(targetText, centerX, offsetY + i * fontLineHeight);
         }
     },
     afterDatasetUpdate: function (chart) {
@@ -177,7 +181,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;
       }
     `;
@@ -146,9 +147,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