@refinitiv-ui/elements 5.5.0 → 5.8.1

package/lib/time-picker/index.d.ts

@@ -1,6 +1,6 @@
 import { JSXInterface } from '../jsx';
-import { ControlElement, TemplateResult, CSSResult, PropertyValues } from '@refinitiv-ui/core';
-import '../number-field';
+import { ControlElement, TemplateResult, CSSResultGroup, PropertyValues } from '@refinitiv-ui/core';
+import '../number-field/index.js';
 declare enum Segment {
     HOURS = "hours",
     MINUTES = "minutes",
@@ -43,6 +43,7 @@ export declare class TimePicker extends ControlElement {
     /**
      * Hours time segment in 24hr format
      * @param hours hours value
+     * @default null
      * @returns {void}
      */
     set hours(hours: number | null);
@@ -54,6 +55,7 @@ export declare class TimePicker extends ControlElement {
     /**
      * Minutes time segment
      * @param minutes minutes value
+     * @default null
      * @returns {void}
      */
     set minutes(minutes: number | null);
@@ -65,6 +67,7 @@ export declare class TimePicker extends ControlElement {
     /**
      * Seconds time segment
      * @param seconds seconds value
+     * @default null
      * @returns {void}
      */
     set seconds(seconds: number | null);
@@ -331,12 +334,12 @@ export declare class TimePicker extends ControlElement {
      */
     toggle(): void;
     /**
-     * A `CSSResult` that will be used
+     * A `CSSResultGroup` that will be used
      * to style the host, slotted children
      * and the internal template of the element.
      * @returns CSS template
      */
-    static get styles(): CSSResult | CSSResult[];
+    static get styles(): CSSResultGroup;
     /**
      * Template for Seconds Segment
      *

package/lib/time-picker/index.js

@@ -1,13 +1,11 @@
-var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
-    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
-    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
-    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
-    return c > 3 && r && Object.defineProperty(target, key, r), r;
-};
-import { ControlElement, html, css, query, customElement, property } from '@refinitiv-ui/core';
-import '../number-field';
-import { isValidTime, toTimeSegment, TimeFormat, getFormat, format, isAM, isPM, MILLISECONDS_IN_SECOND, MILLISECONDS_IN_MINUTE, MILLISECONDS_IN_HOUR, addOffset, padNumber } from '@refinitiv-ui/utils';
-import { VERSION } from '../';
+import { __decorate } from "tslib";
+import { ControlElement, html, css } from '@refinitiv-ui/core';
+import { customElement } from '@refinitiv-ui/core/lib/decorators/custom-element.js';
+import { property } from '@refinitiv-ui/core/lib/decorators/property.js';
+import { query } from '@refinitiv-ui/core/lib/decorators/query.js';
+import { VERSION } from '../version.js';
+import { isValidTime, toTimeSegment, TimeFormat, getFormat, format, isAM, isPM, MILLISECONDS_IN_SECOND, MILLISECONDS_IN_MINUTE, MILLISECONDS_IN_HOUR, addOffset, padNumber } from '@refinitiv-ui/utils/lib/date.js';
+import '../number-field/index.js';
 var Segment;
 (function (Segment) {
     Segment["HOURS"] = "hours";
@@ -129,6 +127,7 @@ let TimePicker = class TimePicker extends ControlElement {
     /**
      * Hours time segment in 24hr format
      * @param hours hours value
+     * @default null
      * @returns {void}
      */
     set hours(hours) {
@@ -138,7 +137,7 @@ let TimePicker = class TimePicker extends ControlElement {
         }
         this._hours = this.validUnit(hours, MIN_UNIT, MAX_HOURS, oldHours);
         if (this._hours !== oldHours) {
-            void this.requestUpdate('hours', oldHours);
+            this.requestUpdate('hours', oldHours);
         }
     }
     /**
@@ -151,6 +150,7 @@ let TimePicker = class TimePicker extends ControlElement {
     /**
      * Minutes time segment
      * @param minutes minutes value
+     * @default null
      * @returns {void}
      */
     set minutes(minutes) {
@@ -160,7 +160,7 @@ let TimePicker = class TimePicker extends ControlElement {
         }
         this._minutes = this.validUnit(minutes, MIN_UNIT, MAX_MINUTES, oldMinutes);
         if (this._minutes !== oldMinutes) {
-            void this.requestUpdate('minutes', oldMinutes);
+            this.requestUpdate('minutes', oldMinutes);
         }
     }
     /**
@@ -173,6 +173,7 @@ let TimePicker = class TimePicker extends ControlElement {
     /**
      * Seconds time segment
      * @param seconds seconds value
+     * @default null
      * @returns {void}
      */
     set seconds(seconds) {
@@ -182,7 +183,7 @@ let TimePicker = class TimePicker extends ControlElement {
         }
         this._seconds = this.validUnit(seconds, MIN_UNIT, MAX_SECONDS, oldSeconds);
         if (this._seconds !== oldSeconds) {
-            void this.requestUpdate('seconds', oldSeconds);
+            this.requestUpdate('seconds', oldSeconds);
         }
     }
     /**
@@ -632,7 +633,7 @@ let TimePicker = class TimePicker extends ControlElement {
         }
     }
     /**
-     * A `CSSResult` that will be used
+     * A `CSSResultGroup` that will be used
      * to style the host, slotted children
      * and the internal template of the element.
      * @returns CSS template

package/lib/toggle/custom-elements.json

@@ -27,13 +27,13 @@
           "name": "readonly",
           "description": "Set readonly state",
           "type": "boolean",
-          "default": "\"false\""
+          "default": "false"
         },
         {
           "name": "disabled",
           "description": "Set disabled state",
           "type": "boolean",
-          "default": "\"false\""
+          "default": "false"
         }
       ],
       "properties": [
@@ -63,14 +63,14 @@
           "attribute": "readonly",
           "description": "Set readonly state",
           "type": "boolean",
-          "default": "\"false\""
+          "default": "false"
         },
         {
           "name": "disabled",
           "attribute": "disabled",
           "description": "Set disabled state",
           "type": "boolean",
-          "default": "\"false\""
+          "default": "false"
         }
       ],
       "events": [

package/lib/toggle/custom-elements.md

@@ -0,0 +1,19 @@
+# ef-toggle
+
+Form control that can toggle between 2 states
+
+## Properties
+
+| Property       | Attribute       | Type      | Default | Description             |
+|----------------|-----------------|-----------|---------|-------------------------|
+| `checked`      | `checked`       | `boolean` | false   | Value of toggle         |
+| `checkedLabel` | `checked-label` | `string`  | ""      | Label of toggle checked |
+| `disabled`     | `disabled`      | `boolean` | false   | Set disabled state      |
+| `label`        | `label`         | `string`  | ""      | Label of toggle         |
+| `readonly`     | `readonly`      | `boolean` | false   | Set readonly state      |
+
+## Events
+
+| Event             | Description                                |
+|-------------------|--------------------------------------------|
+| `checked-changed` | Fired when the `checked` property changes. |

package/lib/toggle/index.d.ts

@@ -1,5 +1,5 @@
 import { JSXInterface } from '../jsx';
-import { ControlElement, TemplateResult, CSSResult, PropertyValues } from '@refinitiv-ui/core';
+import { ControlElement, TemplateResult, CSSResultGroup, PropertyValues } from '@refinitiv-ui/core';
 /**
  * Form control that can toggle between 2 states
  *
@@ -17,6 +17,7 @@ export declare class Toggle extends ControlElement {
      * @returns version number
      */
     static get version(): string;
+    protected readonly defaultRole: string | null;
     /**
      * Label of toggle checked
      */
@@ -25,17 +26,26 @@ export declare class Toggle extends ControlElement {
      * Label of toggle
      */
     label: string;
+    private _checked;
     /**
      * Value of toggle
+     * @param value new checked value
+     * @default false
      */
-    checked: boolean;
+    set checked(value: boolean);
+    get checked(): boolean;
     /**
-     * A `CSSResult` that will be used
+     * Aria indicating current state of toggle
+     * @ignore
+     */
+    ariaChecked: string;
+    /**
+     * A `CSSResultGroup` that will be used
      * to style the host, slotted children
      * and the internal template of the element.
      * @returns CSS template
      */
-    static get styles(): CSSResult | CSSResult[];
+    static get styles(): CSSResultGroup;
     /**
      * Invoked when the element is first updated. Implement to perform one time
      * work on the element after update.

package/lib/toggle/index.js

@@ -1,11 +1,8 @@
-var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
-    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
-    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
-    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
-    return c > 3 && r && Object.defineProperty(target, key, r), r;
-};
-import { ControlElement, html, css, customElement, property } from '@refinitiv-ui/core';
-import { VERSION } from '../';
+import { __decorate } from "tslib";
+import { ControlElement, html, css } from '@refinitiv-ui/core';
+import { customElement } from '@refinitiv-ui/core/lib/decorators/custom-element.js';
+import { property } from '@refinitiv-ui/core/lib/decorators/property.js';
+import { VERSION } from '../version.js';
 /**
  * Return the attribute that converted from the property
  * Prevent empty string that reflected to attribute
@@ -30,6 +27,7 @@ const emptyStringToNull = function (value) {
 let Toggle = class Toggle extends ControlElement {
     constructor() {
         super(...arguments);
+        this.defaultRole = 'switch';
         /**
          * Label of toggle checked
          */
@@ -38,10 +36,12 @@ let Toggle = class Toggle extends ControlElement {
          * Label of toggle
          */
         this.label = '';
+        this._checked = false;
         /**
-         * Value of toggle
+         * Aria indicating current state of toggle
+         * @ignore
          */
-        this.checked = false;
+        this.ariaChecked = String(this.checked);
     }
     /**
      * Element version number
@@ -51,7 +51,23 @@ let Toggle = class Toggle extends ControlElement {
         return VERSION;
     }
     /**
-     * A `CSSResult` that will be used
+     * Value of toggle
+     * @param value new checked value
+     * @default false
+     */
+    set checked(value) {
+        const oldValue = this._checked;
+        if (oldValue !== value) {
+            this._checked = value;
+            this.ariaChecked = String(value);
+            void this.requestUpdate('checked', oldValue);
+        }
+    }
+    get checked() {
+        return this._checked;
+    }
+    /**
+     * A `CSSResultGroup` that will be used
      * to style the host, slotted children
      * and the internal template of the element.
      * @returns CSS template
@@ -125,7 +141,10 @@ __decorate([
 ], Toggle.prototype, "label", void 0);
 __decorate([
     property({ type: Boolean, reflect: true })
-], Toggle.prototype, "checked", void 0);
+], Toggle.prototype, "checked", null);
+__decorate([
+    property({ type: String, reflect: true, attribute: 'aria-checked' })
+], Toggle.prototype, "ariaChecked", void 0);
 Toggle = __decorate([
     customElement('ef-toggle', {
         alias: 'coral-toggle'

package/lib/tooltip/custom-elements.md

@@ -0,0 +1,14 @@
+# ef-tooltip
+
+Tooltip displays extra information when the
+user hovers the pointer over an item.
+
+## Properties
+
+| Property          | Attribute          | Type                                             | Default | Description                                      |
+|-------------------|--------------------|--------------------------------------------------|---------|--------------------------------------------------|
+| `condition`       |                    | `TooltipCondition`                               |         | Provide a function to test against the target.<br />Return `true` if the target matches |
+| `position`        | `position`         | `"auto" \| "above" \| "right" \| "below" \| "left"` | "auto"  | The position of the tooltip. Use the following values:<br />`auto` (default) - display based on mouse enter coordinates<br />`above` - display above the element<br />`right` - display to the right of the element<br />`below` - display beneath the element<br />`left` - display to the left of the element |
+| `renderer`        |                    | `TooltipRenderer`                                |         | A renderer to define tooltip internal content.<br />Return undefined, `String`, `HTMLElement` or `DocumentFragment`.<br />If the content is not present, tooltip will not be displayed |
+| `selector`        | `selector`         | `string`                                         | ""      | CSS selector to match the tooltip                |
+| `transitionStyle` | `transition-style` | `TooltipTransitionStyle`                         | "fade"  | Set the transition style.<br />Value can be `fade`, `zoom`, `slide-down`, `slide-up`, `slide-right`,<br />`slide-left`, `slide-right-down`, `slide-right-up`, `slide-left-down`, `slide-left-up`, or null in case of no transition |

package/lib/tooltip/elements/title-tooltip.js

@@ -1,6 +1,6 @@
 import { matches } from '@refinitiv-ui/core';
-import { addTooltipCondition } from './tooltip-element';
-import { tooltipRenderer } from '../helpers/renderer';
+import { addTooltipCondition } from './tooltip-element.js';
+import { tooltipRenderer } from '../helpers/renderer.js';
 // Support title attribute
 Object.defineProperty(HTMLElement.prototype, 'title', {
     get: function () {

package/lib/tooltip/elements/tooltip-element.d.ts

@@ -1,5 +1,5 @@
 import type { Tooltip } from '../index';
-import { TooltipCondition, TooltipRenderer } from '../helpers/types';
+import type { TooltipCondition, TooltipRenderer } from '../helpers/types';
 /**
  * Add the new condition to the default tooltip
  * @param condition Condition to add

package/lib/tooltip/helpers/overflow-tooltip.d.ts

@@ -1,4 +1,4 @@
-import { TooltipRenderer } from './types';
+import type { TooltipRenderer } from './types';
 /**
  * Register the element to show a tooltip for overflow content
  * @param target Target element

package/lib/tooltip/helpers/overflow-tooltip.js

@@ -1,4 +1,4 @@
-import { addTooltipCondition } from '../elements/tooltip-element';
+import { addTooltipCondition } from '../elements/tooltip-element.js';
 const registry = new WeakMap();
 const overflowCondition = (target) => registry.has(target) && (target.scrollWidth - target.offsetWidth) > 1;
 const overflowRenderer = (target) => target.textContent;

package/lib/tooltip/helpers/renderer.d.ts

@@ -1,4 +1,4 @@
-import { TooltipRenderer } from './types';
+import type { TooltipRenderer } from './types';
 /**
  * A default renderer that renders `tooltip` attribute
  * @param target Target to check

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

@@ -1,4 +1,4 @@
-import { OverlayPosition } from '../../overlay';
+import type { OverlayPosition } from '../../overlay';
 export declare type TooltipCondition = (target: HTMLElement, paths: EventTarget[]) => boolean;
 export declare type TooltipRenderer = (target: HTMLElement) => undefined | null | string | HTMLElement | DocumentFragment;
 export declare type TooltipPosition = 'auto' | 'above' | 'right' | 'below' | 'left';

package/lib/tooltip/index.d.ts

@@ -1,10 +1,10 @@
 import { JSXInterface } from '../jsx';
-import { BasicElement, TemplateResult, CSSResult, PropertyValues } from '@refinitiv-ui/core';
-import '../overlay';
-import { OverlayTransitionStyle as TooltipTransitionStyle } from '../overlay';
-import './elements/title-tooltip';
-import { TooltipCondition, TooltipRenderer, TooltipPosition } from './helpers/types';
-import { register as registerOverflowTooltip } from './helpers/overflow-tooltip';
+import { BasicElement, TemplateResult, CSSResultGroup, PropertyValues } from '@refinitiv-ui/core';
+import '../overlay/index.js';
+import type { OverlayTransitionStyle as TooltipTransitionStyle } from '../overlay';
+import './elements/title-tooltip.js';
+import { TooltipCondition, TooltipRenderer, TooltipPosition } from './helpers/types.js';
+import { register as registerOverflowTooltip } from './helpers/overflow-tooltip.js';
 /**
  * Tooltip displays extra information when the
  * user hovers the pointer over an item.
@@ -23,12 +23,12 @@ declare class Tooltip extends BasicElement {
     private timerTimeout?;
     private contentNodes?;
     /**
-     * A `CSSResult` that will be used
+     * 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(): CSSResult | CSSResult[];
+    static get styles(): CSSResultGroup;
     /**
      * True if an element is an iframe
      * @param relatedTarget Element to check
@@ -214,7 +214,7 @@ declare class Tooltip extends BasicElement {
      */
     private get opened();
 }
-export * from './elements/tooltip-element';
+export * from './elements/tooltip-element.js';
 export { registerOverflowTooltip, Tooltip, TooltipCondition, TooltipRenderer, TooltipPosition, TooltipTransitionStyle };
 
 declare global {

package/lib/tooltip/index.js

@@ -1,18 +1,16 @@
-var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
-    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
-    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
-    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
-    return c > 3 && r && Object.defineProperty(target, key, r), r;
-};
 var Tooltip_1;
-import { BasicElement, html, css, customElement, property, query, matches } from '@refinitiv-ui/core';
-import { isSlotEmpty } from '@refinitiv-ui/utils';
-import '../overlay';
-import './elements/title-tooltip';
-import { register, deregister } from './managers/tooltip-manager';
-import { tooltipRenderer } from './helpers/renderer';
-import { register as registerOverflowTooltip } from './helpers/overflow-tooltip';
-import { VERSION } from '../';
+import { __decorate } from "tslib";
+import { BasicElement, html, css, matches } from '@refinitiv-ui/core';
+import { customElement } from '@refinitiv-ui/core/lib/decorators/custom-element.js';
+import { property } from '@refinitiv-ui/core/lib/decorators/property.js';
+import { query } from '@refinitiv-ui/core/lib/decorators/query.js';
+import { VERSION } from '../version.js';
+import { isSlotEmpty } from '@refinitiv-ui/utils/lib/is-slot-empty.js';
+import '../overlay/index.js';
+import './elements/title-tooltip.js';
+import { register, deregister } from './managers/tooltip-manager.js';
+import { tooltipRenderer } from './helpers/renderer.js';
+import { register as registerOverflowTooltip } from './helpers/overflow-tooltip.js';
 const TooltipPositionMap = {
     'auto': ['bottom-start', 'top-start'],
     'above': ['top-middle'],
@@ -108,7 +106,7 @@ let Tooltip = Tooltip_1 = class Tooltip extends BasicElement {
         return VERSION;
     }
     /**
-     * A `CSSResult` that will be used
+     * A `CSSResultGroup` that will be used
      * to style the host, slotted children
      * and the internal template of the element.
      * @return CSS template
@@ -166,7 +164,7 @@ let Tooltip = Tooltip_1 = class Tooltip extends BasicElement {
         const oldX = this._x;
         if (oldX !== x) {
             this._x = x;
-            void this.requestUpdate('x', oldX);
+            this.requestUpdate('x', oldX);
         }
     }
     /**
@@ -177,7 +175,7 @@ let Tooltip = Tooltip_1 = class Tooltip extends BasicElement {
         const oldY = this._y;
         if (oldY !== y) {
             this._y = y;
-            void this.requestUpdate('y', oldY);
+            this.requestUpdate('y', oldY);
         }
     }
     /**
@@ -188,7 +186,7 @@ let Tooltip = Tooltip_1 = class Tooltip extends BasicElement {
         const oldPositionTarget = this._positionTarget;
         if (positionTarget !== oldPositionTarget) {
             this._positionTarget = positionTarget;
-            void this.requestUpdate('positionTarget', oldPositionTarget);
+            this.requestUpdate('positionTarget', oldPositionTarget);
         }
     }
     /**
@@ -200,7 +198,7 @@ let Tooltip = Tooltip_1 = class Tooltip extends BasicElement {
         const oldOpened = this._opened;
         if (oldOpened !== opened) {
             this._opened = opened;
-            void this.requestUpdate('opened', oldOpened);
+            this.requestUpdate('opened', oldOpened);
         }
     }
     connectedCallback() {
@@ -475,5 +473,5 @@ Tooltip = Tooltip_1 = __decorate([
         alias: 'coral-tooltip'
     })
 ], Tooltip);
-export * from './elements/tooltip-element';
+export * from './elements/tooltip-element.js';
 export { registerOverflowTooltip, Tooltip };

package/lib/tooltip/managers/tooltip-manager.d.ts

@@ -1,5 +1,5 @@
-import type { Tooltip } from '../index';
-import { DocumentCallbacks } from '../helpers/types';
+import type { Tooltip } from '../index.js';
+import type { DocumentCallbacks } from '../helpers/types';
 /**
  * Register the new tooltip
  * @param tooltip Tooltip

package/lib/tooltip/managers/tooltip-manager.js

@@ -1,9 +1,5 @@
-import { TimeoutTaskRunner } from '@refinitiv-ui/utils';
-/**
- * Helper to check if the browser is IE
- * @returns True if the browser is IE
- */
-const isIE = () => !!navigator.userAgent.match(/Trident/g) || !!navigator.userAgent.match(/MSIE/g);
+import { TimeoutTaskRunner } from '@refinitiv-ui/utils/lib/async.js';
+import { isIE } from '@refinitiv-ui/utils/lib/browser.js';
 /**
  * Tooltip manager is here to avoid setting multiple
  * events on document and do expensive pre-processing
@@ -96,7 +92,7 @@ class TooltipManager {
     register(tooltip, documentCallbacks) {
         if (!this.registry.size) {
             // IE11 does not support event options
-            const supportOptions = !isIE();
+            const supportOptions = !isIE;
             const eventOptions = supportOptions ? { passive: true } : undefined;
             document.addEventListener('mousemove', this.onMouseMove, eventOptions);
             document.addEventListener('mouseout', this.onMouseOut, eventOptions);

package/lib/tornado-chart/custom-elements.md

@@ -0,0 +1,18 @@
+# ef-tornado-chart
+
+A data visualization that helps to
+show the differences or similarities between values
+
+## Properties
+
+| Property    | Attribute   | Type             | Default | Description                     |
+|-------------|-------------|------------------|---------|---------------------------------|
+| `primary`   | `primary`   | `string \| null` | null    | Primary bar chart legend text   |
+| `secondary` | `secondary` | `string \| null` | null    | Secondary bar chart legend text |
+
+## Slots
+
+| Name     | Description                                      |
+|----------|--------------------------------------------------|
+| `footer` | Any HTML contents to display at chart footer section |
+| `header` | Any HTML contents to display at chart header section |

package/lib/tornado-chart/elements/tornado-chart.d.ts

@@ -1,6 +1,6 @@
 import { JSXInterface } from '../../jsx';
-import { ResponsiveElement, TemplateResult, CSSResult, ElementSize } from '@refinitiv-ui/core';
-import './tornado-item';
+import { ResponsiveElement, TemplateResult, CSSResultGroup, ElementSize } from '@refinitiv-ui/core';
+import './tornado-item.js';
 /**
  * A data visualization that helps to
  * show the differences or similarities between values
@@ -49,12 +49,12 @@ export declare class TornadoChart extends ResponsiveElement {
      */
     resizedCallback(size: ElementSize): void;
     /**
-     * A `CSSResult` that will be used
+     * 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(): CSSResult | CSSResult[];
+    static get styles(): CSSResultGroup;
     /**
      * A `TemplateResult` that will be used
      * to render the updated internal template.

package/lib/tornado-chart/elements/tornado-chart.js

@@ -1,12 +1,9 @@
-var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
-    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
-    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
-    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
-    return c > 3 && r && Object.defineProperty(target, key, r), r;
-};
-import { ResponsiveElement, html, css, customElement, property } from '@refinitiv-ui/core';
-import { VERSION } from '../../';
-import './tornado-item';
+import { __decorate } from "tslib";
+import { ResponsiveElement, html, css } from '@refinitiv-ui/core';
+import { customElement } from '@refinitiv-ui/core/lib/decorators/custom-element.js';
+import { property } from '@refinitiv-ui/core/lib/decorators/property.js';
+import { VERSION } from '../../version.js';
+import './tornado-item.js';
 /**
  * A data visualization that helps to
  * show the differences or similarities between values
@@ -47,7 +44,7 @@ let TornadoChart = class TornadoChart extends ResponsiveElement {
      */
     setLegendAlignment(responsive) {
         this.legendAlignment = responsive;
-        void this.requestUpdate();
+        this.requestUpdate();
     }
     /**
      * Set ef-tornado-item's alignment
@@ -75,7 +72,7 @@ let TornadoChart = class TornadoChart extends ResponsiveElement {
         }
     }
     /**
-     * A `CSSResult` that will be used
+     * A `CSSResultGroup` that will be used
      * to style the host, slotted children
      * and the internal template of the element.
      * @return CSS template

package/lib/tornado-chart/elements/tornado-item.d.ts

@@ -1,7 +1,7 @@
 import { JSXInterface } from '../../jsx';
-import { BasicElement, TemplateResult, CSSResult } from '@refinitiv-ui/core';
-import '../../progress-bar';
-import '../../layout';
+import { BasicElement, TemplateResult, CSSResultGroup } from '@refinitiv-ui/core';
+import '../../progress-bar/index.js';
+import '../../layout/index.js';
 /**
  * A part of <ef-tornado-chart />,
  * consists mainly of primary, secondary ef-progress-bar and labels.
@@ -81,12 +81,12 @@ export declare class TornadoItem extends BasicElement {
      */
     private showHorizontalMode;
     /**
-     * A `CSSResult` that will be used
+     * 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(): CSSResult | CSSResult[];
+    static get styles(): CSSResultGroup;
     /**
      * A `TemplateResult` that will be used
      * to render the updated internal template.