@refinitiv-ui/elements 7.0.0 → 7.0.2

package/lib/dialog/index.js

@@ -3,15 +3,15 @@ import { 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 { translate, TranslatePropertyKey } from '@refinitiv-ui/translate';
-import { deregister as draggableDeregister, register as draggableRegister } from './draggable-element.js';
-import { Overlay } from '../overlay/index.js';
+import '@refinitiv-ui/phrasebook/locale/en/dialog.js';
+import { TranslatePropertyKey, translate } from '@refinitiv-ui/translate';
+import '../button/index.js';
+import '../header/index.js';
 import '../icon/index.js';
+import { Overlay } from '../overlay/index.js';
 import '../panel/index.js';
-import '../header/index.js';
-import '../button/index.js';
-import '@refinitiv-ui/phrasebook/locale/en/dialog.js';
+import { VERSION } from '../version.js';
+import { deregister as draggableDeregister, register as draggableRegister } from './draggable-element.js';
 /**
  * Popup window, designed to contain and show any HTML content.
  * It provides modal and dragging functionality,
@@ -94,34 +94,34 @@ let Dialog = class Dialog extends Overlay {
         return [
             super.styles,
             css `
-      :host {
-        width: 400px;
-        display: flex;
-        flex-flow: column nowrap;
-        flex-grow: 1;
-        flex-shrink: 1;
-        flex-basis: auto;
-      }
-      [part=content] {
-        flex: 1 1 auto;
-        overflow-x: hidden;
-        overflow-y: auto;
-        -webkit-overflow-scrolling: touch;
-      }
-      [part=default-buttons] {
-        display: flex;
-        justify-content: flex-end;
-        align-items: center;
-      }
-      [part=header],
-      [part=footer] {
-        flex: none;
-      }
-      [part=close] {
-        flex: none;
-        cursor: pointer;
-      }
-    `
+        :host {
+          width: 400px;
+          display: flex;
+          flex-flow: column nowrap;
+          flex-grow: 1;
+          flex-shrink: 1;
+          flex-basis: auto;
+        }
+        [part='content'] {
+          flex: 1 1 auto;
+          overflow-x: hidden;
+          overflow-y: auto;
+          -webkit-overflow-scrolling: touch;
+        }
+        [part='default-buttons'] {
+          display: flex;
+          justify-content: flex-end;
+          align-items: center;
+        }
+        [part='header'],
+        [part='footer'] {
+          flex: none;
+        }
+        [part='close'] {
+          flex: none;
+          cursor: pointer;
+        }
+      `
         ];
     }
     /**
@@ -142,8 +142,12 @@ let Dialog = class Dialog extends Overlay {
      */
     shouldUpdate(changedProperties) {
         const shouldUpdate = super.shouldUpdate(changedProperties);
-        return shouldUpdate
-            || ((changedProperties.has('draggable') || changedProperties.has('header') || changedProperties.has('noInteractionLock') || changedProperties.has(TranslatePropertyKey)) && this.opened);
+        return (shouldUpdate ||
+            ((changedProperties.has('draggable') ||
+                changedProperties.has('header') ||
+                changedProperties.has('noInteractionLock') ||
+                changedProperties.has(TranslatePropertyKey)) &&
+                this.opened));
     }
     /**
      * Compute property values that depend on other properties
@@ -275,7 +279,13 @@ let Dialog = class Dialog extends Overlay {
     get headerTemplate() {
         return html `
       ${this.header === null ? this.t('HEADER') : this.header}
-      <ef-icon aria-hidden="true" part="close" icon="cross" slot="right" @tap="${this.defaultCancel}"></ef-icon>
+      <ef-icon
+        aria-hidden="true"
+        part="close"
+        icon="cross"
+        slot="right"
+        @tap="${this.defaultCancel}"
+      ></ef-icon>
     `;
     }
     /**
@@ -285,15 +295,9 @@ let Dialog = class Dialog extends Overlay {
      */
     render() {
         return html `
-      <ef-header drag-handle part="header">
-        ${this.headerTemplate}
-      </ef-header>
-      <ef-panel part="content" spacing transparent>
-        ${this.contentTemplate}
-      </ef-panel>
-      <div part="footer">
-        ${this.footerTemplate}
-      </div>
+      <ef-header drag-handle part="header"> ${this.headerTemplate} </ef-header>
+      <ef-panel part="content" spacing transparent> ${this.contentTemplate} </ef-panel>
+      <div part="footer">${this.footerTemplate}</div>
     `;
     }
 };

package/lib/email-field/index.d.ts

@@ -1,8 +1,8 @@
 import { JSXInterface } from '../jsx';
 import { PropertyValues } from '@refinitiv-ui/core';
+import { TemplateMap } from '@refinitiv-ui/core/directives/template-map.js';
 import '../icon/index.js';
 import { TextField } from '../text-field/index.js';
-import { TemplateMap } from '@refinitiv-ui/core/directives/template-map.js';
 /**
  * A form control element for email.
  *

package/lib/email-field/index.js

@@ -63,9 +63,9 @@ let EmailField = class EmailField extends TextField {
     get decorateInputMap() {
         return {
             ...super.decorateInputMap,
-            'type': 'email',
-            'inputmode': 'email',
-            'multiple': this.multiple
+            type: 'email',
+            inputmode: 'email',
+            multiple: this.multiple
         };
     }
     /**
@@ -76,9 +76,9 @@ let EmailField = class EmailField extends TextField {
     /* c8 ignore start */
     shouldValidateInput(changedProperties) {
         // TODO: This validation should be refactored
-        return changedProperties.has('value')
-            || changedProperties.has('multiple')
-            || super.shouldValidateInput(changedProperties);
+        return (changedProperties.has('value') ||
+            changedProperties.has('multiple') ||
+            super.shouldValidateInput(changedProperties));
     }
 };
 __decorate([

package/lib/events.d.ts

@@ -1,4 +1,4 @@
-import type { TapEvent, ResizeEvent, FocusedChangedEvent } from '@refinitiv-ui/core';
+import type { FocusedChangedEvent, ResizeEvent, TapEvent } from '@refinitiv-ui/core';
 /**
  * Dispatched when `opened` state changes
  * Prevent default to stop opening/closing pipeline

package/lib/flag/index.d.ts

@@ -1,5 +1,5 @@
 import { JSXInterface } from '../jsx';
-import { BasicElement, CSSResultGroup, TemplateResult, PropertyValues } from '@refinitiv-ui/core';
+import { BasicElement, CSSResultGroup, PropertyValues, TemplateResult } from '@refinitiv-ui/core';
 export { preload } from './utils/FlagLoader.js';
 export declare class Flag extends BasicElement {
     /**

package/lib/flag/index.js

@@ -1,5 +1,5 @@
 import { __decorate } from "tslib";
-import { BasicElement, svg, css } from '@refinitiv-ui/core';
+import { BasicElement, css, svg } from '@refinitiv-ui/core';
 import { customElement } from '@refinitiv-ui/core/decorators/custom-element.js';
 import { property } from '@refinitiv-ui/core/decorators/property.js';
 import { unsafeHTML } from '@refinitiv-ui/core/directives/unsafe-html.js';
@@ -47,10 +47,12 @@ let Flag = class Flag extends BasicElement {
         return this._flag;
     }
     set flag(value) {
-        if (this.flag !== value) {
+        const oldValue = this._flag;
+        if (oldValue !== value) {
             this.deferFlagReady();
             this._flag = value;
             void this.setFlagSrc();
+            this.requestUpdate('flag', oldValue);
         }
     }
     /**
@@ -130,8 +132,7 @@ let Flag = class Flag extends BasicElement {
      */
     setPrefix() {
         if (!FlagLoader.isPrefixSet) {
-            const CDNPrefix = this.getComputedVariable('--cdn-prefix')
-                .replace(/^('|")|('|")$/g, '');
+            const CDNPrefix = this.getComputedVariable('--cdn-prefix').replace(/^('|")|('|")$/g, '');
             FlagLoader.setCdnPrefix(CDNPrefix);
         }
     }
@@ -152,7 +153,7 @@ let Flag = class Flag extends BasicElement {
     }
 };
 __decorate([
-    property({ type: String })
+    property({ type: String, reflect: true })
 ], Flag.prototype, "flag", null);
 Flag = __decorate([
     customElement('ef-flag')

package/lib/flag/utils/FlagLoader.js

@@ -15,5 +15,5 @@ export { flagLoaderInstance as FlagLoader };
  * @returns Array of promises, which will be resolved with SVG bodies.
  */
 export const preload = (...attrs) => {
-    return attrs.map(flag => flagLoaderInstance.loadSVG(flag));
+    return attrs.map((flag) => flagLoaderInstance.loadSVG(flag));
 };

package/lib/header/index.d.ts

@@ -1,5 +1,5 @@
 import { JSXInterface } from '../jsx';
-import { BasicElement, TemplateResult, CSSResultGroup } from '@refinitiv-ui/core';
+import { BasicElement, CSSResultGroup, TemplateResult } from '@refinitiv-ui/core';
 /**
  * Use to identify and separate different sections of a page.
  * Headers helps to organize the page layout content into

package/lib/header/index.js

@@ -1,5 +1,5 @@
 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 { VERSION } from '../version.js';
@@ -40,7 +40,7 @@ let Header = class Header extends BasicElement {
         margin-bottom: 0;
         vertical-align: middle;
       }
-      [part="label"] {
+      [part='label'] {
         text-align: inherit;
       }
     `;

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

@@ -1 +1 @@
-dispatchEvent(new CustomEvent('ef.customStyles.define', { detail: { name: 'ef-header', styles: ':host{color:#ccc;padding:0 0 0 4px;height:28px;font-size:12px;font-family:inherit;white-space:nowrap;box-sizing:border-box;display:flex;align-items:center;overflow:hidden;background-color:#333;text-transform:uppercase}:host [part=spacer]{flex:none;width:4px}:host [part=label]{flex:1 1 auto;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;margin-right:8px}:host ::slotted(ef-button[transparent]){color:inherit!important}:host([level="1"]){background-color:#404040}:host([level="3"]){background-color:#262626}:host([level="4"]){background-color:#1a1a1a}' }}));
+dispatchEvent(new CustomEvent('ef.customStyles.define', { detail: { name: 'ef-header', styles: ':host{color:#ccc;padding:0 0 0 4px;height:28px;font-size:12px;font-family:inherit;white-space:nowrap;box-sizing:border-box;display:flex;align-items:center;overflow:hidden;background-color:#333;text-transform:uppercase}:host [part=spacer]{flex:none;width:4px}:host [part=label]{flex:1 1 auto;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;margin-right:8px}:host ::slotted(ef-button[transparent]){color:inherit!important}:host([level=\'1\']){background-color:#404040}:host([level=\'3\']){background-color:#262626}:host([level=\'4\']){background-color:#1a1a1a}' }}));

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

@@ -1 +1 @@
-dispatchEvent(new CustomEvent('ef.customStyles.define', { detail: { name: 'ef-header', styles: ':host{color:#0d0d0d;padding:0 0 0 4px;height:28px;font-size:12px;font-family:inherit;white-space:nowrap;box-sizing:border-box;display:flex;align-items:center;overflow:hidden;background-color:#e6e6e6;text-transform:uppercase}:host [part=spacer]{flex:none;width:4px}:host [part=label]{flex:1 1 auto;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;margin-right:8px}:host ::slotted(ef-button[transparent]){color:inherit!important}:host([level="1"]){background-color:#d9d9d9}:host([level="3"]){background-color:#f2f2f2}:host([level="4"]){background-color:#fafafa}' }}));
+dispatchEvent(new CustomEvent('ef.customStyles.define', { detail: { name: 'ef-header', styles: ':host{color:#0d0d0d;padding:0 0 0 4px;height:28px;font-size:12px;font-family:inherit;white-space:nowrap;box-sizing:border-box;display:flex;align-items:center;overflow:hidden;background-color:#e6e6e6;text-transform:uppercase}:host [part=spacer]{flex:none;width:4px}:host [part=label]{flex:1 1 auto;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;margin-right:8px}:host ::slotted(ef-button[transparent]){color:inherit!important}:host([level=\'1\']){background-color:#d9d9d9}:host([level=\'3\']){background-color:#f2f2f2}:host([level=\'4\']){background-color:#fafafa}' }}));

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

@@ -1 +1 @@
-dispatchEvent(new CustomEvent('ef.customStyles.define', { detail: { name: 'ef-header', styles: ':host{padding:0 0 0 5px;height:27px;font-size:14px;font-family:inherit;white-space:nowrap;box-sizing:border-box;display:flex;align-items:center;overflow:hidden;position:relative;color:#c2c2c2;background-color:#2e2e33}:host [part=spacer]{flex:none;width:5px}:host [part=label]{flex:1 1 auto;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;margin-right:10px;font-weight:600;text-transform:uppercase}:host ::slotted(ef-button[transparent]){color:inherit!important}:host([level="3"]) [part=label]{text-transform:none}:host([level="1"]){color:#e2e2e2;background-color:#4a4a52;background-image:linear-gradient(rgba(255,255,255,.03) 0,rgba(255,255,255,0) 100%)}:host([level="3"]){color:#8c8c8c;background-color:#212124}' }}));
+dispatchEvent(new CustomEvent('ef.customStyles.define', { detail: { name: 'ef-header', styles: ':host{padding:0 0 0 5px;height:27px;font-size:14px;font-family:inherit;white-space:nowrap;box-sizing:border-box;display:flex;align-items:center;overflow:hidden;position:relative;color:#c2c2c2;background-color:#2e2e33}:host [part=spacer]{flex:none;width:5px}:host [part=label]{flex:1 1 auto;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;margin-right:10px;font-weight:600;text-transform:uppercase}:host ::slotted(ef-button[transparent]){color:inherit!important}:host([level=\'3\']) [part=label]{text-transform:none}:host([level=\'1\']){color:#e2e2e2;background-color:#4a4a52;background-image:linear-gradient(rgba(255,255,255,.03) 0,rgba(255,255,255,0) 100%)}:host([level=\'3\']){color:#8c8c8c;background-color:#212124}' }}));

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

@@ -1 +1 @@
-dispatchEvent(new CustomEvent('ef.customStyles.define', { detail: { name: 'ef-header', styles: ':host{padding:0 0 0 5px;height:27px;font-size:14px;font-family:inherit;white-space:nowrap;box-sizing:border-box;display:flex;align-items:center;overflow:hidden;position:relative;color:#505050;background-color:#d0d4db}:host [part=spacer]{flex:none;width:5px}:host [part=label]{flex:1 1 auto;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;margin-right:10px;font-weight:600;text-transform:uppercase}:host ::slotted(ef-button[transparent]){color:inherit!important}:host([level="3"]) [part=label]{text-transform:none}:host([level="1"]){color:#484848;background-color:#bec3cc;background-image:linear-gradient(rgba(255,255,255,.18) 0,rgba(255,255,255,0) 100%)}:host([level="3"]){color:#6e6e78;background-color:#e4e8ed}' }}));
+dispatchEvent(new CustomEvent('ef.customStyles.define', { detail: { name: 'ef-header', styles: ':host{padding:0 0 0 5px;height:27px;font-size:14px;font-family:inherit;white-space:nowrap;box-sizing:border-box;display:flex;align-items:center;overflow:hidden;position:relative;color:#505050;background-color:#d0d4db}:host [part=spacer]{flex:none;width:5px}:host [part=label]{flex:1 1 auto;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;margin-right:10px;font-weight:600;text-transform:uppercase}:host ::slotted(ef-button[transparent]){color:inherit!important}:host([level=\'3\']) [part=label]{text-transform:none}:host([level=\'1\']){color:#484848;background-color:#bec3cc;background-image:linear-gradient(rgba(255,255,255,.18) 0,rgba(255,255,255,0) 100%)}:host([level=\'3\']){color:#6e6e78;background-color:#e4e8ed}' }}));

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

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

package/lib/heatmap/helpers/color.js

@@ -1,6 +1,6 @@
 /* c8 ignore start */
-import { color, rgb, hsl } from '@refinitiv-ui/utils/color.js';
 import { interpolate } from 'd3-interpolate';
+import { color, hsl, rgb } from '@refinitiv-ui/utils/color.js';
 /**
  * Check if the color is a light color
  * @param col color to check
@@ -8,7 +8,7 @@ import { interpolate } from 'd3-interpolate';
  */
 const isLight = (col) => {
     const { r, g, b } = rgb(col);
-    return ((r * 299 + g * 587 + b * 114) / 1000) > 128;
+    return (r * 299 + g * 587 + b * 114) / 1000 > 128;
 };
 /**
  * Brightens a color
@@ -58,9 +58,15 @@ const blend = (color1, color2, backgroundColor, amount) => {
         mixBlueComponent = !mixBlueComponent;
     }
     const factor = 1 - Math.abs(amount);
-    const red = mixRedComponent ? Math.round(interpolate(primaryColor.r, secondaryColor.r)(factor)) : primaryColor.r;
-    const green = mixGreenComponent ? Math.round(interpolate(primaryColor.g, secondaryColor.g)(factor)) : primaryColor.g;
-    const blue = mixBlueComponent ? Math.round(interpolate(primaryColor.b, secondaryColor.b)(factor)) : primaryColor.b;
+    const red = mixRedComponent
+        ? Math.round(interpolate(primaryColor.r, secondaryColor.r)(factor))
+        : primaryColor.r;
+    const green = mixGreenComponent
+        ? Math.round(interpolate(primaryColor.g, secondaryColor.g)(factor))
+        : primaryColor.g;
+    const blue = mixBlueComponent
+        ? Math.round(interpolate(primaryColor.b, secondaryColor.b)(factor))
+        : primaryColor.b;
     return color(`rgb(${red}, ${green}, ${blue})`)?.toString() || '';
 };
 export { blend, brighten, darken, isLight, interpolate };

package/lib/heatmap/helpers/track.js

@@ -67,10 +67,10 @@ export class Track {
         this._laneStarts[0] = 0;
         if (trackSize && laneCount) {
             let start = 0;
-            const laneSize = (trackSize / laneCount);
+            const laneSize = trackSize / laneCount;
             for (let i = 0; i < laneCount; ++i) {
                 const end = start + laneSize;
-                this._laneStarts[i] = (start | 0);
+                this._laneStarts[i] = start | 0;
                 this._laneSizes[i] = (end | 0) - (start | 0);
                 start = end;
             }
@@ -121,7 +121,7 @@ export class Track {
      */
     getContentSize(index) {
         const contentSize = this.getLaneSize(index) - this._margin - this._margin;
-        return (contentSize > 0) ? contentSize : 0;
+        return contentSize > 0 ? contentSize : 0;
     }
     /**
      * Get content start position

package/lib/heatmap/index.d.ts

@@ -1,8 +1,8 @@
 import { JSXInterface } from '../jsx';
-import { ResponsiveElement, TemplateResult, CSSResultGroup, PropertyValues } from '@refinitiv-ui/core';
+import { CSSResultGroup, PropertyValues, ResponsiveElement, TemplateResult } from '@refinitiv-ui/core';
 import '../canvas/index.js';
 import '../tooltip/index.js';
-import type { HeatmapXAxis, HeatmapCell, HeatmapConfig, HeatmapYAxis, HeatmapCustomisableProperties, HeatmapTooltipCallback, HeatmapRenderCallback } from './helpers/types';
+import type { HeatmapCell, HeatmapConfig, HeatmapCustomisableProperties, HeatmapRenderCallback, HeatmapTooltipCallback, HeatmapXAxis, HeatmapYAxis } from './helpers/types';
 export type { HeatmapXAxis, HeatmapCell, HeatmapConfig, HeatmapYAxis, HeatmapCustomisableProperties, HeatmapTooltipCallback, HeatmapRenderCallback };
 /**
  * A graphical representation of data where the individual
@@ -239,9 +239,9 @@ export declare class Heatmap extends ResponsiveElement {
      */
     private initialiseRowTrack;
     /**
-      * Initialize column track
-      * @returns {void}
-      */
+     * Initialize column track
+     * @returns {void}
+     */
     private initialiseColumnTrack;
     /**
      * Hit testing on heatmap
@@ -404,10 +404,10 @@ export declare class Heatmap extends ResponsiveElement {
      */
     private paintAllCellBackground;
     /**
-    * Paints a single cell background colour
-    * @param {HeatmapCell} cell cell to paint
-    * @returns {void}
-    */
+     * Paints a single cell background colour
+     * @param {HeatmapCell} cell cell to paint
+     * @returns {void}
+     */
     private paintCellBackground;
     /**
      * Construct and renders x-axis

package/lib/heatmap/index.js

@@ -1,16 +1,16 @@
 import { __decorate } from "tslib";
-import { ResponsiveElement, html, css } from '@refinitiv-ui/core';
+import { ResponsiveElement, css, html } from '@refinitiv-ui/core';
 import { customElement } from '@refinitiv-ui/core/decorators/custom-element.js';
 import { property } from '@refinitiv-ui/core/decorators/property.js';
 import { query } from '@refinitiv-ui/core/decorators/query.js';
-import { VERSION } from '../version.js';
 import { MicroTaskRunner } from '@refinitiv-ui/utils/async.js';
 import { color } from '@refinitiv-ui/utils/color.js';
 import '../canvas/index.js';
 import '../tooltip/index.js';
+import { VERSION } from '../version.js';
+import { blend, brighten, darken, interpolate, isLight } from './helpers/color.js';
+import { MIN_FONT_SIZE, getMaximumTextWidth, getResponsiveFontSize } from './helpers/text.js';
 import { Track } from './helpers/track.js';
-import { blend, brighten, darken, isLight, interpolate } from './helpers/color.js';
-import { getResponsiveFontSize, getMaximumTextWidth, MIN_FONT_SIZE } from './helpers/text.js';
 const CELL_PADDING = 0.12;
 const CELL_MAX_TEXT_WIDTH = 1 - CELL_PADDING;
 const DEFAULT_CANVAS_RATIO = 0.75; // ratio — 4:3
@@ -37,13 +37,13 @@ let Heatmap = class Heatmap extends ResponsiveElement {
       :host {
         display: block;
       }
-      #container{
+      #container {
         width: 100%;
         height: 100%;
         display: flex;
       }
       #canvas-container {
-        min-width:0;
+        min-width: 0;
         display: flex;
         width: 100%;
         flex-direction: column;
@@ -52,14 +52,14 @@ let Heatmap = class Heatmap extends ResponsiveElement {
       #tooltip-overlay {
         position: absolute;
       }
-      [part=canvas] {
+      [part='canvas'] {
         flex-grow: 1;
       }
-      [part=x-axis] {
+      [part='x-axis'] {
         display: flex;
         align-items: center;
       }
-      [part=y-axis]{
+      [part='y-axis'] {
         display: flex;
         flex-direction: column;
       }
@@ -133,7 +133,7 @@ let Heatmap = class Heatmap extends ResponsiveElement {
      */
     get columnCount() {
         let result = 0;
-        this.rows?.forEach(columns => {
+        this.rows?.forEach((columns) => {
             if (columns.length > result) {
                 result = columns.length;
             }
@@ -268,14 +268,14 @@ let Heatmap = class Heatmap extends ResponsiveElement {
             this.labelHiddenChanged();
         }
         // Re-paints whole canvas when at least one of the following properties changes
-        if (changedProperties.has('config')
-            || changedProperties.has('blend')
-            || changedProperties.has('minPoint')
-            || changedProperties.has('midPoint')
-            || changedProperties.has('maxPoint')
-            || changedProperties.has('saturation')
-            || changedProperties.has('axisHidden')
-            || changedProperties.has('labelWidth')) {
+        if (changedProperties.has('config') ||
+            changedProperties.has('blend') ||
+            changedProperties.has('minPoint') ||
+            changedProperties.has('midPoint') ||
+            changedProperties.has('maxPoint') ||
+            changedProperties.has('saturation') ||
+            changedProperties.has('axisHidden') ||
+            changedProperties.has('labelWidth')) {
             this.prepareAndPaint();
         }
     }
@@ -293,7 +293,8 @@ let Heatmap = class Heatmap extends ResponsiveElement {
      */
     /* c8 ignore start */
     onMouseMove(event) {
-        if (event.composedPath().includes(this.canvas) || this.tooltipCallback && this.tooltipOverlay === event.target) {
+        if (event.composedPath().includes(this.canvas) ||
+            (this.tooltipCallback && this.tooltipOverlay === event.target)) {
             this.hoverCell = this.hitTest(event);
         }
         else {
@@ -350,9 +351,9 @@ let Heatmap = class Heatmap extends ResponsiveElement {
         this.rowTrack.margin = this.cellMargin;
     }
     /**
-      * Initialize column track
-      * @returns {void}
-      */
+     * Initialize column track
+     * @returns {void}
+     */
     initialiseColumnTrack() {
         this.colTrack.init(this.offsetWidth, this.columnCount);
         this.colTrack.margin = this.cellMargin;
@@ -644,7 +645,7 @@ let Heatmap = class Heatmap extends ResponsiveElement {
         const label = typeof cell.customLabel === 'string' ? cell.customLabel : cell.label;
         if (this.canvasContext) {
             this.canvasContext.fillStyle = cell.customForegroundColor || cell.foregroundColor;
-            this.canvasContext.fillText(label || '', cell.x + cell.width / 2, (cell.y + 1 + cell.height / 2) + margin);
+            this.canvasContext.fillText(label || '', cell.x + cell.width / 2, cell.y + 1 + cell.height / 2 + margin);
         }
     }
     /**
@@ -669,12 +670,15 @@ let Heatmap = class Heatmap extends ResponsiveElement {
         canvas.textAlign = 'center';
         canvas.textBaseline = 'middle';
         canvas.font = `${fontSize}px ${fontFamily}`;
-        let isWithinMinCellWidth = ((this.labelWidth || getMaximumTextWidth(canvas, this.cells, this.hasCellHeader)) / contentWidth) <= CELL_MAX_TEXT_WIDTH;
+        let isWithinMinCellWidth = (this.labelWidth || getMaximumTextWidth(canvas, this.cells, this.hasCellHeader)) / contentWidth <=
+            CELL_MAX_TEXT_WIDTH;
         // Tries to get the largest possible font size that is within `CELL_MAX_TEXT_WIDTH`
         if (!isWithinMinCellWidth && fontSize !== MIN_FONT_SIZE) {
             while (!isWithinMinCellWidth) {
                 canvas.font = `${fontSize}px ${fontFamily}`; // Should assigned new font size to canvas before calculated again.
-                isWithinMinCellWidth = ((this.labelWidth || getMaximumTextWidth(canvas, this.cells, this.hasCellHeader)) / contentWidth) <= CELL_MAX_TEXT_WIDTH;
+                isWithinMinCellWidth =
+                    (this.labelWidth || getMaximumTextWidth(canvas, this.cells, this.hasCellHeader)) / contentWidth <=
+                        CELL_MAX_TEXT_WIDTH;
                 // Stops when reaches minimum font-size
                 if (fontSize === MIN_FONT_SIZE) {
                     break;
@@ -684,7 +688,9 @@ let Heatmap = class Heatmap extends ResponsiveElement {
                 }
             }
         }
-        const isWithinMinCellHeight = this.hasCellHeader ? (fontSize * 2) < contentHeight : fontSize < contentHeight;
+        const isWithinMinCellHeight = this.hasCellHeader
+            ? fontSize * 2 < contentHeight
+            : fontSize < contentHeight;
         this.contentWithinCellBoundary = isWithinMinCellWidth && isWithinMinCellHeight;
         return this.contentWithinCellBoundary;
     }
@@ -738,10 +744,10 @@ let Heatmap = class Heatmap extends ResponsiveElement {
         }
         const saturateRatio = 1 - saturation;
         if (value > this.midPoint) {
-            return ((value - this.midPoint) / (this.maxPoint - this.midPoint) * saturateRatio) + saturation;
+            return ((value - this.midPoint) / (this.maxPoint - this.midPoint)) * saturateRatio + saturation;
         }
         else {
-            return ((value - this.midPoint) / (this.midPoint - this.minPoint) * saturateRatio) - saturation;
+            return ((value - this.midPoint) / (this.midPoint - this.minPoint)) * saturateRatio - saturation;
         }
     }
     /* c8 ignore stop */
@@ -795,7 +801,7 @@ let Heatmap = class Heatmap extends ResponsiveElement {
             const margin = this.labelHidden ? 0 : this.calculateHeaderMargin(cell.height);
             this.canvasContext.font = 'bold ' + labelFontStyle;
             this.canvasContext.fillStyle = cell.customForegroundColor || cell.foregroundColor;
-            this.canvasContext.fillText(cell.header || '', cell.x + cell.width / 2, (cell.y + 1 + cell.height / 2) - margin);
+            this.canvasContext.fillText(cell.header || '', cell.x + cell.width / 2, cell.y + 1 + cell.height / 2 - margin);
             // Reverts font style to paint label correctly
             this.canvasContext.font = labelFontStyle;
         }
@@ -836,10 +842,10 @@ let Heatmap = class Heatmap extends ResponsiveElement {
         }
     }
     /**
-    * Paints a single cell background colour
-    * @param {HeatmapCell} cell cell to paint
-    * @returns {void}
-    */
+     * Paints a single cell background colour
+     * @param {HeatmapCell} cell cell to paint
+     * @returns {void}
+     */
     paintCellBackground(cell) {
         if (this.canvasContext) {
             this.canvasContext.fillStyle = cell.customBackgroundColor || cell.backgroundColor;
@@ -960,7 +966,7 @@ let Heatmap = class Heatmap extends ResponsiveElement {
                 yAxisElement.removeChild(yAxisElement.lastChild);
             }
         }
-        this.rowTrack.init(this.offsetHeight - (this.crossBox.offsetHeight + (this.cellMargin * 2)), this.rowCount);
+        this.rowTrack.init(this.offsetHeight - (this.crossBox.offsetHeight + this.cellMargin * 2), this.rowCount);
         // Clear yAxis element before re-create yAxis
         while (yAxisElement.children.length > laneCount) {
             if (yAxisElement.lastChild) {
@@ -1026,20 +1032,23 @@ let Heatmap = class Heatmap extends ResponsiveElement {
     render() {
         return html `
       <div id="container" @mousemove=${this.onMouseMove} @mouseleave=${this.onMouseLeave}>
-        ${this.config?.yAxis && !this.axisHidden ? html `
-        <div id="y-axis-container">
-          <div part="cross-box"></div>
-          <div part="y-axis"></div>
-        </div>` : null}
+        ${this.config?.yAxis && !this.axisHidden
+            ? html ` <div id="y-axis-container">
+              <div part="cross-box"></div>
+              <div part="y-axis"></div>
+            </div>`
+            : null}
         <div id="canvas-container">
           ${this.config?.xAxis && !this.axisHidden ? html `<div part="x-axis"></div>` : null}
           <ef-canvas part="canvas" @resize=${this.onCanvasResize}></ef-canvas>
           ${this.tooltipCallback ? html `<div id="tooltip-overlay"></div>` : null}
         </div>
       </div>
-      ${this.tooltipCallback ? html `
-        <ef-tooltip .condition=${this.tooltipCondition} .renderer=${this.tooltipRenderer}></ef-tooltip>
-      ` : null}
+      ${this.tooltipCallback
+            ? html `
+            <ef-tooltip .condition=${this.tooltipCondition} .renderer=${this.tooltipRenderer}></ef-tooltip>
+          `
+            : null}
     `;
     }
 };

package/lib/icon/index.d.ts

@@ -1,6 +1,6 @@
 import { JSXInterface } from '../jsx';
-import { BasicElement, CSSResultGroup, TemplateResult, PropertyValues } from '@refinitiv-ui/core';
-import { type Config } from '../configuration/index.js';
+import { BasicElement, CSSResultGroup, PropertyValues, TemplateResult } from '@refinitiv-ui/core';
+import type { Config } from '../configuration/index.js';
 export declare class Icon extends BasicElement {
     /**
      * Element version number