@refinitiv-ui/elements 5.0.0-beta.3 → 5.0.0-dev.204

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
@@ -9,11 +9,16 @@ import { BasicElement, TemplateResult, CSSResult } from '@refinitiv-ui/core';
  * @slot right - Slot to add custom contents to the right side of header e.g. ef-icon, ef-checkbox
  */
 export declare class Header extends BasicElement {
+    /**
+     * Element version number
+     * @returns version number
+     */
+    static get version(): string;
     /**
      * Style definition
      * @return CSS template
      */
-    static get styles(): CSSResult | CSSResult[];
+    static get styles(): CSSResultGroup;
     /**
      * Use level styling from theme
      */
@@ -36,4 +41,6 @@ declare global {
       'ef-header': Partial<Header> | JSXInterface.HTMLAttributes<Header>;
     }
   }
-}
+}
+
+export {};

package/lib/header/index.js

@@ -1,10 +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 { __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
@@ -21,6 +19,13 @@ let Header = class Header extends BasicElement {
          */
         this.level = '2';
     }
+    /**
+     * Element version number
+     * @returns version number
+     */
+    static get version() {
+        return VERSION;
+    }
     /**
      * Style definition
      * @return CSS template
@@ -66,4 +71,3 @@ Header = __decorate([
     })
 ], Header);
 export { Header };
-//# sourceMappingURL=index.js.map

package/lib/heatmap/custom-elements.json

@@ -132,6 +132,19 @@
           "description": "Render callback function use for custom cell properties.\nAccepts custom label, foreground and background color",
           "type": "HeatmapRenderCallback"
         }
+      ],
+      "methods": [
+        {
+          "name": "getCellDataAtEvent",
+          "description": "Returns data of interactive cell",
+          "params": [
+            {
+              "name": "event",
+              "description": "an event that occur while the user interacting with element",
+              "type": "MouseEvent"
+            }
+          ]
+        }
       ]
     }
   ]

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
@@ -66,4 +66,3 @@ const blend = (color1, color2, backgroundColor, amount) => {
     return ((_a = color(`rgb(${red}, ${green}, ${blue})`)) === null || _a === void 0 ? void 0 : _a.toString()) || '';
 };
 export { blend, brighten, darken, isLight, interpolate };
-//# sourceMappingURL=color.js.map

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/helpers/text.js

@@ -89,4 +89,3 @@ const getMaximumLabelTextWidth = (labels) => {
     return maxLengthText;
 };
 export { getResponsiveFontSize, getMaximumTextWidth, getMaximumLabelTextWidth, MIN_FONT_SIZE, MAX_FONT_SIZE };
-//# sourceMappingURL=text.js.map

package/lib/heatmap/helpers/track.js

@@ -62,8 +62,8 @@ export class Track {
      */
     init(trackSize, laneCount) {
         this._trackSize = trackSize;
-        this._laneSizes = new Array(laneCount);
-        this._laneStarts = new Array(laneCount); // For easy hit testing
+        this._laneSizes = [laneCount];
+        this._laneStarts = [laneCount]; // For easy hit testing
         this._laneStarts[0] = 0;
         if (trackSize && laneCount) {
             let start = 0;
@@ -158,4 +158,3 @@ export class Track {
         return index;
     }
 }
-//# sourceMappingURL=track.js.map

package/lib/heatmap/helpers/types.js

@@ -1,2 +1 @@
 export {};
-//# sourceMappingURL=types.js.map

package/lib/heatmap/index.d.ts

@@ -1,21 +1,26 @@
 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
  */
 export declare class Heatmap extends ResponsiveElement {
     /**
-     * A `CSSResult` that will be used
+     * Element version number
+     * @returns version number
+     */
+    static get version(): string;
+    /**
+     * A `CSSResultGroup` that will be used
      * to style the host, slotted children
      * and the internal template of the element.
      * @returns CSS template
      */
-    static get styles(): CSSResult | CSSResult[];
+    static get styles(): CSSResultGroup;
     /**
      * Heatmap configuration options.
      * @type {HeatmapConfig}
@@ -38,8 +43,8 @@ export declare class Heatmap extends ResponsiveElement {
      * Current active cell for internal use
      * @private
      */
-    get activeCell(): HeatmapCell | null;
-    set activeCell(activeCell: HeatmapCell | null);
+    get hoverCell(): HeatmapCell | null;
+    set hoverCell(hoverCell: HeatmapCell | null);
     /**
      * Minimum point of the cell coloring
      */
@@ -60,6 +65,12 @@ export declare class Heatmap extends ResponsiveElement {
      * Cell minimum color saturation, value can be from 0 - 1
      */
     saturation: number;
+    /**
+     * Returns data of interactive cell
+     * @param event an event that occur while the user interacting with element
+     * @returns data of cell
+     */
+    getCellDataAtEvent(event: MouseEvent): HeatmapCell | null;
     /**
      * A callback function that allows tooltip rendering on cell hover
      * @type {HeatmapTooltipCallback}
@@ -107,7 +118,7 @@ export declare class Heatmap extends ResponsiveElement {
     /**
      * Current active cell
      */
-    private _activeCell;
+    private _hoverCell;
     /**
      * Internal cells data storage
      */
@@ -211,6 +222,12 @@ export declare class Heatmap extends ResponsiveElement {
      * @returns {void}
      */
     private onMouseMove;
+    /**
+     * Handles when mouse moving outside element
+     * @param event mouseleave event
+     * @returns {void}
+     */
+    private onMouseLeave;
     /**
      * Handles heatmap resizes
      * @returns {void}
@@ -229,7 +246,7 @@ export declare class Heatmap extends ResponsiveElement {
     /**
      * Hit testing on heatmap
      * @param event mouse event
-     * @returns {void}
+     * @returns cell
      */
     private hitTest;
     /**
@@ -251,7 +268,7 @@ export declare class Heatmap extends ResponsiveElement {
      * @param previousCell previous active cell
      * @returns {void}
      */
-    private activeCellChanged;
+    private hoverCellChanged;
     /**
      * Called upon label-hidden attribute changes
      * @returns {void}
@@ -431,4 +448,6 @@ declare global {
       'ef-heatmap': Partial<Heatmap> | JSXInterface.HTMLAttributes<Heatmap>;
     }
   }
-}
+}
+
+export {};

package/lib/heatmap/index.js

@@ -1,16 +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 { __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
 /**
@@ -61,7 +61,7 @@ let Heatmap = class Heatmap extends ResponsiveElement {
         /**
          * Current active cell
          */
-        this._activeCell = null;
+        this._hoverCell = null;
         /**
          * Internal cells data storage
          */
@@ -132,9 +132,18 @@ let Heatmap = class Heatmap extends ResponsiveElement {
         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
+     */
+    static get version() {
+        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
@@ -186,18 +195,27 @@ let Heatmap = class Heatmap extends ResponsiveElement {
      * Current active cell for internal use
      * @private
      */
-    get activeCell() {
-        return this._activeCell;
+    get hoverCell() {
+        return this._hoverCell;
     }
     /* istanbul ignore next */
-    set activeCell(activeCell) {
-        const previousActiveCell = this._activeCell;
-        this._activeCell = activeCell;
-        if (this._activeCell !== previousActiveCell) {
-            void this.requestUpdate('activeCell', previousActiveCell);
-            this.activeCellChanged(this._activeCell, previousActiveCell);
+    set hoverCell(hoverCell) {
+        const previousHoverCell = this._hoverCell;
+        this._hoverCell = hoverCell;
+        if (this._hoverCell !== previousHoverCell) {
+            this.requestUpdate('hoverCell', previousHoverCell);
+            this.hoverCellChanged(this._hoverCell, previousHoverCell);
         }
     }
+    /**
+     * Returns data of interactive cell
+     * @param event an event that occur while the user interacting with element
+     * @returns data of cell
+     */
+    /* istanbul ignore next */
+    getCellDataAtEvent(event) {
+        return this.hitTest(event);
+    }
     /**
      * Gets the computed style of the canvas element
      * @returns computed canvas style
@@ -276,13 +294,22 @@ let Heatmap = class Heatmap extends ResponsiveElement {
      */
     /* istanbul ignore next */
     onMouseMove(event) {
-        if (event.composedPath().includes(this.canvas)) {
-            this.hitTest(event);
+        if (event.composedPath().includes(this.canvas) || this.tooltipCallback && this.tooltipOverlay === event.target) {
+            this.hoverCell = this.hitTest(event);
         }
         else {
-            this.activeCell = null;
+            this.hoverCell = null;
         }
     }
+    /**
+     * Handles when mouse moving outside element
+     * @param event mouseleave event
+     * @returns {void}
+     */
+    /* istanbul ignore next */
+    onMouseLeave() {
+        this.hoverCell = null;
+    }
     /**
      * Handles heatmap resizes
      * @returns {void}
@@ -332,7 +359,7 @@ let Heatmap = class Heatmap extends ResponsiveElement {
     /**
      * Hit testing on heatmap
      * @param event mouse event
-     * @returns {void}
+     * @returns cell
      */
     /* istanbul ignore next */
     hitTest(event) {
@@ -341,7 +368,7 @@ let Heatmap = class Heatmap extends ResponsiveElement {
         const y = event.clientY - box.top;
         const row = this.rowTrack.hitTest(y);
         const column = this.colTrack.hitTest(x);
-        this.activeCell = this.getCellByLocation(row, column);
+        return this.getCellByLocation(row, column);
     }
     /**
      * Get a cell, using row and column coordinates
@@ -385,7 +412,7 @@ let Heatmap = class Heatmap extends ResponsiveElement {
      * @returns {void}
      */
     /* istanbul ignore next */
-    activeCellChanged(cell, previousCell) {
+    hoverCellChanged(cell, previousCell) {
         if (cell && cell.value !== null) {
             if (this.tooltipCallback) {
                 this.updateTooltipOverlayPosition(cell);
@@ -968,8 +995,8 @@ let Heatmap = class Heatmap extends ResponsiveElement {
      */
     /* istanbul ignore next */
     tooltipRenderer() {
-        if (this.activeCell && this.canvasContext && this.tooltipCallback) {
-            return this.tooltipCallback(this.activeCell);
+        if (this.hoverCell && this.canvasContext && this.tooltipCallback) {
+            return this.tooltipCallback(this.hoverCell);
         }
         return undefined;
     }
@@ -990,7 +1017,7 @@ let Heatmap = class Heatmap extends ResponsiveElement {
     render() {
         var _a, _b;
         return html `
-      <div id="container">
+      <div id="container" @mousemove=${this.onMouseMove} @mouseleave=${this.onMouseLeave}>
         ${((_a = this.config) === null || _a === void 0 ? void 0 : _a.yAxis) && !this.axisHidden ? html `
         <div id="y-axis-container">
           <div part="cross-box"></div>
@@ -998,7 +1025,7 @@ let Heatmap = class Heatmap extends ResponsiveElement {
         </div>` : null}
         <div id="canvas-container">
           ${((_b = this.config) === null || _b === void 0 ? void 0 : _b.xAxis) && !this.axisHidden ? html `<div part="x-axis"></div>` : null}
-          <ef-canvas part="canvas" @resize=${this.onCanvasResize} @mousemove=${this.onMouseMove}></ef-canvas>
+          <ef-canvas part="canvas" @resize=${this.onCanvasResize}></ef-canvas>
           ${this.tooltipCallback ? html `<div id="tooltip-overlay"></div>` : null}
         </div>
       </div>
@@ -1022,7 +1049,7 @@ __decorate([
 ], Heatmap.prototype, "axisHidden", void 0);
 __decorate([
     property({ type: Object, attribute: false })
-], Heatmap.prototype, "activeCell", null);
+], Heatmap.prototype, "hoverCell", null);
 __decorate([
     property({ type: Number, attribute: 'min-point' })
 ], Heatmap.prototype, "minPoint", void 0);
@@ -1074,4 +1101,3 @@ Heatmap = __decorate([
     })
 ], Heatmap);
 export { Heatmap };
-//# sourceMappingURL=index.js.map

package/lib/icon/custom-elements.json

@@ -6,27 +6,29 @@
       "attributes": [
         {
           "name": "icon",
-          "description": "Name of a known icon to render.",
+          "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"
+          "type": "string | null",
+          "deprecatedMessage": "Use `icon` instead"
         }
       ],
       "properties": [
         {
           "name": "icon",
           "attribute": "icon",
-          "description": "Name of a known icon to render.",
+          "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"
+          "type": "string | null",
+          "deprecatedMessage": "Use `icon` instead"
         }
       ]
     }

package/lib/icon/custom-elements.md

@@ -0,0 +1,8 @@
+# ef-icon
+
+## Properties
+
+| 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

@@ -1,18 +1,24 @@
 import { JSXInterface } from '../jsx';
-import { BasicElement, CSSResult, TemplateResult, PropertyValues } from '@refinitiv-ui/core';
-export { preload } from './utils/IconLoader';
+import { BasicElement, CSSResultGroup, TemplateResult, PropertyValues } from '@refinitiv-ui/core';
+export { preload } from './utils/IconLoader.js';
 export declare class Icon extends BasicElement {
     /**
-     * A `CSSResult` that will be used
+     * Element version number
+     * @returns version number
+     */
+    static get version(): string;
+    /**
+     * A `CSSResultGroup` that will be used
      * to style the host, slotted children
      * and the internal template of the element.
      * @return CSS template
      */
-    static get styles(): CSSResult;
+    static get styles(): CSSResultGroup;
     private _icon;
     /**
-     * Name of a known icon to render.
-     * @example heart
+     * Name of a known icon to render or URL of SVG icon.
+     * @example heart | https://cdn.io/icons/heart.svg
+     * @default null
      */
     get icon(): string | null;
     set icon(value: string | null);
@@ -20,6 +26,8 @@ export declare class Icon extends BasicElement {
     /**
      * Src location of an svg icon.
      * @example https://cdn.io/icons/heart.svg
+     * @deprecated Use `icon` instead
+     * @default null
      */
     get src(): string | null;
     set src(value: string | null);
@@ -77,4 +85,6 @@ declare global {
       'ef-icon': Partial<Icon> | JSXInterface.HTMLAttributes<Icon>;
     }
   }
-}
+}
+
+export {};