@refinitiv-ui/elements 5.3.3 → 5.3.4

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,34 @@
+{
+  "version": "experimental",
+  "tags": [
+    {
+      "name": "ef-icon",
+      "attributes": [
+        {
+          "name": "icon",
+          "description": "Name of a known icon to render.",
+          "type": "string | null"
+        },
+        {
+          "name": "src",
+          "description": "Src location of an svg icon.",
+          "type": "string | null"
+        }
+      ],
+      "properties": [
+        {
+          "name": "icon",
+          "attribute": "icon",
+          "description": "Name of a known icon to render.",
+          "type": "string | null"
+        },
+        {
+          "name": "src",
+          "attribute": "src",
+          "description": "Src location of an svg icon.",
+          "type": "string | null"
+        }
+      ]
+    }
+  ]
+}

package/lib/icon/index.d.ts

@@ -0,0 +1,87 @@
+import { JSXInterface } from '../jsx';
+import { BasicElement, CSSResult, TemplateResult, PropertyValues } from '@refinitiv-ui/core';
+export { preload } from './utils/IconLoader';
+export declare class Icon extends BasicElement {
+    /**
+     * Element version number
+     * @returns version number
+     */
+    static get version(): string;
+    /**
+     * A `CSSResult` that will be used
+     * to style the host, slotted children
+     * and the internal template of the element.
+     * @return CSS template
+     */
+    static get styles(): CSSResult;
+    private _icon;
+    /**
+     * Name of a known icon to render.
+     * @example heart
+     */
+    get icon(): string | null;
+    set icon(value: string | null);
+    private _src;
+    /**
+     * Src location of an svg icon.
+     * @example https://cdn.io/icons/heart.svg
+     */
+    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,161 @@
+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';
+const EmptyTemplate = svg ``;
+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 `CSSResult` 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.
+     * @example heart
+     */
+    get icon() {
+        return this._icon;
+    }
+    set icon(value) {
+        const oldValue = this._icon;
+        if (oldValue !== value) {
+            this._icon = value;
+            void this.setIconSrc();
+            void this.requestUpdate('icon', oldValue);
+        }
+    }
+    /**
+     * Src location of an svg icon.
+     * @example https://cdn.io/icons/heart.svg
+     */
+    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;
+            void 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 svgBody = await IconLoader.loadSVG(src);
+        if (svgBody) {
+            this.template = svg `${unsafeHTML(svgBody)}`;
+        }
+    }
+    /**
+     * 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,47 @@
+import { CdnLoader } from '@refinitiv-ui/utils';
+/**
+ * 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>;
+    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,86 @@
+import { CdnLoader, Deferred } from '@refinitiv-ui/utils';
+const isUrl = (str) => (/^https?:\/\//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) {
+        return iconName ? `${await this.getCdnPrefix()}${iconName}.svg` : '';
+    }
+    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);
+            }
+            return Promise.resolve('');
+        }
+    }
+}
+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,2 @@
+export declare const VERSION = "PUBLISH_VERSION";
+export * from '@refinitiv-ui/core';

package/lib/index.js

@@ -0,0 +1,2 @@
+export const VERSION = '5.3.4';
+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/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 };

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

@@ -0,0 +1,45 @@
+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';
+declare type SeriesOptions = AreaSeriesPartialOptions | BarSeriesPartialOptions | CandlestickSeriesPartialOptions | HistogramSeriesPartialOptions | LineSeriesPartialOptions;
+declare type SeriesStyleOptions = LineStyleOptions & AreaStyleOptions & BarStyleOptions & CandlestickStyleOptions & HistogramStyleOptions;
+declare type SeriesData = LineData[] | BarData[] | HistogramData[];
+declare type SeriesList = ISeriesApi<SeriesType>;
+declare type SeriesDataItem = BarData | LineData;
+declare type RowLegend = NodeListOf<Element> | HTMLElement | null;
+declare type ColorToStringFunction = (param: string, ...arg: (string | number | undefined)[]) => RGBColor | HSLColor | null;
+declare enum LegendStyle {
+    vertical = "vertical",
+    horizontal = "horizontal"
+}
+interface Time {
+    day: number;
+    month: number;
+    year: number;
+}
+interface InteractiveChartConfig {
+    series: InteractiveChartSeries[];
+    options?: DeepPartial<ChartOptions>;
+}
+interface Theme {
+    color?: string;
+    backgroundColor: string;
+    textColor: string;
+    scalePriceBorderColor: string;
+    scaleTimesBorderColor: string;
+    gridVertLineColor: string;
+    gridHorzLineColor: string;
+    crossHairColor: string;
+    chartUpColor: string;
+    chartDownColor: string;
+    fillOpacity?: number;
+    lineWidth?: number;
+}
+interface InteractiveChartSeries {
+    type: string;
+    symbol?: string;
+    symbolName?: string;
+    legendPriceFormatter?: (price: string | number) => string | number;
+    data: SeriesData;
+    seriesOptions?: SeriesPartialOptions<SeriesOptions>;
+}
+export { InteractiveChartConfig, InteractiveChartSeries, Time, Theme, RowLegend, SeriesList, SeriesDataItem, SeriesStyleOptions, ColorToStringFunction, LegendStyle };

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

@@ -0,0 +1,6 @@
+var LegendStyle;
+(function (LegendStyle) {
+    LegendStyle["vertical"] = "vertical";
+    LegendStyle["horizontal"] = "horizontal";
+})(LegendStyle || (LegendStyle = {}));
+export { LegendStyle };