@refinitiv-ui/elements 7.0.0-next.0 → 7.0.0-next.1

package/lib/heatmap/index.js

@@ -11,130 +11,14 @@ import '../tooltip/index.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 MAX_CELL_WIDTH_RATIO = 0.85;
+const CELL_PADDING = 0.12;
+const CELL_MAX_TEXT_WIDTH = 1 - CELL_PADDING;
 const DEFAULT_CANVAS_RATIO = 0.75; // ratio — 4:3
 /**
  * A graphical representation of data where the individual
  * values contained in a matrix are represented as colors
  */
 let Heatmap = class Heatmap extends ResponsiveElement {
-    constructor() {
-        super();
-        /**
-         * Heatmap configuration options.
-         * @type {HeatmapConfig}
-         */
-        this.config = null;
-        /**
-         * Number of maximum label width that cell can paint in pixel.
-         * e.g. label-width: 30px; cell label hides when text length reaches 30px.
-         */
-        this.labelWidth = 0;
-        /**
-         * Hide all labels in the cells
-         */
-        this.labelHidden = false;
-        /**
-         * Hide all axes
-         */
-        this.axisHidden = false;
-        /**
-         * Minimum point of the cell coloring
-         */
-        this.minPoint = -1;
-        /**
-         * Middle point of the cell coloring
-         */
-        this.midPoint = 0;
-        /**
-         * Maximum point of the cell coloring
-         */
-        this.maxPoint = 1;
-        /**
-         * Enable cell color blending
-         */
-        this.blend = false;
-        /**
-         * Cell minimum color saturation, value can be from 0 - 1
-         */
-        this.saturation = 0.4;
-        /**
-         * Current active cell
-         */
-        this._hoverCell = null;
-        /**
-         * Internal cells data storage
-         */
-        this.cells = [];
-        /**
-         * Canvas's font color according to theme
-         */
-        this.foregroundColor = '';
-        /**
-         * Canvas's background color according to theme
-         */
-        this.backgroundColor = '';
-        /**
-         * Row cells track for easier calculations
-         */
-        this.rowTrack = new Track();
-        /**
-         * Column cells track for easier calculations
-         */
-        this.colTrack = new Track();
-        /**
-         * A flag to check if calculated responsive height it been set.
-         */
-        this.responsiveHeight = false;
-        /**
-         * A flag to check if the component has a size.
-         */
-        this.isSizeCalculated = false;
-        /**
-         * Use to prevent resizes observer in certain use cases
-         */
-        this.updateTimer = 0;
-        /**
-         * Use to throttle heatmap painting
-         */
-        this.renderTask = new MicroTaskRunner();
-        /**
-         * A flag to check if the cell has header enable.
-         */
-        this.hasCellHeader = false;
-        /**
-         * A flag to check if cell's content is within its boundary
-         */
-        this.contentWithinCellBoundary = true;
-        /**
-         * Margin around each cell
-         */
-        this.cellMargin = 1;
-        /**
-         * Above point color that is customisable using CSS variable
-         */
-        this.abovePointColor = '';
-        /**
-         * Middle point color that is customisable using CSS variable
-         */
-        this.midPointColor = '';
-        /**
-         * Below point color that is customisable using CSS variable
-         */
-        this.belowPointColor = '';
-        /** @ignore */
-        this.onResize = this.onResize.bind(this);
-        /** @ignore */
-        this.onMouseMove = this.onMouseMove.bind(this);
-        /** @ignore */
-        this.stopAnimation = this.stopAnimation.bind(this);
-        /** @ignore */
-        this.tooltipRenderer = this.tooltipRenderer.bind(this);
-        /** @ignore */
-        this.tooltipCondition = this.tooltipCondition.bind(this);
-        /** @ignore */
-        this.onMouseLeave = this.onMouseLeave.bind(this);
-    }
     /**
      * Element version number
      * @returns version number
@@ -198,7 +82,6 @@ let Heatmap = class Heatmap extends ResponsiveElement {
     get hoverCell() {
         return this._hoverCell;
     }
-    /* istanbul ignore next */
     set hoverCell(hoverCell) {
         const previousHoverCell = this._hoverCell;
         this._hoverCell = hoverCell;
@@ -212,7 +95,7 @@ let Heatmap = class Heatmap extends ResponsiveElement {
      * @param event an event that occur while the user interacting with element
      * @returns data of cell
      */
-    /* istanbul ignore next */
+    /* c8 ignore start */
     getCellDataAtEvent(event) {
         return this.hitTest(event);
     }
@@ -257,6 +140,124 @@ let Heatmap = class Heatmap extends ResponsiveElement {
         });
         return result;
     }
+    constructor() {
+        super();
+        /**
+         * Heatmap configuration options.
+         * @type {HeatmapConfig}
+         */
+        this.config = null;
+        /**
+         * Number of maximum label width that cell can paint in pixel.
+         * e.g. label-width: 30px; cell label hides when text length reaches 30px.
+         */
+        this.labelWidth = 0;
+        /**
+         * Hide all labels in the cells
+         */
+        this.labelHidden = false;
+        /**
+         * Hide all axes
+         */
+        this.axisHidden = false;
+        /* c8 ignore stop */
+        /**
+         * Minimum point of the cell coloring
+         */
+        this.minPoint = -1;
+        /**
+         * Middle point of the cell coloring
+         */
+        this.midPoint = 0;
+        /**
+         * Maximum point of the cell coloring
+         */
+        this.maxPoint = 1;
+        /**
+         * Enable cell color blending
+         */
+        this.blend = false;
+        /**
+         * Cell minimum color saturation, value can be from 0 - 1
+         */
+        this.saturation = 0.4;
+        /**
+         * Current active cell
+         */
+        this._hoverCell = null;
+        /**
+         * Internal cells data storage
+         */
+        this.cells = [];
+        /**
+         * Canvas's font color according to theme
+         */
+        this.foregroundColor = '';
+        /**
+         * Canvas's background color according to theme
+         */
+        this.backgroundColor = '';
+        /**
+         * Row cells track for easier calculations
+         */
+        this.rowTrack = new Track();
+        /**
+         * Column cells track for easier calculations
+         */
+        this.colTrack = new Track();
+        /**
+         * A flag to check if calculated responsive height it been set.
+         */
+        this.responsiveHeight = false;
+        /**
+         * A flag to check if the component has a size.
+         */
+        this.isSizeCalculated = false;
+        /**
+         * Use to prevent resizes observer in certain use cases
+         */
+        this.updateTimer = 0;
+        /**
+         * Use to throttle heatmap painting
+         */
+        this.renderTask = new MicroTaskRunner();
+        /**
+         * A flag to check if the cell has header enable.
+         */
+        this.hasCellHeader = false;
+        /**
+         * A flag to check if cell's content is within its boundary
+         */
+        this.contentWithinCellBoundary = true;
+        /**
+         * Margin around each cell
+         */
+        this.cellMargin = 1;
+        /**
+         * Above point color that is customisable using CSS variable
+         */
+        this.abovePointColor = '';
+        /**
+         * Middle point color that is customisable using CSS variable
+         */
+        this.midPointColor = '';
+        /**
+         * Below point color that is customisable using CSS variable
+         */
+        this.belowPointColor = '';
+        /** @ignore */
+        this.onResize = this.onResize.bind(this);
+        /** @ignore */
+        this.onMouseMove = this.onMouseMove.bind(this);
+        /** @ignore */
+        this.stopAnimation = this.stopAnimation.bind(this);
+        /** @ignore */
+        this.tooltipRenderer = this.tooltipRenderer.bind(this);
+        /** @ignore */
+        this.tooltipCondition = this.tooltipCondition.bind(this);
+        /** @ignore */
+        this.onMouseLeave = this.onMouseLeave.bind(this);
+    }
     /**
      * Called when the element’s DOM has been updated and rendered
      * @param changedProperties changed properties
@@ -290,7 +291,7 @@ let Heatmap = class Heatmap extends ResponsiveElement {
      * @param event mousemove event
      * @returns {void}
      */
-    /* istanbul ignore next */
+    /* c8 ignore start */
     onMouseMove(event) {
         if (event.composedPath().includes(this.canvas) || this.tooltipCallback && this.tooltipOverlay === event.target) {
             this.hoverCell = this.hitTest(event);
@@ -299,15 +300,17 @@ let Heatmap = class Heatmap extends ResponsiveElement {
             this.hoverCell = null;
         }
     }
+    /* c8 ignore stop */
     /**
      * Handles when mouse moving outside element
      * @param event mouseleave event
      * @returns {void}
      */
-    /* istanbul ignore next */
+    /* c8 ignore start */
     onMouseLeave() {
         this.hoverCell = null;
     }
+    /* c8 ignore stop */
     /**
      * Handles heatmap resizes
      * @returns {void}
@@ -359,7 +362,7 @@ let Heatmap = class Heatmap extends ResponsiveElement {
      * @param event mouse event
      * @returns cell
      */
-    /* istanbul ignore next */
+    /* c8 ignore start */
     hitTest(event) {
         const box = this.canvas.getBoundingClientRect();
         const x = event.clientX - box.left;
@@ -368,13 +371,14 @@ let Heatmap = class Heatmap extends ResponsiveElement {
         const column = this.colTrack.hitTest(x);
         return this.getCellByLocation(row, column);
     }
+    /* c8 ignore stop */
     /**
      * Get a cell, using row and column coordinates
      * @param row row index
      * @param column column index
      * @returns cell
      */
-    /* istanbul ignore next */
+    /* c8 ignore start */
     getCellByLocation(row, column) {
         if (row < 0 || row >= this.rowCount) {
             return null;
@@ -384,12 +388,13 @@ let Heatmap = class Heatmap extends ResponsiveElement {
         }
         return this.cells[row * this.columnCount + column] || null;
     }
+    /* c8 ignore stop */
     /**
      * Update overlay position
      * @param cell cell information for correct overlay
      * @returns {void}
      */
-    /* istanbul ignore next */
+    /* c8 ignore start */
     updateTooltipOverlayPosition(cell) {
         // Compensate x-axis height for overlay when x-axis is at top position
         let marginOverlayTop = 0;
@@ -402,13 +407,14 @@ let Heatmap = class Heatmap extends ResponsiveElement {
         this.tooltipOverlay.style.width = `${cell.width}px`;
         this.tooltipOverlay.style.height = `${cell.height}px`;
     }
+    /* c8 ignore stop */
     /**
      * Called upon active cell changes i.e cell hovering
      * @param cell current active cell
      * @param previousCell previous active cell
      * @returns {void}
      */
-    /* istanbul ignore next */
+    /* c8 ignore start */
     hoverCellChanged(cell, previousCell) {
         if (cell && cell.value !== null) {
             if (this.tooltipCallback) {
@@ -425,6 +431,7 @@ let Heatmap = class Heatmap extends ResponsiveElement {
             this.fade(previousCell, previousCell.backgroundColor, this.getBackgroundColor(previousCell.value), 300);
         }
     }
+    /* c8 ignore stop */
     /**
      * Called upon label-hidden attribute changes
      * @returns {void}
@@ -458,12 +465,13 @@ let Heatmap = class Heatmap extends ResponsiveElement {
      * @param {HeatmapCell} cell cell to stop the animation on
      * @returns {void}
      */
-    /* istanbul ignore next */
+    /* c8 ignore start */
     stopAnimation(cell) {
         if (cell.animationFrame) {
             cancelAnimationFrame(cell.animationFrame);
         }
     }
+    /* c8 ignore stop */
     /**
      * Stops all animations on a cell
      * @returns {void}
@@ -476,10 +484,11 @@ let Heatmap = class Heatmap extends ResponsiveElement {
      * @param cell cell object
      * @returns {void}
      */
-    /* istanbul ignore next */
+    /* c8 ignore start */
     resetCell(cell) {
         this.canvasContext?.clearRect(cell.x, cell.y, cell.width, cell.height);
     }
+    /* c8 ignore stop */
     /**
      * Fades a cell's background from one color to another
      * @param cell to fade
@@ -489,7 +498,7 @@ let Heatmap = class Heatmap extends ResponsiveElement {
      * @param delay fading animation delay
      * @returns {void}
      */
-    /* istanbul ignore next */
+    /* c8 ignore start */
     fade(cell, from, to, duration) {
         const start = performance.now();
         const end = start + duration;
@@ -516,6 +525,7 @@ let Heatmap = class Heatmap extends ResponsiveElement {
         }
         cell.animationFrame = requestAnimationFrame(fadingAnimation);
     }
+    /* c8 ignore stop */
     /**
      * Converts the input data into usable cell data
      * @returns {void}
@@ -641,13 +651,13 @@ let Heatmap = class Heatmap extends ResponsiveElement {
      * Check if the text (label / header and label) can be paint on the cell
      * @returns true if text is within cell's boundary
      */
-    /* istanbul ignore next */
+    /* c8 ignore start */
     canPaintText() {
         const canvas = this.canvasContext;
         if (!canvas) {
             return false;
         }
-        const fontRatio = this.responsiveHeight ? 0.3 : 0.4;
+        const fontRatio = this.responsiveHeight ? 0.4 : 0.5;
         const fontFamily = getComputedStyle(this).fontFamily;
         const contentWidth = this.colTrack.getContentSize(0);
         const contentHeight = this.rowTrack.getContentSize(0);
@@ -659,12 +669,12 @@ 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) < MAX_CELL_WIDTH_RATIO;
-        // If label width is still more than 85% of the cell width, try to reduce to smallest possible font-size to display label.
+        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) < MAX_CELL_WIDTH_RATIO;
+                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;
@@ -678,12 +688,13 @@ let Heatmap = class Heatmap extends ResponsiveElement {
         this.contentWithinCellBoundary = isWithinMinCellWidth && isWithinMinCellHeight;
         return this.contentWithinCellBoundary;
     }
+    /* c8 ignore stop */
     /**
      * Calculate cell background color based on the current cell data value
      * @param value cell value
      * @returns calculated color
      */
-    /* istanbul ignore next */
+    /* c8 ignore start */
     getBackgroundColor(value) {
         if (value === null) {
             return this.backgroundColor;
@@ -707,13 +718,14 @@ let Heatmap = class Heatmap extends ResponsiveElement {
             return interpolate(this.midPointColor, this.belowPointColor)(-factor);
         }
     }
+    /* c8 ignore stop */
     /**
      * Calculate the color mixing factor from 0 - 1
      * @param value cell value
      * @param saturation color saturation level
      * @returns factor
      */
-    /* istanbul ignore next */
+    /* c8 ignore start */
     calculateColorFactor(value, saturation) {
         if (value >= this.maxPoint) {
             return 1;
@@ -732,6 +744,7 @@ let Heatmap = class Heatmap extends ResponsiveElement {
             return ((value - this.midPoint) / (this.midPoint - this.minPoint) * saturateRatio) - saturation;
         }
     }
+    /* c8 ignore stop */
     /**
      * Get and stores canvas color from computed canvas style
      * @returns {void}
@@ -801,7 +814,7 @@ let Heatmap = class Heatmap extends ResponsiveElement {
      * @param cell object
      * @returns {void}
      */
-    /* istanbul ignore next */
+    /* c8 ignore start */
     paintCell(cell) {
         this.paintCellBackground(cell);
         if (!this.labelHidden && this.contentWithinCellBoundary) {
@@ -811,6 +824,7 @@ let Heatmap = class Heatmap extends ResponsiveElement {
             this.paintHeader(cell);
         }
     }
+    /* c8 ignore stop */
     /**
      * Paints all cells background colour
      * @returns {void}
@@ -986,22 +1000,24 @@ let Heatmap = class Heatmap extends ResponsiveElement {
      * Tooltip renderer function
      * @returns tooltip template to be render
      */
-    /* istanbul ignore next */
+    /* c8 ignore start */
     tooltipRenderer() {
         if (this.hoverCell && this.canvasContext && this.tooltipCallback) {
             return this.tooltipCallback(this.hoverCell);
         }
         return undefined;
     }
+    /* c8 ignore stop */
     /**
      * Checks if the tooltip should display or not
      * @param target element target
      * @returns if the canvas target within canvas
      */
-    /* istanbul ignore next */
+    /* c8 ignore start */
     tooltipCondition(target) {
         return target === this.tooltipOverlay;
     }
+    /* c8 ignore stop */
     /**
      * A `TemplateResult` that will be used
      * to render the updated internal template.
@@ -1041,7 +1057,7 @@ __decorate([
 ], Heatmap.prototype, "axisHidden", void 0);
 __decorate([
     property({ type: Object, attribute: false })
-    /* istanbul ignore next */
+    /* c8 ignore start */
 ], Heatmap.prototype, "hoverCell", null);
 __decorate([
     property({ type: Number, attribute: 'min-point' })

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.                     |

package/lib/icon/index.d.ts

@@ -17,7 +17,7 @@ export declare class Icon extends BasicElement {
     private _icon;
     /**
      * Name of a known icon to render or URL of SVG icon.
-     * @example heart | https://cdn.io/icons/heart.svg
+     * @example home | https://cdn.io/icons/home.svg
      * @default null
      */
     get icon(): string | null;
@@ -25,11 +25,16 @@ export declare class Icon extends BasicElement {
     private _src;
     /**
      * Src location of an svg icon.
-     * @example https://cdn.io/icons/heart.svg
+     * @ignore
+     * @example https://cdn.io/icons/home.svg
      * @deprecated Use `icon` instead
      * @default null
      */
     get src(): string | null;
+    /**
+      * @ignore
+      * @param value Location of an svg
+      */
     set src(value: string | null);
     private _template;
     /**
@@ -37,12 +42,25 @@ export declare class Icon extends BasicElement {
      */
     private get template();
     private set template(value);
+    /**
+     * A deferred promise representing icon ready.
+     * It would be resolved when the icon svg has been fetched and parsed, or
+     * when the icon svg is unavailable/invalid.
+     */
+    private iconReady;
+    constructor();
     /**
      * Called after the component is first rendered
      * @param changedProperties Properties which have changed
      * @returns {void}
      */
     protected firstUpdated(changedProperties: PropertyValues): void;
+    protected getUpdateComplete(): Promise<boolean>;
+    /**
+     * instantiate a new deferred promise for icon ready if it's not pending already
+     * @returns {void}
+     */
+    private deferIconReady;
     /**
      * Helper method, used to set the icon src.
      * @returns {void}