@refinitiv-ui/elements 5.3.4 → 5.8.0

package/lib/flag/index.js

@@ -1,13 +1,11 @@
-var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
-    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
-    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
-    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
-    return c > 3 && r && Object.defineProperty(target, key, r), r;
-};
-import { BasicElement, svg, css, customElement, property, unsafeHTML } from '@refinitiv-ui/core';
-import { VERSION } from '../';
-import { FlagLoader } from './utils/FlagLoader';
-export { preload } from './utils/FlagLoader';
+import { __decorate } from "tslib";
+import { BasicElement, svg, css } from '@refinitiv-ui/core';
+import { customElement } from '@refinitiv-ui/core/lib/decorators/custom-element.js';
+import { property } from '@refinitiv-ui/core/lib/decorators/property.js';
+import { unsafeHTML } from '@refinitiv-ui/core/lib/directives/unsafe-html.js';
+import { VERSION } from '../version.js';
+import { FlagLoader } from './utils/FlagLoader.js';
+export { preload } from './utils/FlagLoader.js';
 const EmptyTemplate = svg ``;
 /**
  * Provides a collection of flags.
@@ -31,7 +29,7 @@ let Flag = class Flag extends BasicElement {
         return VERSION;
     }
     /**
-     * A `CSSResult` that will be used
+     * A `CSSResultGroup` that will be used
      * to style the host, slotted children
      * and the internal template of the element.
      * @returns CSS template
@@ -55,6 +53,7 @@ let Flag = class Flag extends BasicElement {
     /**
      * Name of a known flag to render.
      * @example gb
+     * @default null
      */
     get flag() {
         return this._flag;
@@ -68,6 +67,7 @@ let Flag = class Flag extends BasicElement {
     /**
      * Src location of an svg flag.
      * @example https://cdn.io/flags/gb.svg
+     * @default null
      */
     get src() {
         return this._src;
@@ -90,7 +90,7 @@ let Flag = class Flag extends BasicElement {
     set template(value) {
         if (this._template !== value) {
             this._template = value;
-            void this.requestUpdate();
+            this.requestUpdate();
         }
     }
     /**

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

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

package/lib/flag/utils/FlagLoader.js

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

package/lib/header/custom-elements.md

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

package/lib/header/index.d.ts

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

package/lib/header/index.js

@@ -1,11 +1,8 @@
-var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
-    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
-    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
-    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
-    return c > 3 && r && Object.defineProperty(target, key, r), r;
-};
-import { BasicElement, html, css, customElement, property } from '@refinitiv-ui/core';
-import { VERSION } from '../';
+import { __decorate } from "tslib";
+import { BasicElement, html, css } from '@refinitiv-ui/core';
+import { customElement } from '@refinitiv-ui/core/lib/decorators/custom-element.js';
+import { property } from '@refinitiv-ui/core/lib/decorators/property.js';
+import { VERSION } from '../version.js';
 /**
  * Use to identify and separate different sections of a page.
  * Headers helps to organize the page layout content into

package/lib/heatmap/custom-elements.md

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

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

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

package/lib/heatmap/helpers/color.js

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

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

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

package/lib/heatmap/index.d.ts

@@ -1,9 +1,9 @@
 import { JSXInterface } from '../jsx';
-import { ResponsiveElement, TemplateResult, CSSResult, PropertyValues } from '@refinitiv-ui/core';
-import '../canvas';
-import '../tooltip';
-import { HeatmapCell, HeatmapConfig, HeatmapTooltipCallback, HeatmapRenderCallback } from './helpers/types';
-export { HeatmapCell, HeatmapXAxis, HeatmapYAxis, HeatmapConfig, HeatmapTooltipCallback, HeatmapRenderCallback, HeatmapCustomisableProperties } from './helpers/types';
+import { ResponsiveElement, TemplateResult, CSSResultGroup, PropertyValues } from '@refinitiv-ui/core';
+import '../canvas/index.js';
+import '../tooltip/index.js';
+import type { HeatmapCell, HeatmapConfig, HeatmapTooltipCallback, HeatmapRenderCallback } from './helpers/types';
+export type { HeatmapCell, HeatmapXAxis, HeatmapYAxis, HeatmapConfig, HeatmapTooltipCallback, HeatmapRenderCallback, HeatmapCustomisableProperties } from './helpers/types';
 /**
  * A graphical representation of data where the individual
  * values contained in a matrix are represented as colors
@@ -15,12 +15,12 @@ export declare class Heatmap extends ResponsiveElement {
      */
     static get version(): string;
     /**
-     * A `CSSResult` that will be used
+     * A `CSSResultGroup` that will be used
      * to style the host, slotted children
      * and the internal template of the element.
      * @returns CSS template
      */
-    static get styles(): CSSResult | CSSResult[];
+    static get styles(): CSSResultGroup;
     /**
      * Heatmap configuration options.
      * @type {HeatmapConfig}

package/lib/heatmap/index.js

@@ -1,17 +1,16 @@
-var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
-    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
-    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
-    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
-    return c > 3 && r && Object.defineProperty(target, key, r), r;
-};
-import { ResponsiveElement, html, css, query, customElement, property } from '@refinitiv-ui/core';
-import { color, MicroTaskRunner } from '@refinitiv-ui/utils';
-import '../canvas';
-import '../tooltip';
-import { Track } from './helpers/track';
-import { blend, brighten, darken, isLight, interpolate } from './helpers/color';
-import { getResponsiveFontSize, getMaximumTextWidth, getMaximumLabelTextWidth, MIN_FONT_SIZE } from './helpers/text';
-import { VERSION } from '../';
+import { __decorate } from "tslib";
+import { ResponsiveElement, html, css } from '@refinitiv-ui/core';
+import { customElement } from '@refinitiv-ui/core/lib/decorators/custom-element.js';
+import { property } from '@refinitiv-ui/core/lib/decorators/property.js';
+import { query } from '@refinitiv-ui/core/lib/decorators/query.js';
+import { VERSION } from '../version.js';
+import { MicroTaskRunner } from '@refinitiv-ui/utils/lib/async.js';
+import { color } from '@refinitiv-ui/utils/lib/color.js';
+import '../canvas/index.js';
+import '../tooltip/index.js';
+import { Track } from './helpers/track.js';
+import { blend, brighten, darken, isLight, interpolate } from './helpers/color.js';
+import { getResponsiveFontSize, getMaximumTextWidth, getMaximumLabelTextWidth, MIN_FONT_SIZE } from './helpers/text.js';
 const MAX_CELL_WIDTH_RATIO = 0.85;
 const DEFAULT_CANVAS_RATIO = 0.75; // ratio — 4:3
 /**
@@ -144,7 +143,7 @@ let Heatmap = class Heatmap extends ResponsiveElement {
         return VERSION;
     }
     /**
-     * A `CSSResult` that will be used
+     * A `CSSResultGroup` that will be used
      * to style the host, slotted children
      * and the internal template of the element.
      * @returns CSS template
@@ -204,7 +203,7 @@ let Heatmap = class Heatmap extends ResponsiveElement {
         const previousHoverCell = this._hoverCell;
         this._hoverCell = hoverCell;
         if (this._hoverCell !== previousHoverCell) {
-            void this.requestUpdate('hoverCell', previousHoverCell);
+            this.requestUpdate('hoverCell', previousHoverCell);
             this.hoverCellChanged(this._hoverCell, previousHoverCell);
         }
     }

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,6 +1,6 @@
 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 {
     /**
      * Element version number
@@ -8,16 +8,17 @@ export declare class Icon extends BasicElement {
      */
     static get version(): string;
     /**
-     * A `CSSResult` that will be used
+     * A `CSSResultGroup` that will be used
      * to style the host, slotted children
      * and the internal template of the element.
      * @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);
@@ -25,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);

package/lib/icon/index.js

@@ -1,14 +1,18 @@
-var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
-    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
-    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
-    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
-    return c > 3 && r && Object.defineProperty(target, key, r), r;
-};
-import { BasicElement, svg, css, customElement, property, unsafeHTML } from '@refinitiv-ui/core';
-import { VERSION } from '../';
-import { IconLoader } from './utils/IconLoader';
-export { preload } from './utils/IconLoader';
+import { __decorate } from "tslib";
+import { BasicElement, svg, css } from '@refinitiv-ui/core';
+import { customElement } from '@refinitiv-ui/core/lib/decorators/custom-element.js';
+import { property } from '@refinitiv-ui/core/lib/decorators/property.js';
+import { unsafeSVG } from '@refinitiv-ui/core/lib/directives/unsafe-svg.js';
+import { VERSION } from '../version.js';
+import { IconLoader } from './utils/IconLoader.js';
+export { preload } from './utils/IconLoader.js';
 const EmptyTemplate = svg ``;
+/**
+ * Cache for reusing SVG template results across multiple icons.
+ * Reusing these templates increases performance dramatically when many icons are rendered.
+ * As the cache key is an absolute URL, we can assume no clashes will occur.
+ */
+const iconTemplateCache = new Map();
 let Icon = class Icon extends BasicElement {
     constructor() {
         super(...arguments);
@@ -24,7 +28,7 @@ let Icon = class Icon extends BasicElement {
         return VERSION;
     }
     /**
-     * A `CSSResult` that will be used
+     * A `CSSResultGroup` that will be used
      * to style the host, slotted children
      * and the internal template of the element.
      * @return CSS template
@@ -44,8 +48,9 @@ let Icon = class Icon extends BasicElement {
     `;
     }
     /**
-     * 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() {
         return this._icon;
@@ -55,12 +60,14 @@ let Icon = class Icon extends BasicElement {
         if (oldValue !== value) {
             this._icon = value;
             void this.setIconSrc();
-            void this.requestUpdate('icon', oldValue);
+            this.requestUpdate('icon', oldValue);
         }
     }
     /**
      * Src location of an svg icon.
      * @example https://cdn.io/icons/heart.svg
+     * @deprecated Use `icon` instead
+     * @default null
      */
     get src() {
         return this._src;
@@ -83,7 +90,7 @@ let Icon = class Icon extends BasicElement {
     set template(value) {
         if (this._template !== value) {
             this._template = value;
-            void this.requestUpdate();
+            this.requestUpdate();
         }
     }
     /**
@@ -113,10 +120,13 @@ let Icon = class Icon extends BasicElement {
      * @returns {void}
      */
     async loadAndRenderIcon(src) {
-        const svgBody = await IconLoader.loadSVG(src);
-        if (svgBody) {
-            this.template = svg `${unsafeHTML(svgBody)}`;
+        const iconTemplateCacheItem = iconTemplateCache.get(src);
+        if (!iconTemplateCacheItem) {
+            iconTemplateCache.set(src, IconLoader.loadSVG(src)
+                .then(body => svg `${unsafeSVG(body)}`));
+            return this.loadAndRenderIcon(src); // Load again and await cache result
         }
+        this.template = await iconTemplateCacheItem;
     }
     /**
      * Get and cache CDN prefix

package/lib/icon/utils/IconLoader.d.ts

@@ -1,4 +1,4 @@
-import { CdnLoader } from '@refinitiv-ui/utils';
+import { CdnLoader } from '@refinitiv-ui/utils/lib/loader.js';
 /**
  * Caches and provides icon SVGs, Loaded either by name from CDN or directly by URL.
  * Uses singleton pattern
@@ -33,6 +33,11 @@ declare class IconLoader extends CdnLoader {
      * @returns Promise, which will be resolved with complete source.
      */
     getSrc(iconName: string): Promise<string>;
+    /**
+     * Loads icon and returns the body of the SVG
+     * @param icon Icon name to load
+     * @returns SVG body of the response
+     */
     loadSVG(icon: string): Promise<string | undefined>;
 }
 declare const iconLoaderInstance: IconLoader;

package/lib/icon/utils/IconLoader.js

@@ -1,5 +1,5 @@
-import { CdnLoader, Deferred } from '@refinitiv-ui/utils';
-const isUrl = (str) => (/^https?:\/\//i).test(str);
+import { CdnLoader, Deferred } from '@refinitiv-ui/utils/lib/loader.js';
+const isUrl = (str) => (/^(https?:\/{2}|\.?\/)/i).test(str);
 /**
  * Caches and provides icon SVGs, Loaded either by name from CDN or directly by URL.
  * Uses singleton pattern
@@ -50,26 +50,33 @@ class IconLoader extends CdnLoader {
      * @returns Promise, which will be resolved with complete source.
      */
     async getSrc(iconName) {
+        if (isUrl(iconName)) {
+            return iconName;
+        }
         return iconName ? `${await this.getCdnPrefix()}${iconName}.svg` : '';
     }
+    /**
+     * Loads icon and returns the body of the SVG
+     * @param icon Icon name to load
+     * @returns SVG body of the response
+     */
     async loadSVG(icon) {
-        if (icon) {
-            if (!isUrl(icon)) {
-                icon = await this.getSrc(icon);
-            }
-            const response = await this.load(icon);
-            if (response && response.status === 200 && response.getResponseHeader('content-type') === 'image/svg+xml') {
-                const container = document.createElement('svg');
-                container.innerHTML = response.responseText;
-                this.stripUnsafeNodes(...container.children);
-                const svgRoot = container.firstElementChild;
-                if (svgRoot) {
-                    svgRoot.setAttribute('focusable', 'false'); /* disable IE11 focus on SVG root element */
-                }
-                return Promise.resolve(container.innerHTML);
+        if (!icon) {
+            return;
+        }
+        icon = await this.getSrc(icon);
+        const response = await this.load(icon);
+        if (response && response.status === 200 && response.getResponseHeader('content-type') === 'image/svg+xml') {
+            const container = document.createElement('svg');
+            container.innerHTML = response.responseText;
+            this.stripUnsafeNodes(...container.children);
+            const svgRoot = container.firstElementChild;
+            if (svgRoot) {
+                svgRoot.setAttribute('focusable', 'false'); /* disable IE11 focus on SVG root element */
             }
-            return Promise.resolve('');
+            return container.innerHTML;
         }
+        return '';
     }
 }
 const iconLoaderInstance = new IconLoader();

package/lib/index.d.ts

@@ -1,2 +1,3 @@
-export declare const VERSION = "PUBLISH_VERSION";
+export { VERSION } from './version.js';
+export * from './events';
 export * from '@refinitiv-ui/core';

package/lib/index.js

@@ -1,2 +1,3 @@
-export const VERSION = '5.3.4';
+export { VERSION } from './version.js';
+export * from './events';
 export * from '@refinitiv-ui/core';

package/lib/interactive-chart/custom-elements.json

@@ -24,8 +24,9 @@
         },
         {
           "name": "legend-style",
-          "description": "Set legend style i.e. `horizontal`, `vertical`.\nDefault is `vertical`.",
-          "type": "\"vertical\" | \"horizontal\""
+          "description": "Set legend style i.e. `horizontal`, `vertical`.",
+          "type": "\"vertical\" | \"horizontal\"",
+          "default": "\"vertical\""
         }
       ],
       "properties": [
@@ -52,14 +53,9 @@
         {
           "name": "legendStyle",
           "attribute": "legend-style",
-          "description": "Set legend style i.e. `horizontal`, `vertical`.\nDefault is `vertical`.",
-          "type": "\"vertical\" | \"horizontal\""
-        },
-        {
-          "name": "seriesList",
-          "description": "Array of series instances in chart",
-          "type": "object",
-          "default": "[]"
+          "description": "Set legend style i.e. `horizontal`, `vertical`.",
+          "type": "\"vertical\" | \"horizontal\"",
+          "default": "\"vertical\""
         }
       ],
       "events": [

package/lib/interactive-chart/custom-elements.md

@@ -0,0 +1,31 @@
+# ef-interactive-chart
+
+A charting component that allows you to create several use cases of financial chart.
+By lightweight-charts library.
+
+## Properties
+
+| Property             | Attribute              | Type                         | Default    | Description                                     |
+|----------------------|------------------------|------------------------------|------------|-------------------------------------------------|
+| `config`             | `config`               | `InteractiveChartConfig`     | null       | Chart configurations for init chart             |
+| `disabledJumpButton` | `disabled-jump-button` | `boolean`                    | false      | Hide jump to latest data button                 |
+| `disabledLegend`     | `disabled-legend`      | `boolean`                    | false      | Hide legend                                     |
+| `legendStyle`        | `legend-style`         | `"vertical" \| "horizontal"` | "vertical" | Set legend style i.e. `horizontal`, `vertical`. |
+
+## Methods
+
+| Method   | Type         | Description                                    |
+|----------|--------------|------------------------------------------------|
+| `colors` | `(): object` | List of available chart colors from the theme. |
+
+## Events
+
+| Event         | Description                          |
+|---------------|--------------------------------------|
+| `initialized` | Dispatched when chart is initialized |
+
+## Slots
+
+| Name     | Description                                 |
+|----------|---------------------------------------------|
+| `legend` | Slot to use for implementing custom legend. |

package/lib/interactive-chart/helpers/types.d.ts

@@ -1,5 +1,5 @@
-import { LineData, BarData, HistogramData, DeepPartial, ChartOptions, SeriesPartialOptions, LineSeriesPartialOptions, AreaSeriesPartialOptions, BarSeriesPartialOptions, CandlestickSeriesPartialOptions, HistogramSeriesPartialOptions, LineStyleOptions, AreaStyleOptions, BarStyleOptions, CandlestickStyleOptions, HistogramStyleOptions, ISeriesApi, SeriesType } from 'lightweight-charts';
-import type { RGBColor, HSLColor } from '@refinitiv-ui/utils';
+import type { LineData, BarData, HistogramData, DeepPartial, ChartOptions, SeriesPartialOptions, LineSeriesPartialOptions, AreaSeriesPartialOptions, BarSeriesPartialOptions, CandlestickSeriesPartialOptions, HistogramSeriesPartialOptions, LineStyleOptions, AreaStyleOptions, BarStyleOptions, CandlestickStyleOptions, HistogramStyleOptions, ISeriesApi, SeriesType } from 'lightweight-charts';
+import type { RGBColor, HSLColor } from '@refinitiv-ui/utils/lib/color.js';
 declare type SeriesOptions = AreaSeriesPartialOptions | BarSeriesPartialOptions | CandlestickSeriesPartialOptions | HistogramSeriesPartialOptions | LineSeriesPartialOptions;
 declare type SeriesStyleOptions = LineStyleOptions & AreaStyleOptions & BarStyleOptions & CandlestickStyleOptions & HistogramStyleOptions;
 declare type SeriesData = LineData[] | BarData[] | HistogramData[];