@refinitiv-ui/elements 5.3.3 → 5.7.0

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

@@ -0,0 +1,4 @@
+import '@refinitiv-ui/elements/lib/canvas/themes/halo/dark';
+import '@refinitiv-ui/elements/lib/tooltip/themes/halo/dark';
+
+elf.customStyles.define('ef-heatmap', ':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:#262626}:host [part=canvas]{color:#000}');

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

@@ -0,0 +1,4 @@
+import '@refinitiv-ui/elements/lib/canvas/themes/halo/light';
+import '@refinitiv-ui/elements/lib/tooltip/themes/halo/light';
+
+elf.customStyles.define('ef-heatmap', ':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:#404040;background-color:#f2f2f2}:host [part=canvas]{color:#fff}');

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

@@ -0,0 +1,4 @@
+import '@refinitiv-ui/elements/lib/canvas/themes/solar/charcoal';
+import '@refinitiv-ui/elements/lib/tooltip/themes/solar/charcoal';
+
+elf.customStyles.define('ef-heatmap', ':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

@@ -0,0 +1,4 @@
+import '@refinitiv-ui/elements/lib/canvas/themes/solar/pearl';
+import '@refinitiv-ui/elements/lib/tooltip/themes/solar/pearl';
+
+elf.customStyles.define('ef-heatmap', ':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

@@ -0,0 +1,36 @@
+{
+  "version": "experimental",
+  "tags": [
+    {
+      "name": "ef-icon",
+      "attributes": [
+        {
+          "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": [
+        {
+          "name": "icon",
+          "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

@@ -0,0 +1,8 @@
+# ef-icon
+
+## Properties
+
+| Property | Attribute | Type             | Description                                      |
+|----------|-----------|------------------|--------------------------------------------------|
+| `icon`   | `icon`    | `string \| null` | Name of a known icon to render or URL of SVG icon. |
+| `src`    | `src`     | `string \| null` | Src location of an svg icon.                     |

package/lib/icon/index.d.ts

@@ -0,0 +1,88 @@
+import { JSXInterface } from '../jsx';
+import { BasicElement, CSSResultGroup, TemplateResult, PropertyValues } from '@refinitiv-ui/core';
+export { preload } from './utils/IconLoader.js';
+export declare class Icon extends BasicElement {
+    /**
+     * 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(): CSSResultGroup;
+    private _icon;
+    /**
+     * Name of a known icon to render or URL of SVG icon.
+     * @example heart | https://cdn.io/icons/heart.svg
+     */
+    get icon(): string | null;
+    set icon(value: string | null);
+    private _src;
+    /**
+     * Src location of an svg icon.
+     * @example https://cdn.io/icons/heart.svg
+     * @deprecated Use `icon` instead
+     */
+    get src(): string | null;
+    set src(value: string | null);
+    private _template;
+    /**
+     * The icon template to render
+     */
+    private get template();
+    private set template(value);
+    /**
+     * Called after the component is first rendered
+     * @param changedProperties Properties which have changed
+     * @returns {void}
+     */
+    protected firstUpdated(changedProperties: PropertyValues): void;
+    /**
+     * Helper method, used to set the icon src.
+     * @returns {void}
+     */
+    private setIconSrc;
+    /**
+     * Tries to load an icon from the url provided
+     * and the renders this into the icon template.
+     * @param src Source location of the svg icon.
+     * @returns {void}
+     */
+    private loadAndRenderIcon;
+    /**
+     * Get and cache CDN prefix
+     * This is a private URL which is set in the theme
+     * and should not be configured again via the variable.
+     * @returns {void}
+     */
+    private setPrefix;
+    /**
+     * Clears SVG body from the icon template
+     * @returns {void}
+     */
+    private clearIcon;
+    /**
+     * A `TemplateResult` that will be used
+     * to render the updated internal template.
+     * @return Render template
+     */
+    protected render(): TemplateResult;
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'ef-icon': Icon;
+  }
+
+  namespace JSX {
+    interface IntrinsicElements {
+      'ef-icon': Partial<Icon> | JSXInterface.HTMLAttributes<Icon>;
+    }
+  }
+}
+
+export {};

package/lib/icon/index.js

@@ -0,0 +1,169 @@
+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);
+        this._icon = null;
+        this._src = null;
+        this._template = EmptyTemplate;
+    }
+    /**
+     * Element version number
+     * @returns version number
+     */
+    static get version() {
+        return VERSION;
+    }
+    /**
+     * 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() {
+        return css `
+      :host {
+        display: inline-block;
+        line-height: 1;
+        width: 1em;
+        height: 1em;
+      }
+      svg {
+        width: 100%;
+        height: 100%;
+      }
+    `;
+    }
+    /**
+     * Name of a known icon to render or URL of SVG icon.
+     * @example heart | https://cdn.io/icons/heart.svg
+     */
+    get icon() {
+        return this._icon;
+    }
+    set icon(value) {
+        const oldValue = this._icon;
+        if (oldValue !== value) {
+            this._icon = value;
+            void this.setIconSrc();
+            this.requestUpdate('icon', oldValue);
+        }
+    }
+    /**
+     * Src location of an svg icon.
+     * @example https://cdn.io/icons/heart.svg
+     * @deprecated Use `icon` instead
+     */
+    get src() {
+        return this._src;
+    }
+    set src(value) {
+        if (this.src !== value) {
+            this._src = value;
+            this.clearIcon();
+            if (value) {
+                void this.loadAndRenderIcon(value);
+            }
+        }
+    }
+    /**
+     * The icon template to render
+     */
+    get template() {
+        return this._template;
+    }
+    set template(value) {
+        if (this._template !== value) {
+            this._template = value;
+            this.requestUpdate();
+        }
+    }
+    /**
+     * Called after the component is first rendered
+     * @param changedProperties Properties which have changed
+     * @returns {void}
+     */
+    firstUpdated(changedProperties) {
+        super.firstUpdated(changedProperties);
+        /**
+         * We have to call this here because
+         * polyfilled browsers only get variables at this point.
+         */
+        this.setPrefix();
+    }
+    /**
+     * Helper method, used to set the icon src.
+     * @returns {void}
+     */
+    async setIconSrc() {
+        this.src = this.icon ? await IconLoader.getSrc(this.icon) : null;
+    }
+    /**
+     * Tries to load an icon from the url provided
+     * and the renders this into the icon template.
+     * @param src Source location of the svg icon.
+     * @returns {void}
+     */
+    async loadAndRenderIcon(src) {
+        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
+     * This is a private URL which is set in the theme
+     * and should not be configured again via the variable.
+     * @returns {void}
+     */
+    setPrefix() {
+        if (!IconLoader.isPrefixSet) {
+            const CDNPrefix = this.getComputedVariable('--cdn-prefix')
+                .replace(/^('|")|('|")$/g, '');
+            IconLoader.setCdnPrefix(CDNPrefix);
+        }
+    }
+    /**
+     * Clears SVG body from the icon template
+     * @returns {void}
+     */
+    clearIcon() {
+        this.template = EmptyTemplate;
+    }
+    /**
+     * A `TemplateResult` that will be used
+     * to render the updated internal template.
+     * @return Render template
+     */
+    render() {
+        return this.template;
+    }
+};
+__decorate([
+    property({ type: String, reflect: true })
+], Icon.prototype, "icon", null);
+__decorate([
+    property({ type: String })
+], Icon.prototype, "src", null);
+Icon = __decorate([
+    customElement('ef-icon', {
+        alias: 'coral-icon'
+    })
+], Icon);
+export { Icon };

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

@@ -0,0 +1,2 @@
+
+elf.customStyles.define('ef-icon', ':host{--cdn-prefix:\'https://cdn.refinitiv.net/public/libs/elf/assets/elf-theme-halo/resources/icons/\';--cdn-prefix:\'https://cdn.refinitiv.net/public/libs/elf/assets/elf-theme-halo/resources/icons/\';font-size:16px}:host svg{pointer-events:none}:host circle[fill]:not([fill=none]),:host ellipse[fill]:not([fill=none]),:host g[fill]:not([fill=none]),:host line[fill]:not([fill=none]),:host path[fill]:not([fill=none]),:host polygon[fill]:not([fill=none]),:host polyline[fill]:not([fill=none]),:host rect[fill]:not([fill=none]){fill:currentColor}:host circle[stroke]:not([stroke=none]),:host ellipse[stroke]:not([stroke=none]),:host g[stroke]:not([stroke=none]),:host line[stroke]:not([stroke=none]),:host path[stroke]:not([stroke=none]),:host polygon[stroke]:not([stroke=none]),:host polyline[stroke]:not([stroke=none]),:host rect[stroke]:not([stroke=none]){stroke:currentColor}:host([icon=powerpoint]){color:#ff3535}:host([icon=excel]){color:#00a626}:host([icon=pdf]){color:#ff3535}:host([icon=word]){color:#0094c4}:host([icon=twitter]){color:#1da1f2}:host([icon]) circle,:host([icon]) ellipse,:host([icon]) g,:host([icon]) line,:host([icon]) path,:host([icon]) polygon,:host([icon]) polyline,:host([icon]) rect{vector-effect:non-scaling-stroke}@media all and (-ms-high-contrast:none),(-ms-high-contrast:active){:host([icon]) circle,:host([icon]) ellipse,:host([icon]) g,:host([icon]) line,:host([icon]) path,:host([icon]) polygon,:host([icon]) polyline,:host([icon]) rect{vector-effect:none;stroke-width:calc(16px/.01em)}}');

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

@@ -0,0 +1,2 @@
+
+elf.customStyles.define('ef-icon', ':host{--cdn-prefix:\'https://cdn.refinitiv.net/public/libs/elf/assets/elf-theme-halo/resources/icons/\';--cdn-prefix:\'https://cdn.refinitiv.net/public/libs/elf/assets/elf-theme-halo/resources/icons/\';font-size:16px}:host svg{pointer-events:none}:host circle[fill]:not([fill=none]),:host ellipse[fill]:not([fill=none]),:host g[fill]:not([fill=none]),:host line[fill]:not([fill=none]),:host path[fill]:not([fill=none]),:host polygon[fill]:not([fill=none]),:host polyline[fill]:not([fill=none]),:host rect[fill]:not([fill=none]){fill:currentColor}:host circle[stroke]:not([stroke=none]),:host ellipse[stroke]:not([stroke=none]),:host g[stroke]:not([stroke=none]),:host line[stroke]:not([stroke=none]),:host path[stroke]:not([stroke=none]),:host polygon[stroke]:not([stroke=none]),:host polyline[stroke]:not([stroke=none]),:host rect[stroke]:not([stroke=none]){stroke:currentColor}:host([icon=powerpoint]){color:#ff3535}:host([icon=excel]){color:#00a626}:host([icon=pdf]){color:#ff3535}:host([icon=word]){color:#0094c4}:host([icon=twitter]){color:#1da1f2}:host([icon]) circle,:host([icon]) ellipse,:host([icon]) g,:host([icon]) line,:host([icon]) path,:host([icon]) polygon,:host([icon]) polyline,:host([icon]) rect{vector-effect:non-scaling-stroke}@media all and (-ms-high-contrast:none),(-ms-high-contrast:active){:host([icon]) circle,:host([icon]) ellipse,:host([icon]) g,:host([icon]) line,:host([icon]) path,:host([icon]) polygon,:host([icon]) polyline,:host([icon]) rect{vector-effect:none;stroke-width:calc(16px/.01em)}}');

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

@@ -0,0 +1,2 @@
+
+elf.customStyles.define('ef-icon', ':host{--cdn-prefix:\'https://cdn.refinitiv.net/public/libs/elf/assets/elf-theme-halo/resources/icons/\';--cdn-prefix:\'https://cdn.refinitiv.net/public/libs/elf/assets/elf-theme-solar/resources/icons/\'}:host svg{pointer-events:none}:host circle[fill]:not([fill=none]),:host ellipse[fill]:not([fill=none]),:host g[fill]:not([fill=none]),:host line[fill]:not([fill=none]),:host path[fill]:not([fill=none]),:host polygon[fill]:not([fill=none]),:host polyline[fill]:not([fill=none]),:host rect[fill]:not([fill=none]){fill:currentColor}:host circle[stroke]:not([stroke=none]),:host ellipse[stroke]:not([stroke=none]),:host g[stroke]:not([stroke=none]),:host line[stroke]:not([stroke=none]),:host path[stroke]:not([stroke=none]),:host polygon[stroke]:not([stroke=none]),:host polyline[stroke]:not([stroke=none]),:host rect[stroke]:not([stroke=none]){stroke:currentColor}:host([icon=powerpoint]){color:#ff3535}:host([icon=excel]){color:#00a626}:host([icon=pdf]){color:#ff3535}:host([icon=word]){color:#0094c4}:host([icon=twitter]){color:#1da1f2}');

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

@@ -0,0 +1,2 @@
+
+elf.customStyles.define('ef-icon', ':host{--cdn-prefix:\'https://cdn.refinitiv.net/public/libs/elf/assets/elf-theme-halo/resources/icons/\';--cdn-prefix:\'https://cdn.refinitiv.net/public/libs/elf/assets/elf-theme-solar/resources/icons/\'}:host svg{pointer-events:none}:host circle[fill]:not([fill=none]),:host ellipse[fill]:not([fill=none]),:host g[fill]:not([fill=none]),:host line[fill]:not([fill=none]),:host path[fill]:not([fill=none]),:host polygon[fill]:not([fill=none]),:host polyline[fill]:not([fill=none]),:host rect[fill]:not([fill=none]){fill:currentColor}:host circle[stroke]:not([stroke=none]),:host ellipse[stroke]:not([stroke=none]),:host g[stroke]:not([stroke=none]),:host line[stroke]:not([stroke=none]),:host path[stroke]:not([stroke=none]),:host polygon[stroke]:not([stroke=none]),:host polyline[stroke]:not([stroke=none]),:host rect[stroke]:not([stroke=none]){stroke:currentColor}:host([icon=powerpoint]){color:#ff3535}:host([icon=excel]){color:#00a626}:host([icon=pdf]){color:#ff3535}:host([icon=word]){color:#0094c4}:host([icon=twitter]){color:#1da1f2}');

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

@@ -0,0 +1,52 @@
+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
+ */
+declare class IconLoader extends CdnLoader {
+    private cdnPrefix;
+    private _isPrefixSet;
+    /**
+     * @returns {boolean} clarify whether prefix has been set or not.
+     */
+    get isPrefixSet(): boolean;
+    /**
+     * Sets clarify whether prefix has been set or not
+     * @param value - new value that is going to set.
+     */
+    set isPrefixSet(value: boolean);
+    /**
+     * @returns promise, which will be resolved with CDN prefix, once set.
+     */
+    getCdnPrefix(): Promise<string>;
+    /**
+     * Sets CDN prefix to load source.
+     * Resolves deferred promise with CDN prefix and sets src used to check whether prefix is already set or not.
+     * @param prefix - CDN prefix.
+     * @returns {void}
+     */
+    setCdnPrefix(prefix: string): void;
+    /**
+     * Creates complete source using CDN prefix and src.
+     * Waits for CDN prefix to be set.
+     * @param iconName - resource path for download
+     * @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;
+export { iconLoaderInstance as IconLoader };
+/**
+ * Helper function to preload set of icons.
+ * It could help to reduce icon loading delay when ef-icon has a known set of icons that it can use.
+ * @param attrs - list of arguments, representing icons.
+ * Could be icon names, complete icon URLs or mix of both.
+ * @returns Array of promises, which will be resolved with SVG bodies.
+ */
+export declare const preload: (...attrs: string[]) => Promise<string | undefined>[];

package/lib/icon/utils/IconLoader.js

@@ -0,0 +1,93 @@
+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
+ */
+class IconLoader extends CdnLoader {
+    constructor() {
+        super(...arguments);
+        this.cdnPrefix = new Deferred();
+        this._isPrefixSet = false;
+    }
+    /**
+     * @returns {boolean} clarify whether prefix has been set or not.
+     */
+    get isPrefixSet() {
+        return this._isPrefixSet;
+    }
+    /**
+     * Sets clarify whether prefix has been set or not
+     * @param value - new value that is going to set.
+     */
+    set isPrefixSet(value) {
+        if (this._isPrefixSet !== value) {
+            this._isPrefixSet = value;
+        }
+    }
+    /**
+     * @returns promise, which will be resolved with CDN prefix, once set.
+     */
+    getCdnPrefix() {
+        return this.cdnPrefix.promise;
+    }
+    /**
+     * Sets CDN prefix to load source.
+     * Resolves deferred promise with CDN prefix and sets src used to check whether prefix is already set or not.
+     * @param prefix - CDN prefix.
+     * @returns {void}
+     */
+    setCdnPrefix(prefix) {
+        if (prefix) {
+            this.cdnPrefix.resolve(prefix);
+            this.isPrefixSet = true;
+        }
+    }
+    /**
+     * Creates complete source using CDN prefix and src.
+     * Waits for CDN prefix to be set.
+     * @param iconName - resource path for download
+     * @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) {
+            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 container.innerHTML;
+        }
+        return '';
+    }
+}
+const iconLoaderInstance = new IconLoader();
+export { iconLoaderInstance as IconLoader };
+/**
+ * Helper function to preload set of icons.
+ * It could help to reduce icon loading delay when ef-icon has a known set of icons that it can use.
+ * @param attrs - list of arguments, representing icons.
+ * Could be icon names, complete icon URLs or mix of both.
+ * @returns Array of promises, which will be resolved with SVG bodies.
+ */
+export const preload = (...attrs) => {
+    return attrs.map(icon => iconLoaderInstance.loadSVG(icon));
+};

package/lib/index.d.ts

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

package/lib/index.js

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

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

@@ -0,0 +1,86 @@
+{
+  "version": "experimental",
+  "tags": [
+    {
+      "name": "ef-interactive-chart",
+      "description": "A charting component that allows you to create several use cases of financial chart.\nBy lightweight-charts library.",
+      "attributes": [
+        {
+          "name": "config",
+          "description": "Chart configurations for init chart",
+          "type": "InteractiveChartConfig"
+        },
+        {
+          "name": "disabled-legend",
+          "description": "Hide legend",
+          "type": "boolean",
+          "default": "false"
+        },
+        {
+          "name": "disabled-jump-button",
+          "description": "Hide jump to latest data button",
+          "type": "boolean",
+          "default": "false"
+        },
+        {
+          "name": "legend-style",
+          "description": "Set legend style i.e. `horizontal`, `vertical`.\nDefault is `vertical`.",
+          "type": "\"vertical\" | \"horizontal\""
+        }
+      ],
+      "properties": [
+        {
+          "name": "config",
+          "attribute": "config",
+          "description": "Chart configurations for init chart",
+          "type": "InteractiveChartConfig"
+        },
+        {
+          "name": "disabledLegend",
+          "attribute": "disabled-legend",
+          "description": "Hide legend",
+          "type": "boolean",
+          "default": "false"
+        },
+        {
+          "name": "disabledJumpButton",
+          "attribute": "disabled-jump-button",
+          "description": "Hide jump to latest data button",
+          "type": "boolean",
+          "default": "false"
+        },
+        {
+          "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": "[]"
+        }
+      ],
+      "events": [
+        {
+          "name": "initialized",
+          "description": "Dispatched when chart is initialized"
+        }
+      ],
+      "slots": [
+        {
+          "name": "legend",
+          "description": "Slot to use for implementing custom legend."
+        }
+      ],
+      "methods": [
+        {
+          "name": "colors",
+          "description": "List of available chart colors from the theme.",
+          "params": []
+        }
+      ]
+    }
+  ]
+}

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

@@ -0,0 +1,32 @@
+# 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"` |         | Set legend style i.e. `horizontal`, `vertical`.<br />Default is `vertical`. |
+| `seriesList`         |                        | `object`                     | []      | Array of series instances in chart               |
+
+## 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/merge.d.ts

@@ -0,0 +1,15 @@
+declare type UnknownObject = {
+    [key: string]: unknown;
+};
+declare type MergeObject = UnknownObject | Array<unknown>;
+/**
+ * Merge objects recursively
+ *
+ * @param {MergeObject} object The destination object.
+ * @param {MergeObject} sources The source objects.
+ * @param {boolean} force Force merge if a key of destination object is already exists and a value is not object
+ * @param {MergeObject[]} record The record object which record merged objects recursively
+ * @returns voids
+ */
+declare const merge: (object: MergeObject, sources: MergeObject, force?: boolean, record?: Array<unknown>) => void;
+export { merge, MergeObject };

package/lib/interactive-chart/helpers/merge.js

@@ -0,0 +1,28 @@
+/**
+ * Merge objects recursively
+ *
+ * @param {MergeObject} object The destination object.
+ * @param {MergeObject} sources The source objects.
+ * @param {boolean} force Force merge if a key of destination object is already exists and a value is not object
+ * @param {MergeObject[]} record The record object which record merged objects recursively
+ * @returns voids
+ */
+const merge = (object, sources, force = false, record = []) => {
+    let value;
+    let isObject;
+    Object.keys(sources).forEach((key, i) => {
+        // Get value and info from merging object
+        value = Array.isArray(sources) ? sources[i] : sources[key];
+        isObject = (value && typeof value === 'object' && value.toString() === '[object Object]');
+        // Merge if found a new key from source or has a force command
+        if (!(key in object) || (force && !isObject)) {
+            object[key] = value;
+        }
+        // Deep merge objects
+        if (isObject && !record.includes(value)) {
+            record.push(value);
+            merge(object[key], value, force, record);
+        }
+    });
+};
+export { merge };