@refinitiv-ui/elements 6.9.0-next.0 → 6.9.0

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,2 +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,2 +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,2 +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,2 +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 @@
 /* istanbul ignore file */
-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/helpers/types.d.ts

@@ -1,5 +1,5 @@
 type HeatmapConfig = {
-    data: Array<HeatmapCell[]>;
+    data: HeatmapCell[][];
     yAxis?: HeatmapYAxis;
     xAxis?: HeatmapXAxis;
 };
@@ -13,18 +13,18 @@ type HeatmapYAxis = {
     position: 'left' | 'right';
 };
 type HeatmapCell = {
-    rowIndex: number;
-    colIndex: number;
-    x: number;
-    y: number;
-    width: number;
-    height: number;
+    rowIndex?: number;
+    colIndex?: number;
+    x?: number;
+    y?: number;
+    width?: number;
+    height?: number;
     value: number | null;
     header?: string;
     label?: string;
-    foregroundColor: string;
-    defaultBackground: string;
-    backgroundColor: string;
+    foregroundColor?: string;
+    defaultBackground?: string;
+    backgroundColor?: string;
     animationFrame?: number;
     customLabel?: string;
     customBackgroundColor?: string;

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;
       }
@@ -134,7 +134,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 {
      */
     /* istanbul ignore next */
     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 {
@@ -315,15 +316,13 @@ let Heatmap = class Heatmap extends ResponsiveElement {
      */
     onResize() {
         this.updateTimer = 0;
-        if (!this.isSizeCalculated) {
-            if (this.offsetWidth || this.offsetHeight) {
-                this.isSizeCalculated = true;
-            }
-        }
         if (this.isSizeCalculated) {
             const spacing = parseFloat(this.getComputedVariable('--spacing', '0'));
             this.cellMargin = spacing / 2;
         }
+        else {
+            this.isSizeCalculated = Boolean(this.offsetWidth || this.offsetHeight);
+        }
         // calculate responsive height
         if (this.responsiveHeight || !this.offsetHeight) {
             const width = this.offsetWidth;
@@ -348,9 +347,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;
@@ -392,6 +391,12 @@ let Heatmap = class Heatmap extends ResponsiveElement {
      */
     /* istanbul ignore next */
     updateTooltipOverlayPosition(cell) {
+        if (cell.x === undefined ||
+            cell.y === undefined ||
+            cell.width === undefined ||
+            cell.height === undefined) {
+            return;
+        }
         // Compensate x-axis height for overlay when x-axis is at top position
         let marginOverlayTop = 0;
         if (this.config?.xAxis && this.xAxis?.offsetHeight) {
@@ -411,7 +416,7 @@ let Heatmap = class Heatmap extends ResponsiveElement {
      */
     /* istanbul ignore next */
     hoverCellChanged(cell, previousCell) {
-        if (cell && cell.value !== null) {
+        if (cell && cell.value !== null && cell.backgroundColor) {
             if (this.tooltipCallback) {
                 this.updateTooltipOverlayPosition(cell);
             }
@@ -421,7 +426,7 @@ let Heatmap = class Heatmap extends ResponsiveElement {
             this.fade(cell, cell.backgroundColor, fadedColor, 100);
         }
         // returns color of previous cell to default cell color
-        if (previousCell && previousCell.value !== null) {
+        if (previousCell && previousCell.value !== null && previousCell.backgroundColor) {
             previousCell.foregroundColor = this.foregroundColor;
             this.fade(previousCell, previousCell.backgroundColor, this.getBackgroundColor(previousCell.value), 300);
         }
@@ -479,6 +484,12 @@ let Heatmap = class Heatmap extends ResponsiveElement {
      */
     /* istanbul ignore next */
     resetCell(cell) {
+        if (cell.x === undefined ||
+            cell.y === undefined ||
+            cell.width === undefined ||
+            cell.height === undefined) {
+            return;
+        }
         this.canvasContext?.clearRect(cell.x, cell.y, cell.width, cell.height);
     }
     /**
@@ -495,6 +506,9 @@ let Heatmap = class Heatmap extends ResponsiveElement {
         const start = performance.now();
         const end = start + duration;
         const fadingAnimation = (time) => {
+            if (cell.colIndex === undefined || cell.rowIndex === undefined) {
+                return;
+            }
             cell.x = this.colTrack.getContentStart(cell.colIndex);
             cell.y = this.rowTrack.getContentStart(cell.rowIndex);
             cell.width = this.colTrack.getContentSize(cell.colIndex);
@@ -631,12 +645,18 @@ let Heatmap = class Heatmap extends ResponsiveElement {
      * @returns {void}
      */
     paintLabel(cell) {
+        if (!this.canvasContext ||
+            cell.x === undefined ||
+            cell.y === undefined ||
+            cell.width === undefined ||
+            cell.height === undefined ||
+            cell.foregroundColor === undefined) {
+            return;
+        }
         const margin = cell.header ? this.calculateHeaderMargin(cell.height) : 0;
         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.fillStyle = cell.customForegroundColor || cell.foregroundColor;
+        this.canvasContext.fillText(label || '', cell.x + cell.width / 2, cell.y + 1 + cell.height / 2 + margin);
     }
     /**
      * Check if the text (label / header and label) can be paint on the cell
@@ -660,12 +680,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;
@@ -675,7 +698,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;
     }
@@ -727,10 +752,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;
         }
     }
     /**
@@ -778,15 +803,21 @@ let Heatmap = class Heatmap extends ResponsiveElement {
      * @returns {void}
      */
     paintHeader(cell) {
-        if (this.canvasContext) {
-            const labelFontStyle = this.canvasContext.font;
-            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);
-            // Reverts font style to paint label correctly
-            this.canvasContext.font = labelFontStyle;
+        if (!this.canvasContext ||
+            cell.x === undefined ||
+            cell.y === undefined ||
+            cell.width === undefined ||
+            cell.height === undefined ||
+            cell.foregroundColor === undefined) {
+            return;
         }
+        const labelFontStyle = this.canvasContext.font;
+        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);
+        // Reverts font style to paint label correctly
+        this.canvasContext.font = labelFontStyle;
     }
     /**
      * Paints header to all cells
@@ -823,15 +854,21 @@ 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;
-            this.canvasContext.fillRect(cell.x, cell.y, cell.width, cell.height);
+        if (!this.canvasContext ||
+            cell.x === undefined ||
+            cell.y === undefined ||
+            cell.width === undefined ||
+            cell.height === undefined ||
+            cell.backgroundColor === undefined) {
+            return;
         }
+        this.canvasContext.fillStyle = cell.customBackgroundColor || cell.backgroundColor;
+        this.canvasContext.fillRect(cell.x, cell.y, cell.width, cell.height);
     }
     /**
      * Construct and renders x-axis
@@ -947,7 +984,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) {
@@ -992,7 +1029,6 @@ let Heatmap = class Heatmap extends ResponsiveElement {
         if (this.hoverCell && this.canvasContext && this.tooltipCallback) {
             return this.tooltipCallback(this.hoverCell);
         }
-        return undefined;
     }
     /**
      * Checks if the tooltip should display or not
@@ -1011,20 +1047,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}
     `;
     }
 };
@@ -1060,10 +1099,10 @@ __decorate([
     property({ type: Number })
 ], Heatmap.prototype, "saturation", void 0);
 __decorate([
-    property({ type: Function, attribute: false })
+    property({ attribute: false })
 ], Heatmap.prototype, "tooltipCallback", void 0);
 __decorate([
-    property({ type: Function, attribute: false })
+    property({ attribute: false })
 ], Heatmap.prototype, "renderCallback", void 0);
 __decorate([
     query('[part=canvas]', true)

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

@@ -1,4 +1,3 @@
 import '@refinitiv-ui/elements/canvas/themes/halo/dark';
 import '@refinitiv-ui/elements/tooltip/themes/halo/dark';
-
 dispatchEvent(new CustomEvent('ef.customStyles.define', { detail: { name: 'ef-heatmap', styles: ':host{--spacing:2;--below-point-color:#F5475B;--mid-point-color:#1A1A1A;--above-point-color:#39C46E;background-color:#1a1a1a;--below-point-color:#F5475B;--mid-point-color:#FFFFFF;--above-point-color:#39C46E}:host .x-axis-item{padding:4px 0}:host .y-axis-item{padding:0 4px}:host .x-axis-item,:host .y-axis-item,:host [part=cross-box]{color:#ccc;background-color:#1a1a1a;font-weight:600}:host [part=canvas]{color:#000}' }}));

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

@@ -1,4 +1,3 @@
 import '@refinitiv-ui/elements/canvas/themes/halo/light';
 import '@refinitiv-ui/elements/tooltip/themes/halo/light';
-
 dispatchEvent(new CustomEvent('ef.customStyles.define', { detail: { name: 'ef-heatmap', styles: ':host{--spacing:2;--below-point-color:#B63243;--mid-point-color:#FAFAFA;--above-point-color:#246B3E;background-color:#fafafa;--below-point-color:#D94255;--mid-point-color:#FFFFFF;--above-point-color:#309054}:host .x-axis-item{padding:4px 0}:host .y-axis-item{padding:0 4px}:host .x-axis-item,:host .y-axis-item,:host [part=cross-box]{color:#1a1a1a;background-color:#fff;font-weight:600}:host [part=canvas]{color:#fff}' }}));

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

@@ -1,4 +1,3 @@
 import '@refinitiv-ui/elements/canvas/themes/solar/charcoal';
 import '@refinitiv-ui/elements/tooltip/themes/solar/charcoal';
-
 dispatchEvent(new CustomEvent('ef.customStyles.define', { detail: { name: 'ef-heatmap', styles: ':host{--spacing:2;--below-point-color:#F5475B;--mid-point-color:#1A1A1C;--above-point-color:#39C46E;background-color:#1a1a1c}:host [part=canvas]{color:rgba(255,255,255,.8)}:host .x-axis-item{padding:4px 0}:host .y-axis-item{padding:0 4px}:host .x-axis-item,:host .y-axis-item,:host [part=cross-box]{background-color:#212124;color:#c2c2c2}' }}));

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

@@ -1,4 +1,3 @@
 import '@refinitiv-ui/elements/canvas/themes/solar/pearl';
 import '@refinitiv-ui/elements/tooltip/themes/solar/pearl';
-
 dispatchEvent(new CustomEvent('ef.customStyles.define', { detail: { name: 'ef-heatmap', styles: ':host{--spacing:2;--below-point-color:#D94255;--mid-point-color:#FFFFFF;--above-point-color:#309054;background-color:#fff}:host [part=canvas]{color:rgba(0,0,0,.8)}:host .x-axis-item{padding:4px 0}:host .y-axis-item{padding:0 4px}:host .x-axis-item,:host .y-axis-item,:host [part=cross-box]{background-color:#e4e8ed;color:#484848}' }}));

package/lib/icon/custom-elements.json

@@ -8,12 +8,6 @@
           "name": "icon",
           "description": "Name of a known icon to render or URL of SVG icon.",
           "type": "string | null"
-        },
-        {
-          "name": "src",
-          "description": "Src location of an svg icon.",
-          "type": "string | null",
-          "deprecatedMessage": "Use `icon` instead"
         }
       ],
       "properties": [
@@ -22,13 +16,6 @@
           "attribute": "icon",
           "description": "Name of a known icon to render or URL of SVG icon.",
           "type": "string | null"
-        },
-        {
-          "name": "src",
-          "attribute": "src",
-          "description": "Src location of an svg icon.",
-          "type": "string | null",
-          "deprecatedMessage": "Use `icon` instead"
         }
       ]
     }

package/lib/icon/custom-elements.md

@@ -5,4 +5,3 @@
 | Property | Attribute | Type             | Default | Description                                      |
 |----------|-----------|------------------|---------|--------------------------------------------------|
 | `icon`   | `icon`    | `string \| null` | null    | Name of a known icon to render or URL of SVG icon. |
-| `src`    | `src`     | `string \| null` | null    | Src location of an svg icon.                     |