@refinitiv-ui/elements 5.5.0 → 5.8.1

package/lib/email-field/index.js

@@ -1,284 +1,83 @@
-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, css, customElement, html, ifDefined, property, query } from '@refinitiv-ui/core';
-import { VERSION } from '../';
-import '../icon';
-const hasChanged = (newVal, oldVal) => oldVal === undefined ? false : newVal !== oldVal;
-const isIE = (/Trident/g).test(navigator.userAgent);
+import { __decorate } from "tslib";
+import { customElement } from '@refinitiv-ui/core/lib/decorators/custom-element.js';
+import { property } from '@refinitiv-ui/core/lib/decorators/property.js';
+import '../icon/index.js';
+import { TextField } from '../text-field/index.js';
 /**
- * A form control element for email
+ * A form control element for email.
  *
  * @fires value-changed - Dispatched when value changes
  * @fires error-changed - Dispatched when error state changes
+ * @fires icon-click - Dispatched when icon is clicked
  *
- * @attr {string} value - Input's value
- * @prop {string} [value=] - Input's value
+ * @attr {boolean} disabled - Set disabled state
+ * @prop {boolean} [disabled=false] - Set disabled state
+ *
+ * @attr {boolean} error - Set error state
+ * @prop {boolean} [error=false] - Set error state
+ *
+ * @attr {string} icon - Specify icon to display in input. Value can be icon name
+ * @prop {string | null} [icon=null] - Specify icon to display in input. Value can be icon name
+ *
+ * @attr {boolean} icon-has-action - Specify when icon need to be clickable
+ * @prop {boolean} [iconHasAction=false] - Specify when icon need to be clickable
+ *
+ * @attr {number} maxlength - Set character max limit
+ * @prop {number | null} [maxLength=null] - Set character max limit
+ *
+ * @attr {number} minlength - Set character min limit
+ * @prop {number | null} [minLength=null] - Set character min limit
+ *
+ * @prop {string} [pattern=""] - Set regular expression for input validation
+ *
+ * @attr {string} placeholder - Set placeholder text
+ * @prop {string} [placeholder=""] - Set placeholder text
  *
  * @attr {boolean} readonly - Set readonly state
  * @prop {boolean} [readonly=false] - Set readonly state
  *
- * @attr {boolean} disabled - Set disabled state
- * @prop {boolean} [disabled=false] - Set disabled state
+ * @attr {boolean} transparent - Disables all other states and border/background styles.
+ * @prop {boolean} [transparent=false] - Disables all other states and border/background styles.
+ *
+ * @attr {boolean} warning - Set warning state
+ * @prop {boolean} [warning=false] - Set warning state
+ *
+ * @attr {string} value - Input's value
+ * @prop {string} [value=""] - Input's value
  */
-let EmailField = class EmailField extends ControlElement {
+let EmailField = class EmailField extends TextField {
     constructor() {
         super(...arguments);
-        /**
-         * Set regular expression for input validation
-         */
-        this.pattern = '';
-        /**
-         * Set placeholder text
-         */
-        this.placeholder = '';
-        /**
-         * Set state to error
-         */
-        this.error = false;
-        /**
-         * Set state to warning
-         */
-        this.warning = false;
-        /**
-         * Disables all other states and border/background styles.
-         * Use with advanced composite elements requiring e.g. multi selection in
-         * combo-box when parent container handles element states.
-         */
-        this.transparent = false;
-        /**
-         * Set character max limit
-         */
-        this.maxLength = null;
-        /**
-         * Set character min limit
-         */
-        this.minLength = null;
         /**
          * Set to multiple mode, allows multiple emails in a single input
          */
         this.multiple = false;
-        /**
-         * Specify icon to display in input. Value can be icon name
-         */
-        this.icon = '';
-        /**
-         * Specify when icon need to be clickable
-         */
-        this.iconHasAction = false;
-    }
-    /**
-     * Element version number
-     * @returns version number
-     */
-    static get version() {
-        return VERSION;
     }
     /**
-     * A `CSSResult` that will be used
-     * to style the host, slotted children
-     * and the internal template of the element.
-     * @return {CSSResult | CSSResult[]} CSS template
+     * Decorate `<input>` element with common properties extended from text-field:
+     * type="email" - always `email`
+     * multiple - defined if supports multiple emails
+     * @returns template map
      */
-    static get styles() {
-        return css `
-      :host {
-        display: inline-block;
-      }
-      :host(:focus), :host input:focus {
-        outline: none;
-      }
-      [part=input] {
-        font: inherit;
-        background: none;
-        color: currentColor;
-        border: none;
-        text-align: inherit;
-      }
-      :host [part=icon]{
-        display: flex;
-        outline: none;
-      }
-      :host([transparent]) {
-        background: none !important;
-        border: none !important;
-      }
-      :host([icon][icon-has-action]) [part=icon] {
-        cursor: pointer;
-      }
-    `;
-    }
-    /**
-     * Select the contents of input
-     * @returns {void}
-     */
-    /* istanbul ignore next */
-    select() {
-        if (!this.disabled && !this.readonly) {
-            this.inputElement.select();
-        }
-    }
-    /**
-     * Called when the element’s DOM has been updated and rendered
-     * @param changedProperties Properties that has changed
-     * @returns {void}
-     */
-    updated(changedProperties) {
-        super.updated(changedProperties);
-        if (this.inputElement.value !== this.value) {
-            this.inputElement.value = this.value;
-        }
-        if (this.shouldValidateInput(changedProperties)) {
-            this.validateInput();
-        }
+    get decorateInputMap() {
+        return Object.assign(Object.assign({}, super.decorateInputMap), { 'type': 'email', 'inputmode': 'email', 'multiple': this.multiple });
     }
     /**
      * Check if input should be re-validated
      * @param changedProperties Properties that has changed
      * @returns True if input should be re-validated
      */
+    /* istanbul ignore next */
     shouldValidateInput(changedProperties) {
+        // TODO: This validation should be refactored
         return changedProperties.has('value')
-            || changedProperties.has('pattern')
-            || changedProperties.has('minlength');
-    }
-    /**
-     * Check if value is changed and fire event
-     * @returns {void}
-     */
-    onPossibleValueChange() {
-        const value = this.inputElement.value;
-        this.setValueAndNotify(value);
-    }
-    /**
-     * Validate input according `pattern`, `minLength` and `maxLength` properties
-     * change state of `error` property according pattern validation
-     * @returns {void}
-     */
-    validateInput() {
-        let error = !this.inputElement.checkValidity();
-        if (this.shouldValidateForMinLength(error)) {
-            error = !!this.minLength && (this.minLength > this.value.length);
-        }
-        if (this.error !== error) {
-            this.error = error;
-            this.notifyPropertyChange('error', this.error);
-        }
-    }
-    /**
-     * @param error existing state of error
-     * @returns true if there is no error and browser is IE11 and minLength more than 0 and value exists
-     */
-    shouldValidateForMinLength(error) {
-        return !!(!error && isIE && this.minLength && !!this.value);
-    }
-    /**
-     * Detect `enter` and `space` keydown and fire
-     * @param event keydown event
-     * @returns {void}
-     */
-    handleKeyDown(event) {
-        if (event.key === 'Spacebar' || event.key === ' ' || event.key === 'Enter') {
-            this.notifyIcon();
-        }
-    }
-    /**
-     * Process internal icon click and fire `icon-click` event
-     * @returns {void}
-     */
-    iconClick() {
-        this.notifyIcon();
-    }
-    /**
-     * Fire event on `icon` click
-     * @returns {void}
-     */
-    notifyIcon() {
-        if (this.iconHasAction) {
-            /**
-             * Dispatched only when element has icon-has-action attribute and icon is clicked
-             */
-            this.dispatchEvent(new CustomEvent('icon-click', { bubbles: false }));
-        }
-    }
-    /**
-     * Renders icon element if property present
-     * @returns {TemplateResult | null} Template result
-     */
-    renderIcon() {
-        return this.icon ? html `
-    <ef-icon
-        part="icon"
-        icon="${this.icon}"
-        ?readonly="${this.readonly}"
-        ?disabled="${this.disabled}"
-        @tap="${this.iconClick}"
-        @keydown="${this.handleKeyDown}"
-        tabindex="${ifDefined(this.iconHasAction ? '0' : undefined)}"
-      ></ef-icon>
-    ` : null;
-    }
-    /**
-     * A `TemplateResult` that will be used
-     * to render the updated internal template.
-     * @return {TemplateResult} Render template
-     */
-    render() {
-        return html `
-      <input
-        type="email"
-        part="input"
-        ?readonly="${this.readonly}"
-        ?disabled="${this.disabled}"
-        placeholder="${ifDefined(this.placeholder || undefined)}"
-        maxlength="${ifDefined(this.maxLength || undefined)}"
-        minlength="${ifDefined(this.minLength || undefined)}"
-        @input="${this.onPossibleValueChange}"
-        @change="${this.onPossibleValueChange}"
-        pattern="${ifDefined(this.pattern || undefined)}"
-        ?multiple="${this.multiple}"
-        autocomplete="off"
-      />
-      ${this.renderIcon()}
-    `;
+            || changedProperties.has('multiple')
+            || super.shouldValidateInput(changedProperties);
     }
 };
-__decorate([
-    property({ type: String, hasChanged })
-], EmailField.prototype, "pattern", void 0);
-__decorate([
-    property({ type: String })
-], EmailField.prototype, "placeholder", void 0);
-__decorate([
-    property({ type: Boolean, reflect: true })
-], EmailField.prototype, "error", void 0);
-__decorate([
-    property({ type: Boolean, reflect: true })
-], EmailField.prototype, "warning", void 0);
-__decorate([
-    property({ type: Boolean, reflect: true })
-], EmailField.prototype, "transparent", void 0);
-__decorate([
-    property({ type: Number, attribute: 'maxlength', reflect: true })
-], EmailField.prototype, "maxLength", void 0);
-__decorate([
-    property({ type: Number, attribute: 'minlength', reflect: true })
-], EmailField.prototype, "minLength", void 0);
 __decorate([
     property({ type: Boolean, reflect: true })
 ], EmailField.prototype, "multiple", void 0);
-__decorate([
-    property({ type: String, reflect: true })
-], EmailField.prototype, "icon", void 0);
-__decorate([
-    property({ type: Boolean, reflect: true, attribute: 'icon-has-action' })
-], EmailField.prototype, "iconHasAction", void 0);
-__decorate([
-    query('[part="input"]', true)
-], EmailField.prototype, "inputElement", void 0);
 EmailField = __decorate([
     customElement('ef-email-field', {
         alias: 'coral-email-field'

package/lib/events.d.ts

@@ -1,4 +1,4 @@
-import { TapEvent, ResizeEvent } from '@refinitiv-ui/core';
+import type { TapEvent, ResizeEvent, FocusedChangedEvent } from '@refinitiv-ui/core';
 /**
  * Dispatched when `opened` state changes
  * Prevent default to stop opening/closing pipeline
@@ -118,4 +118,4 @@ declare type ItemTriggerEvent = CustomEvent<{
      */
     value: string;
 }>;
-export { OpenedChangedEvent, ValueChangedEvent, ErrorChangedEvent, ActiveChangedEvent, ViewChangedEvent, ItemTriggerEvent, CheckChangedEvent, OffsetChangedEvent, ExpandedChangedEvent, QueryChangedEvent, PageChangedEvent, FromChangedEvent, ToChangedEvent, TapEvent, ResizeEvent };
+export { OpenedChangedEvent, ValueChangedEvent, ErrorChangedEvent, ActiveChangedEvent, ViewChangedEvent, ItemTriggerEvent, CheckChangedEvent, OffsetChangedEvent, ExpandedChangedEvent, QueryChangedEvent, PageChangedEvent, FromChangedEvent, ToChangedEvent, TapEvent, ResizeEvent, FocusedChangedEvent };

package/lib/events.js

@@ -1,2 +1 @@
-import { TapEvent } from '@refinitiv-ui/core';
-export { TapEvent };
+export {};

package/lib/flag/custom-elements.md

@@ -0,0 +1,10 @@
+# ef-flag
+
+Provides a collection of flags.
+
+## Properties
+
+| Property | Attribute | Type             | Default | Description                     |
+|----------|-----------|------------------|---------|---------------------------------|
+| `flag`   | `flag`    | `string \| null` | null    | Name of a known flag to render. |
+| `src`    | `src`     | `string \| null` | null    | Src location of an svg flag.    |

package/lib/flag/index.d.ts

@@ -1,6 +1,6 @@
 import { JSXInterface } from '../jsx';
-import { BasicElement, CSSResult, TemplateResult, PropertyValues } from '@refinitiv-ui/core';
-export { preload } from './utils/FlagLoader';
+import { BasicElement, CSSResultGroup, TemplateResult, PropertyValues } from '@refinitiv-ui/core';
+export { preload } from './utils/FlagLoader.js';
 /**
  * Provides a collection of flags.
  *
@@ -15,16 +15,17 @@ export declare class Flag extends BasicElement {
      */
     static get version(): string;
     /**
-     * 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;
+    static get styles(): CSSResultGroup;
     private _flag;
     /**
      * Name of a known flag to render.
      * @example gb
+     * @default null
      */
     get flag(): string | null;
     set flag(value: string | null);
@@ -32,6 +33,7 @@ export declare class Flag extends BasicElement {
     /**
      * Src location of an svg flag.
      * @example https://cdn.io/flags/gb.svg
+     * @default null
      */
     get src(): string | null;
     set src(value: string | null);

package/lib/flag/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 { BasicElement, svg, css, customElement, property, unsafeHTML } from '@refinitiv-ui/core';
-import { VERSION } from '../';
-import { FlagLoader } from './utils/FlagLoader';
-export { preload } from './utils/FlagLoader';
+import { __decorate } from "tslib";
+import { BasicElement, svg, 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 { unsafeHTML } from '@refinitiv-ui/core/lib/directives/unsafe-html.js';
+import { VERSION } from '../version.js';
+import { FlagLoader } from './utils/FlagLoader.js';
+export { preload } from './utils/FlagLoader.js';
 const EmptyTemplate = svg ``;
 /**
  * Provides a collection of flags.
@@ -31,7 +29,7 @@ let Flag = class Flag 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.
      * @returns CSS template
@@ -55,6 +53,7 @@ let Flag = class Flag extends BasicElement {
     /**
      * Name of a known flag to render.
      * @example gb
+     * @default null
      */
     get flag() {
         return this._flag;
@@ -68,6 +67,7 @@ let Flag = class Flag extends BasicElement {
     /**
      * Src location of an svg flag.
      * @example https://cdn.io/flags/gb.svg
+     * @default null
      */
     get src() {
         return this._src;
@@ -90,7 +90,7 @@ let Flag = class Flag extends BasicElement {
     set template(value) {
         if (this._template !== value) {
             this._template = value;
-            void this.requestUpdate();
+            this.requestUpdate();
         }
     }
     /**

package/lib/flag/utils/FlagLoader.d.ts

@@ -1,4 +1,4 @@
-import { CdnLoader } from '@refinitiv-ui/utils';
+import { CdnLoader } from '@refinitiv-ui/utils/lib/loader.js';
 /**
  * Caches and provides flag SVGs, Loaded either by name from CDN or directly by URL.
  * Uses singleton pattern

package/lib/flag/utils/FlagLoader.js

@@ -1,4 +1,4 @@
-import { CdnLoader, Deferred } from '@refinitiv-ui/utils';
+import { CdnLoader, Deferred } from '@refinitiv-ui/utils/lib/loader.js';
 const isUrl = (str) => (/^https?:\/\//i).test(str);
 /**
  * Caches and provides flag SVGs, Loaded either by name from CDN or directly by URL.

package/lib/header/custom-elements.md

@@ -0,0 +1,18 @@
+# ef-header
+
+Use to identify and separate different sections of a page.
+Headers helps to organize the page layout content into
+a sensible hierarchy and improve the user experience.
+
+## Properties
+
+| Property | Attribute | Type                | Default | Description                  |
+|----------|-----------|---------------------|---------|------------------------------|
+| `level`  | `level`   | `"1" \| "2" \| "3"` | "2"     | Use level styling from theme |
+
+## Slots
+
+| Name    | Description                                      |
+|---------|--------------------------------------------------|
+| `left`  | Slot to add custom contents to the left side of header e.g. ef-icon, ef-checkbox |
+| `right` | Slot to add custom contents to the right side of header e.g. ef-icon, ef-checkbox |

package/lib/header/index.d.ts

@@ -1,5 +1,5 @@
 import { JSXInterface } from '../jsx';
-import { BasicElement, TemplateResult, CSSResult } from '@refinitiv-ui/core';
+import { BasicElement, TemplateResult, CSSResultGroup } from '@refinitiv-ui/core';
 /**
  * Use to identify and separate different sections of a page.
  * Headers helps to organize the page layout content into
@@ -18,7 +18,7 @@ export declare class Header extends BasicElement {
      * Style definition
      * @return CSS template
      */
-    static get styles(): CSSResult | CSSResult[];
+    static get styles(): CSSResultGroup;
     /**
      * Use level styling from theme
      */

package/lib/header/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 { BasicElement, html, css, customElement, property } from '@refinitiv-ui/core';
-import { VERSION } from '../';
+import { __decorate } from "tslib";
+import { BasicElement, 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';
 /**
  * Use to identify and separate different sections of a page.
  * Headers helps to organize the page layout content into

package/lib/heatmap/custom-elements.md

@@ -0,0 +1,26 @@
+# ef-heatmap
+
+A graphical representation of data where the individual
+values contained in a matrix are represented as colors
+
+## Properties
+
+| Property          | Attribute      | Type                     | Default | Description                                      |
+|-------------------|----------------|--------------------------|---------|--------------------------------------------------|
+| `axisHidden`      | `axis-hidden`  | `boolean`                | false   | Hide all axes                                    |
+| `blend`           | `blend`        | `boolean`                | false   | Enable cell color blending                       |
+| `config`          | `config`       | `HeatmapConfig`          | null    | Heatmap configuration options.                   |
+| `labelHidden`     | `label-hidden` | `boolean`                | false   | Hide all labels in the cells                     |
+| `labelWidth`      | `label-width`  | `number`                 | 0       | Number of maximum label width that cell can paint in pixel.<br />e.g. label-width: 30px; cell label hides when text length reaches 30px. |
+| `maxPoint`        | `max-point`    | `number`                 | 1       | Maximum point of the cell coloring               |
+| `midPoint`        | `mid-point`    | `number`                 | 0       | Middle point of the cell coloring                |
+| `minPoint`        | `min-point`    | `number`                 | -1      | Minimum point of the cell coloring               |
+| `renderCallback`  |                | `HeatmapRenderCallback`  |         | Render callback function use for custom cell properties.<br />Accepts custom label, foreground and background color |
+| `saturation`      | `saturation`   | `number`                 | 0.4     | Cell minimum color saturation, value can be from 0 - 1 |
+| `tooltipCallback` |                | `HeatmapTooltipCallback` |         | A callback function that allows tooltip rendering on cell hover |
+
+## Methods
+
+| Method               | Type                | Description                                      |
+|----------------------|---------------------|--------------------------------------------------|
+| `getCellDataAtEvent` | `(event: any): any` | Returns data of interactive cell<br /><br />**event**: an event that occur while the user interacting with element |

package/lib/heatmap/helpers/color.d.ts

@@ -1,4 +1,4 @@
-import { ColorCommonInstance } from '@refinitiv-ui/utils';
+import { ColorCommonInstance } from '@refinitiv-ui/utils/lib/color.js';
 import { interpolate } from 'd3-interpolate';
 /**
  * Check if the color is a light color

package/lib/heatmap/helpers/color.js

@@ -1,5 +1,5 @@
 /* istanbul ignore file */
-import { color, rgb, hsl } from '@refinitiv-ui/utils';
+import { color, rgb, hsl } from '@refinitiv-ui/utils/lib/color.js';
 import { interpolate } from 'd3-interpolate';
 /**
  * Check if the color is a light color

package/lib/heatmap/helpers/text.d.ts

@@ -1,4 +1,4 @@
-import { HeatmapCell } from './types';
+import type { HeatmapCell } from './types';
 declare const MIN_FONT_SIZE = 10;
 declare const MAX_FONT_SIZE = 16;
 /**

package/lib/heatmap/index.d.ts

@@ -1,9 +1,9 @@
 import { JSXInterface } from '../jsx';
-import { ResponsiveElement, TemplateResult, CSSResult, PropertyValues } from '@refinitiv-ui/core';
-import '../canvas';
-import '../tooltip';
-import { HeatmapCell, HeatmapConfig, HeatmapTooltipCallback, HeatmapRenderCallback } from './helpers/types';
-export { HeatmapCell, HeatmapXAxis, HeatmapYAxis, HeatmapConfig, HeatmapTooltipCallback, HeatmapRenderCallback, HeatmapCustomisableProperties } from './helpers/types';
+import { ResponsiveElement, TemplateResult, CSSResultGroup, PropertyValues } from '@refinitiv-ui/core';
+import '../canvas/index.js';
+import '../tooltip/index.js';
+import type { HeatmapCell, HeatmapConfig, HeatmapTooltipCallback, HeatmapRenderCallback } from './helpers/types';
+export type { HeatmapCell, HeatmapXAxis, HeatmapYAxis, HeatmapConfig, HeatmapTooltipCallback, HeatmapRenderCallback, HeatmapCustomisableProperties } from './helpers/types';
 /**
  * A graphical representation of data where the individual
  * values contained in a matrix are represented as colors
@@ -15,12 +15,12 @@ export declare class Heatmap extends ResponsiveElement {
      */
     static get version(): string;
     /**
-     * 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;
     /**
      * Heatmap configuration options.
      * @type {HeatmapConfig}

package/lib/heatmap/index.js

@@ -1,17 +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;
-};
-import { ResponsiveElement, html, css, query, customElement, property } from '@refinitiv-ui/core';
-import { color, MicroTaskRunner } from '@refinitiv-ui/utils';
-import '../canvas';
-import '../tooltip';
-import { Track } from './helpers/track';
-import { blend, brighten, darken, isLight, interpolate } from './helpers/color';
-import { getResponsiveFontSize, getMaximumTextWidth, getMaximumLabelTextWidth, MIN_FONT_SIZE } from './helpers/text';
-import { VERSION } from '../';
+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 { query } from '@refinitiv-ui/core/lib/decorators/query.js';
+import { VERSION } from '../version.js';
+import { MicroTaskRunner } from '@refinitiv-ui/utils/lib/async.js';
+import { color } from '@refinitiv-ui/utils/lib/color.js';
+import '../canvas/index.js';
+import '../tooltip/index.js';
+import { Track } from './helpers/track.js';
+import { blend, brighten, darken, isLight, interpolate } from './helpers/color.js';
+import { getResponsiveFontSize, getMaximumTextWidth, getMaximumLabelTextWidth, MIN_FONT_SIZE } from './helpers/text.js';
 const MAX_CELL_WIDTH_RATIO = 0.85;
 const DEFAULT_CANVAS_RATIO = 0.75; // ratio — 4:3
 /**
@@ -144,7 +143,7 @@ let Heatmap = class Heatmap extends ResponsiveElement {
         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.
      * @returns CSS template
@@ -204,7 +203,7 @@ let Heatmap = class Heatmap extends ResponsiveElement {
         const previousHoverCell = this._hoverCell;
         this._hoverCell = hoverCell;
         if (this._hoverCell !== previousHoverCell) {
-            void this.requestUpdate('hoverCell', previousHoverCell);
+            this.requestUpdate('hoverCell', previousHoverCell);
             this.hoverCellChanged(this._hoverCell, previousHoverCell);
         }
     }