@refinitiv-ui/elements 6.1.1 → 6.2.1

package/CHANGELOG.md

@@ -3,6 +3,37 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [6.2.1](https://github.com/Refinitiv/refinitiv-ui/compare/@refinitiv-ui/elements@6.2.0...@refinitiv-ui/elements@6.2.1) (2022-09-26)
+
+
+### Bug Fixes
+
+* **autosuggest:** fix invalid label when disabled suggestion item ([#451](https://github.com/Refinitiv/refinitiv-ui/issues/451)) ([1944007](https://github.com/Refinitiv/refinitiv-ui/commit/194400774dece311856bc9bd0f80a17362a9466e))
+* **configurations:** move import extension eslint rule to local env ([#459](https://github.com/Refinitiv/refinitiv-ui/issues/459)) ([f8a9e1a](https://github.com/Refinitiv/refinitiv-ui/commit/f8a9e1a710901028da57e314ff5a879dab5d9e73))
+
+
+
+
+
+# [6.2.0](https://github.com/Refinitiv/refinitiv-ui/compare/@refinitiv-ui/elements@6.1.1...@refinitiv-ui/elements@6.2.0) (2022-09-14)
+
+
+### Bug Fixes
+
+* **color-picker:** update snapshot and remove backdrop ([#447](https://github.com/Refinitiv/refinitiv-ui/issues/447)) ([d6c086c](https://github.com/Refinitiv/refinitiv-ui/commit/d6c086c4ab405d8183258c72bc566f4bb640a635))
+* **dialog:** change withBackdrop and withShadow to proprerty ([#445](https://github.com/Refinitiv/refinitiv-ui/issues/445)) ([2740f00](https://github.com/Refinitiv/refinitiv-ui/commit/2740f008b5163a396dd244570a93064bf0c8d844))
+* **interactive-chart:** fix left position on legend ([#449](https://github.com/Refinitiv/refinitiv-ui/issues/449)) ([ede4f93](https://github.com/Refinitiv/refinitiv-ui/commit/ede4f93776671f9261675a3a0d5bd32a62c317d5))
+
+
+### Features
+
+* **color-picker:** add color picker ([#444](https://github.com/Refinitiv/refinitiv-ui/issues/444)) ([3718003](https://github.com/Refinitiv/refinitiv-ui/commit/37180039a77d908acd731c89067ecfce3f23955f))
+* **item:** show tooltip when text ellipsis ([#394](https://github.com/Refinitiv/refinitiv-ui/issues/394)) ([8943eb6](https://github.com/Refinitiv/refinitiv-ui/commit/8943eb625bfd54a6014f6815940eacd924d67ab4))
+
+
+
+
+
 ## [6.1.1](https://github.com/Refinitiv/refinitiv-ui/compare/@refinitiv-ui/elements@6.1.0...@refinitiv-ui/elements@6.1.1) (2022-08-29)
 
 

package/lib/autosuggest/helpers/utils.js

@@ -43,6 +43,6 @@ export const updateElementContent = (el, query, label, value) => {
         el.innerHTML = queryWordSelect(label, query);
     }
     else {
-        el.label = `${value}`;
+        el.label = label || `${value}`;
     }
 };

package/lib/color-dialog/elements/palettes.js

@@ -3,8 +3,7 @@ import { BasicElement, svg } from '@refinitiv-ui/core';
 import { property } from '@refinitiv-ui/core/decorators/property.js';
 import { query } from '@refinitiv-ui/core/decorators/query.js';
 import { VERSION } from '../../version.js';
-import { rgb } from '@refinitiv-ui/utils/color.js';
-import { isHex } from '../helpers/color-helpers.js';
+import { rgb, isHex } from '@refinitiv-ui/utils/color.js';
 /**
  * Element base class usually used
  * for creating palettes elements.

package/lib/color-dialog/helpers/color-helpers.d.ts

@@ -7,10 +7,3 @@ export declare const COLOR_ITEMS: string[][];
  */
 export declare const GRAYSCALE_ITEMS: string[][];
 export declare const NOCOLOR_POINTS = "6, 2, 15, 6, 15, 17, 6, 21, -3, 17, -3, 6";
-export declare const isHex: (value: string) => boolean;
-/**
- * Remove hash (#) sign from hex value
- * @param hex Hex to check
- * @returns hex value without # sign
- */
-export declare const removeHashSign: (hex: string) => string;

package/lib/color-dialog/helpers/color-helpers.js

@@ -144,18 +144,3 @@ export const GRAYSCALE_ITEMS = [
     ['155, 2, 164, 6, 164, 17, 155, 21, 146, 17, 146, 6', '#000000']
 ];
 export const NOCOLOR_POINTS = '6, 2, 15, 6, 15, 17, 6, 21, -3, 17, -3, 6';
-const HEX_REGEXP = /^#([0-9A-F]{3}){1,2}$/i; // used to validate HEX
-export const isHex = (value) => HEX_REGEXP.test(value);
-/**
- * Remove hash (#) sign from hex value
- * @param hex Hex to check
- * @returns hex value without # sign
- */
-export const removeHashSign = (hex) => {
-    if (hex) {
-        if (hex.startsWith('#')) {
-            hex = hex.slice(1);
-        }
-    }
-    return hex;
-};

package/lib/color-dialog/helpers/value-model.js

@@ -1,5 +1,4 @@
-import { rgb } from '@refinitiv-ui/utils/color.js';
-import { isHex } from './color-helpers.js';
+import { rgb, isHex } from '@refinitiv-ui/utils/color.js';
 const rgbNumberToString = (value) => isNaN(value) ? '' : `${value}`; // replace NaN with empty string
 /**
  * A helper model in order to keep and update values between RGB and HEX

package/lib/color-dialog/index.js

@@ -4,10 +4,9 @@ import { customElement } from '@refinitiv-ui/core/decorators/custom-element.js';
 import { property } from '@refinitiv-ui/core/decorators/property.js';
 import { query } from '@refinitiv-ui/core/decorators/query.js';
 import { styleMap } from '@refinitiv-ui/core/directives/style-map.js';
-import { rgb } from '@refinitiv-ui/utils/color.js';
+import { rgb, isHex, removeHashSign } from '@refinitiv-ui/utils/color.js';
 import { VERSION } from '../version.js';
 import { ValueModel } from './helpers/value-model.js';
-import { isHex, removeHashSign } from './helpers/color-helpers.js';
 import '../button/index.js';
 import '../number-field/index.js';
 import '../text-field/index.js';

package/lib/color-picker/custom-elements.json

@@ -0,0 +1,71 @@
+{
+  "version": "experimental",
+  "tags": [
+    {
+      "name": "ef-color-picker",
+      "description": "\nColor picker control",
+      "attributes": [
+        {
+          "name": "allow-nocolor",
+          "description": "Set the color dialog to activate no-color option",
+          "type": "boolean",
+          "default": "false"
+        },
+        {
+          "name": "opened",
+          "description": "Toggles the opened state of the dialog",
+          "type": "boolean",
+          "default": "false"
+        },
+        {
+          "name": "readonly",
+          "description": "Set readonly state",
+          "type": "boolean",
+          "default": "false"
+        },
+        {
+          "name": "disabled",
+          "description": "Set disabled state",
+          "type": "boolean",
+          "default": "false"
+        }
+      ],
+      "properties": [
+        {
+          "name": "allowNocolor",
+          "attribute": "allow-nocolor",
+          "description": "Set the color dialog to activate no-color option",
+          "type": "boolean",
+          "default": "false"
+        },
+        {
+          "name": "opened",
+          "attribute": "opened",
+          "description": "Toggles the opened state of the dialog",
+          "type": "boolean",
+          "default": "false"
+        },
+        {
+          "name": "readonly",
+          "attribute": "readonly",
+          "description": "Set readonly state",
+          "type": "boolean",
+          "default": "false"
+        },
+        {
+          "name": "disabled",
+          "attribute": "disabled",
+          "description": "Set disabled state",
+          "type": "boolean",
+          "default": "false"
+        }
+      ],
+      "events": [
+        {
+          "name": "value-changed",
+          "description": "Dispatched when value changes"
+        }
+      ]
+    }
+  ]
+}

package/lib/color-picker/custom-elements.md

@@ -0,0 +1,19 @@
+# ef-color-picker
+
+
+Color picker control
+
+## Properties
+
+| Property       | Attribute       | Type      | Default | Description                                      |
+|----------------|-----------------|-----------|---------|--------------------------------------------------|
+| `allowNocolor` | `allow-nocolor` | `boolean` | false   | Set the color dialog to activate no-color option |
+| `disabled`     | `disabled`      | `boolean` | false   | Set disabled state                               |
+| `opened`       | `opened`        | `boolean` | false   | Toggles the opened state of the dialog           |
+| `readonly`     | `readonly`      | `boolean` | false   | Set readonly state                               |
+
+## Events
+
+| Event           | Description                   |
+|-----------------|-------------------------------|
+| `value-changed` | Dispatched when value changes |

package/lib/color-picker/index.d.ts

@@ -0,0 +1,130 @@
+import { JSXInterface } from '../jsx';
+import { ControlElement, PropertyValues, TemplateResult, CSSResult } from '@refinitiv-ui/core';
+import '../color-dialog/index.js';
+import '@refinitiv-ui/phrasebook/locale/en/color-picker.js';
+/**
+ *
+ * Color picker control
+ * @fires value-changed - Dispatched when value changes
+ *
+ * @attr {boolean} readonly - Set readonly state
+ * @prop {boolean} [readonly=false] - Set readonly state
+ *
+ * @attr {boolean} disabled - Set disabled state
+ * @prop {boolean} [disabled=false] - Set disabled state
+ */
+export declare class ColorPicker extends ControlElement {
+    /**
+     * Element version number
+     * @returns version number
+     */
+    static get version(): string;
+    /**
+     * Set the color dialog to activate no-color option
+     */
+    allowNocolor: boolean;
+    /**
+     * Set lang to color dialog
+     * @ignore
+     */
+    lang: string;
+    /**
+     * A `CSSResult` 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[];
+    private lazyRendered;
+    /**
+     * Toggles the opened state of the dialog
+     */
+    opened: boolean;
+    private dialogEl?;
+    /**
+     * Check if value is valid HEX value (including #)
+     * @param value Value to check
+     * @returns true if value is valid
+     */
+    protected isValidValue(value: string): boolean;
+    /**
+     * Used to show a warning when the value does not pass the validation
+     * @param value that is invalid
+     * @returns {void}
+     */
+    protected warnInvalidValue(value: string): void;
+    /**
+     * Return true if popup can be opened
+     */
+    private get canOpenPopup();
+    /**
+     * Called after the component is first rendered
+     * @param changedProperties Properties which have changed
+     * @returns {void}
+     */
+    protected firstUpdated(changedProperties: PropertyValues): void;
+    /**
+     * Updates the element
+     * @param changedProperties Properties that has changed
+     * @returns {void}
+     */
+    protected update(changedProperties: PropertyValues): void;
+    /**
+     * Run on tap event
+     * @param event Tap event
+     * @returns {void}
+     */
+    private onTap;
+    /**
+     * Handles key input on color picker
+     * @param event Key down event object
+     * @returns {void}
+     */
+    private onKeyDown;
+    /**
+     * Set opened state with event
+     * @param opened True if opened
+     * @returns {void}
+     */
+    private setOpened;
+    /**
+     * Run on color dialog value-changed event
+     * @param event value-changed event
+     * @returns {void}
+     */
+    private onColorDialogValueChanged;
+    /**
+     * Run on color dialog opened-changed event
+     * @param event opened-changed event
+     * @returns {void}
+     */
+    private onColorDialogOpenedChanged;
+    /**
+     * Color dialog template
+     */
+    private get dialogTemplate();
+    /**
+     * Color item template
+     */
+    private get colorItemTemplate();
+    /**
+     * A `TemplateResult` that will be used
+     * to render the updated internal template.
+     * @return Render template
+     */
+    protected render(): TemplateResult;
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'ef-color-picker': ColorPicker;
+  }
+
+  namespace JSX {
+    interface IntrinsicElements {
+      'ef-color-picker': Partial<ColorPicker> | JSXInterface.ControlHTMLAttributes<ColorPicker>;
+    }
+  }
+}
+
+export {};

package/lib/color-picker/index.js

@@ -0,0 +1,235 @@
+import { __decorate } from "tslib";
+import { ControlElement, html, css, WarningNotice } from '@refinitiv-ui/core';
+import { customElement } from '@refinitiv-ui/core/decorators/custom-element.js';
+import { property } from '@refinitiv-ui/core/decorators/property.js';
+import { query } from '@refinitiv-ui/core/decorators/query.js';
+import { styleMap } from '@refinitiv-ui/core/directives/style-map.js';
+import { ifDefined } from '@refinitiv-ui/core/directives/if-defined.js';
+import { VERSION } from '../version.js';
+import { isHex } from '@refinitiv-ui/utils/color.js';
+import '../color-dialog/index.js';
+import '@refinitiv-ui/phrasebook/locale/en/color-picker.js';
+const DIALOG_POSITION = ['right-start', 'right-end', 'right-middle', 'left-start', 'left-end', 'left-middle'];
+/**
+ *
+ * Color picker control
+ * @fires value-changed - Dispatched when value changes
+ *
+ * @attr {boolean} readonly - Set readonly state
+ * @prop {boolean} [readonly=false] - Set readonly state
+ *
+ * @attr {boolean} disabled - Set disabled state
+ * @prop {boolean} [disabled=false] - Set disabled state
+ */
+let ColorPicker = class ColorPicker extends ControlElement {
+    constructor() {
+        super(...arguments);
+        /**
+         * Set the color dialog to activate no-color option
+         */
+        this.allowNocolor = false;
+        /**
+         * Set lang to color dialog
+         * @ignore
+         */
+        this.lang = '';
+        this.lazyRendered = false; /* speed up rendering by not populating color dialog on first load */
+        /**
+         * Toggles the opened state of the dialog
+         */
+        this.opened = false;
+    }
+    /**
+     * 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.
+     * @returns CSS template
+     */
+    static get styles() {
+        return css `
+      :host {
+        display: inline-block;
+      }
+      [part=color-item][no-color] {
+        background: linear-gradient(to bottom right, transparent calc(50% - 1px),
+        var(--no-color-line-color, #ff0000) calc(50% - 1px),
+        var(--no-color-line-color, #ff0000) calc(50% + 1px),
+        transparent calc(50% + 1px));
+      }
+    `;
+    }
+    /**
+     * Check if value is valid HEX value (including #)
+     * @param value Value to check
+     * @returns true if value is valid
+     */
+    isValidValue(value) {
+        return value === '' || isHex(value);
+    }
+    /**
+     * Used to show a warning when the value does not pass the validation
+     * @param value that is invalid
+     * @returns {void}
+     */
+    warnInvalidValue(value) {
+        new WarningNotice(`The specified value "${value}" is not valid value. The correct value should look like "#fff" or "#ffffff".`).show();
+    }
+    /**
+     * Return true if popup can be opened
+     */
+    get canOpenPopup() {
+        return !(this.disabled || this.readonly);
+    }
+    /**
+     * Called after the component is first rendered
+     * @param changedProperties Properties which have changed
+     * @returns {void}
+     */
+    firstUpdated(changedProperties) {
+        super.firstUpdated(changedProperties);
+        this.addEventListener('tap', this.onTap);
+        this.addEventListener('keydown', this.onKeyDown);
+    }
+    /**
+     * Updates the element
+     * @param changedProperties Properties that has changed
+     * @returns {void}
+     */
+    update(changedProperties) {
+        if (changedProperties.has('opened') && this.opened) {
+            this.lazyRendered = true;
+        }
+        // make sure to close dialog for disabled
+        if (this.opened && !this.canOpenPopup) {
+            this.opened = false; /* this cannot be nor stopped nor listened */
+        }
+        super.update(changedProperties);
+    }
+    /**
+     * Run on tap event
+     * @param event Tap event
+     * @returns {void}
+     */
+    onTap(event) {
+        const path = event.composedPath();
+        if ((this.dialogEl && path.includes(this.dialogEl)) || event.defaultPrevented) {
+            return; /* dialog is managed separately */
+        }
+        this.setOpened(!this.opened);
+    }
+    /**
+     * Handles key input on color picker
+     * @param event Key down event object
+     * @returns {void}
+     */
+    onKeyDown(event) {
+        if (event.defaultPrevented) {
+            return;
+        }
+        switch (event.key) {
+            case 'Enter':
+            case ' ':
+            case 'Spacebar':
+                this.setOpened(true);
+                break;
+            default:
+                return;
+        }
+        event.preventDefault();
+    }
+    /**
+     * Set opened state with event
+     * @param opened True if opened
+     * @returns {void}
+     */
+    setOpened(opened) {
+        if (opened && !this.canOpenPopup) { /* never allow to open popup if cannot do so */
+            return;
+        }
+        if (this.opened !== opened) {
+            this.opened = opened;
+        }
+    }
+    /**
+     * Run on color dialog value-changed event
+     * @param event value-changed event
+     * @returns {void}
+     */
+    onColorDialogValueChanged(event) {
+        const value = event.detail.value;
+        this.value = value;
+        this.setAttribute('value', this.value);
+        this.notifyPropertyChange('value', this.value);
+        this.setOpened(false);
+    }
+    /**
+     * Run on color dialog opened-changed event
+     * @param event opened-changed event
+     * @returns {void}
+     */
+    onColorDialogOpenedChanged(event) {
+        this.setOpened(event.detail.value);
+    }
+    /**
+     * Color dialog template
+     */
+    get dialogTemplate() {
+        if (this.lazyRendered) {
+            return html `<ef-color-dialog
+      offset="4"
+      part="dialog"
+      .lang=${ifDefined(this.lang || undefined)}
+      .value=${this.value}
+      .focusBoundary=${this}
+      .positionTarget=${this}
+      .position=${DIALOG_POSITION}
+      .withBackdrop=${false}
+      ?opened=${this.opened}
+      ?allow-nocolor=${this.allowNocolor}
+      @opened-changed=${this.onColorDialogOpenedChanged}
+      @value-changed=${this.onColorDialogValueChanged}></ef-color-dialog>`;
+        }
+    }
+    /**
+     * Color item template
+     */
+    get colorItemTemplate() {
+        return html `<div part="color-item" ?no-color=${!this.value} style=${styleMap({ backgroundColor: this.value })}></div>`;
+    }
+    /**
+     * A `TemplateResult` that will be used
+     * to render the updated internal template.
+     * @return Render template
+     */
+    render() {
+        return html `
+      ${this.colorItemTemplate}
+      ${this.dialogTemplate}
+      `;
+    }
+};
+__decorate([
+    property({ type: Boolean, attribute: 'allow-nocolor' })
+], ColorPicker.prototype, "allowNocolor", void 0);
+__decorate([
+    property({ type: String })
+], ColorPicker.prototype, "lang", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], ColorPicker.prototype, "opened", void 0);
+__decorate([
+    query('[part=dialog]')
+], ColorPicker.prototype, "dialogEl", void 0);
+ColorPicker = __decorate([
+    customElement('ef-color-picker', {
+        alias: 'emerald-color-picker'
+    })
+], ColorPicker);
+export { ColorPicker };

package/lib/color-picker/themes/halo/dark/index.js

@@ -0,0 +1,3 @@
+import '@refinitiv-ui/elements/color-dialog/themes/halo/dark';
+
+elf.customStyles.define('ef-color-picker', ':host{outline:0;box-sizing:border-box;height:24px;min-width:24px;border:1px solid #404040}:host([disabled]),:host([readonly]){border-color:rgba(64,64,64,.5)}:host [part=color-item]{cursor:pointer;height:100%}:host([disabled]) [part=color-item],:host([readonly]) [part=color-item]{pointer-events:none}:host([focused=visible]){border-color:#334bff}:host(:not([readonly]):not([disabled]):not([focused]):hover){border-color:grey}');

package/lib/color-picker/themes/halo/light/index.js

@@ -0,0 +1,3 @@
+import '@refinitiv-ui/elements/color-dialog/themes/halo/light';
+
+elf.customStyles.define('ef-color-picker', ':host{outline:0;box-sizing:border-box;height:24px;min-width:24px;border:1px solid #595959}:host([disabled]),:host([readonly]){border-color:rgba(89,89,89,.5)}:host [part=color-item]{cursor:pointer;height:100%}:host([disabled]) [part=color-item],:host([readonly]) [part=color-item]{pointer-events:none}:host([focused=visible]){border-color:#334bff}:host(:not([readonly]):not([disabled]):not([focused]):hover){border-color:#0d0d0d}');

package/lib/color-picker/themes/solar/charcoal/index.js

@@ -0,0 +1,3 @@
+import '@refinitiv-ui/elements/color-dialog/themes/solar/charcoal';
+
+elf.customStyles.define('ef-color-picker', ':host{outline:0;box-sizing:border-box;height:23px;min-width:23px;border:1px solid #4a4a52}:host([disabled]),:host([readonly]){border-color:rgba(74,74,82,.6)}:host [part=color-item]{cursor:pointer;height:100%}:host([disabled]) [part=color-item],:host([readonly]) [part=color-item]{pointer-events:none}:host([focused=visible]){border-color:#f93;border-style:dotted}');

package/lib/color-picker/themes/solar/pearl/index.js

@@ -0,0 +1,3 @@
+import '@refinitiv-ui/elements/color-dialog/themes/solar/pearl';
+
+elf.customStyles.define('ef-color-picker', ':host{outline:0;box-sizing:border-box;height:23px;min-width:23px;border:1px solid #a9afba}:host([disabled]),:host([readonly]){border-color:rgba(169,175,186,.6)}:host [part=color-item]{cursor:pointer;height:100%}:host([disabled]) [part=color-item],:host([readonly]) [part=color-item]{pointer-events:none}:host([focused=visible]){border-color:#f93;border-style:dotted}');

package/lib/dialog/index.d.ts

@@ -85,12 +85,14 @@ export declare class Dialog extends Overlay {
     private footerElement;
     noCancelOnOutsideClick: boolean;
     /**
-    * @ignore
-    */
+     * @ignore
+     * Hiding from document to avoid property overridden
+     */
     withBackdrop: boolean;
     /**
-    * @ignore
-    */
+     * @ignore
+     * Hiding from document to avoid property overridden
+     */
     withShadow: boolean;
     disconnectedCallback(): void;
     /**

package/lib/dialog/index.js

@@ -61,12 +61,14 @@ let Dialog = class Dialog extends Overlay {
         this.draggable = false;
         this.noCancelOnOutsideClick = true;
         /**
-        * @ignore
-        */
+         * @ignore
+         * Hiding from document to avoid property overridden
+         */
         this.withBackdrop = true;
         /**
-        * @ignore
-        */
+         * @ignore
+         * Hiding from document to avoid property overridden
+         */
         this.withShadow = true;
     }
     /**
@@ -345,6 +347,12 @@ __decorate([
 __decorate([
     query('[part=footer]')
 ], Dialog.prototype, "footerElement", void 0);
+__decorate([
+    property({ type: Boolean, attribute: false })
+], Dialog.prototype, "withBackdrop", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true, attribute: 'with-shadow' })
+], Dialog.prototype, "withShadow", void 0);
 Dialog = __decorate([
     customElement('ef-dialog', {
         alias: 'coral-dialog'

package/lib/heatmap/index.js

@@ -1041,6 +1041,7 @@ __decorate([
 ], Heatmap.prototype, "axisHidden", void 0);
 __decorate([
     property({ type: Object, attribute: false })
+    /* istanbul ignore next */
 ], Heatmap.prototype, "hoverCell", null);
 __decorate([
     property({ type: Number, attribute: 'min-point' })

package/lib/interactive-chart/index.d.ts

@@ -21,6 +21,7 @@ export declare class InteractiveChart extends ResponsiveElement {
     private static readonly DEFAULT_LINE_WIDTH;
     private static readonly DEFAULT_FILL_OPACITY;
     private static readonly LINE_STYLES;
+    private static readonly DEFAULT_LEGEND_LEFT_POSITION;
     private _legendStyle?;
     /**
      * Chart configurations for init chart
@@ -107,7 +108,6 @@ export declare class InteractiveChart extends ResponsiveElement {
     resizedCallback(size: ElementSize): void;
     /**
     * Legend value observer
-    * @param value Legend value
     * @returns {void}
     */
     private onLegendChange;
@@ -120,7 +120,6 @@ export declare class InteractiveChart extends ResponsiveElement {
     private onLegendStyleChange;
     /**
     * Jump last value observer
-    * @param value jump last value
     * @returns {void}
     */
     private onJumpButtonChange;
@@ -206,11 +205,6 @@ export declare class InteractiveChart extends ResponsiveElement {
      * @returns {void}
      */
     private applyLegendTextColor;
-    /**
-     * Get position config for set position legend
-     * @returns {void}
-     */
-    private applyStyleLegend;
     /**
      * Get position config for set position logo trading view on chart
      * @returns {void}
@@ -229,6 +223,16 @@ export declare class InteractiveChart extends ResponsiveElement {
      * @returns {void} return undefined has out of boundary chart
      */
     private handleCrosshairMoved;
+    /**
+     * Callback uses for sizeChange event
+     * @returns {void}
+     */
+    private onTimeScaleSizeChange;
+    /**
+     * Handle left position of legend
+     * @returns {void}
+     */
+    private handleLegendLeftPosition;
     /**
      * Create legend element
      * @returns {void}

package/lib/interactive-chart/index.js

@@ -82,6 +82,13 @@ let InteractiveChart = InteractiveChart_1 = class InteractiveChart extends Respo
             }
             this.createRowLegend(this.rowLegend, param);
         };
+        /**
+         * Callback uses for sizeChange event
+         * @returns {void}
+         */
+        this.onTimeScaleSizeChange = () => {
+            this.handleLegendLeftPosition();
+        };
         /**
          *  Handle TimeRangeChangeEventHandler
          *  on event subscribeVisibleTimeRangeChange
@@ -153,10 +160,10 @@ let InteractiveChart = InteractiveChart_1 = class InteractiveChart extends Respo
             }
         }
         if (changedProperties.has('disabledLegend')) {
-            this.onLegendChange(this.disabledLegend);
+            this.onLegendChange();
         }
         if (changedProperties.has('disabledJumpButton')) {
-            this.onJumpButtonChange(this.disabledJumpButton);
+            this.onJumpButtonChange();
         }
         if (changedProperties.has('deprecatedLegendStyle') || changedProperties.has('legend-style')) {
             if (changedProperties.has('deprecatedLegendStyle')) {
@@ -186,11 +193,10 @@ let InteractiveChart = InteractiveChart_1 = class InteractiveChart extends Respo
     }
     /**
     * Legend value observer
-    * @param value Legend value
     * @returns {void}
     */
-    onLegendChange(value) {
-        if (!value) {
+    onLegendChange() {
+        if (!this.disabledLegend) {
             this.createLegend();
         }
         else {
@@ -216,11 +222,10 @@ let InteractiveChart = InteractiveChart_1 = class InteractiveChart extends Respo
     }
     /**
     * Jump last value observer
-    * @param value jump last value
     * @returns {void}
     */
-    onJumpButtonChange(value) {
-        if (!value) {
+    onJumpButtonChange() {
+        if (!this.disabledJumpButton) {
             this.createJumpButton(this.width, this.height);
         }
         else {
@@ -320,6 +325,7 @@ let InteractiveChart = InteractiveChart_1 = class InteractiveChart extends Respo
             this.legendContainer.textContent = '';
             this.chart.unsubscribeCrosshairMove(this.handleCrosshairMoved);
             this.legendInitialized = false;
+            this.chart.timeScale().unsubscribeSizeChange(this.onTimeScaleSizeChange);
         }
     }
     /**
@@ -335,7 +341,6 @@ let InteractiveChart = InteractiveChart_1 = class InteractiveChart extends Respo
         this.applyTheme(config);
         this.applyLegendTextColor();
         this.applyStylesBranding();
-        this.applyStyleLegend();
     }
     /**
      * Create series
@@ -561,22 +566,6 @@ let InteractiveChart = InteractiveChart_1 = class InteractiveChart extends Respo
             }
         }
     }
-    /**
-     * Get position config for set position legend
-     * @returns {void}
-     */
-    applyStyleLegend() {
-        if (this.chart) {
-            // Get position config for set position legend
-            const position = this.getPriceScalePosition();
-            if (position === 'left' || position === 'two-price') {
-                this.legendContainer.className = 'yaxis-left';
-            }
-            else {
-                this.legendContainer.className = 'yaxis-right';
-            }
-        }
-    }
     /**
      * Get position config for set position logo trading view on chart
      * @returns {void}
@@ -606,6 +595,16 @@ let InteractiveChart = InteractiveChart_1 = class InteractiveChart extends Respo
             return 'none';
         }
     }
+    /**
+     * Handle left position of legend
+     * @returns {void}
+     */
+    handleLegendLeftPosition() {
+        const leftPriceScaleWidth = this.chart?.priceScale('left')?.width() || 0;
+        if (this.legendContainer) {
+            this.legendContainer.style.left = `${leftPriceScaleWidth + InteractiveChart_1.DEFAULT_LEGEND_LEFT_POSITION}px`;
+        }
+    }
     /**
      * Create legend element
      * @returns {void}
@@ -617,6 +616,11 @@ let InteractiveChart = InteractiveChart_1 = class InteractiveChart extends Respo
                 this.rowLegend = this.shadowRoot.querySelectorAll('.row');
             }
             this.chart.subscribeCrosshairMove(this.handleCrosshairMoved);
+            /* Add a subscription to resizing time scale (x-axis). The event triggers after the chart rendered.
+             * So that we can know the priceScale (y-axis) width.
+             * Legend relates to priceScale directly. But the axis doesn't have event for now. So use x-axis instead.
+             */
+            this.chart.timeScale().subscribeSizeChange(this.onTimeScaleSizeChange);
             this.legendInitialized = true;
         }
     }
@@ -1010,6 +1014,11 @@ let InteractiveChart = InteractiveChart_1 = class InteractiveChart extends Respo
         height: 300px;
         z-index: 0;
       }
+
+      [part=legend] {
+        position: absolute;
+        z-index: 1000;
+      }
     `;
     }
     /**
@@ -1044,6 +1053,7 @@ InteractiveChart.LINE_STYLES = {
     LARGE_DASHED: 3,
     SPARSE_DOTTED: 4
 };
+InteractiveChart.DEFAULT_LEGEND_LEFT_POSITION = 15;
 __decorate([
     property({ type: Object })
 ], InteractiveChart.prototype, "config", void 0);

package/lib/interactive-chart/themes/halo/dark/index.js

@@ -1,3 +1,3 @@
 import '@refinitiv-ui/elements/tooltip/themes/halo/dark';
 
-elf.customStyles.define('ef-interactive-chart', ':host{--chart-color-1:#6678FF;--chart-color-2:#FFFFFF;--chart-color-3:#FFC800;--chart-color-4:#9064CD;--chart-color-5:#00D0D4;--chart-color-6:#FF5000;--chart-color-7:#00C389;--chart-color-8:#EA2E6C;--chart-color-9:#999999;--chart-color-10:#3BBAFF;--line-width:2;--fill-opacity:0.4;--text-color:rgba(204, 204, 204, 0.8);--background-color:#1A1A1A;--chart-up-color:#39C46E;--chart-down-color:#F5475B;--cross-hair-color:#CCCCCC;--grid-vert-line-color:rgba(38, 38, 38, 0.5);--grid-horz-line-color:rgba(38, 38, 38, 0.5);--scale-price-border-color:rgba(38, 38, 38, 0.5);--scale-times-border-color:rgba(38, 38, 38, 0.5)}:host [part=legend]{position:absolute;left:15px;top:15px;z-index:1000;color:var(--text-color);font-size:90%}:host [part=legend] .row{margin:1px 5px}:host [part=legend] .price{margin-right:5px}:host [part=legend] .ohlc{margin-right:2px}:host [part=legend].yaxis-left{left:70px}:host [part=legend].yaxis-right{left:15px}:host [part=legend].horizontal{display:flex;max-width:calc(100% - 75px);flex-wrap:wrap}:host [part=jump-button-container]{display:none;position:absolute;transition:background-color .1s;width:23px;height:23px;color:#ccc;border:1px solid #0d0d0d;box-shadow:0 0 0 0 rgba(0,0,0,.5);border-radius:100%;z-index:1000;cursor:pointer;background-color:#1a1a1a}:host [part=jump-button-container]:hover{color:#fff;border-color:#1429bd;box-shadow:0 0 0 0 rgba(0,0,0,.8);background-color:#343434}:host [part=jump-button-container]:active{color:#fff;box-shadow:0 0 0 0 rgba(0,0,0,.5);background-color:#1a1a1a}:host [part=jump-button]{position:relative;display:inline-block;width:5px;height:5px;border-top:2px solid #ccc;border-right:2px solid #ccc;transform:rotate(45deg) skew(0);margin-top:8px;margin-left:7px}:host [part=branding-container]{position:absolute;opacity:.6;bottom:3px;z-index:1000}:host [part=branding-container].left{left:10px}:host [part=branding-container].right{right:10px}:host [part=branding-container].none{top:13px;right:13px}:host [part=branding]{height:22px;width:22px;fill:rgba(204,204,204,.8)}:host [part=jump-button-container],:host [part=jump-button-container]:hover,:host [part=jump-button]{border-color:grey}');
+elf.customStyles.define('ef-interactive-chart', ':host{--chart-color-1:#6678FF;--chart-color-2:#FFFFFF;--chart-color-3:#FFC800;--chart-color-4:#9064CD;--chart-color-5:#00D0D4;--chart-color-6:#FF5000;--chart-color-7:#00C389;--chart-color-8:#EA2E6C;--chart-color-9:#999999;--chart-color-10:#3BBAFF;--line-width:2;--fill-opacity:0.4;--text-color:rgba(204, 204, 204, 0.8);--background-color:#1A1A1A;--chart-up-color:#39C46E;--chart-down-color:#F5475B;--cross-hair-color:#CCCCCC;--grid-vert-line-color:rgba(38, 38, 38, 0.5);--grid-horz-line-color:rgba(38, 38, 38, 0.5);--scale-price-border-color:rgba(38, 38, 38, 0.5);--scale-times-border-color:rgba(38, 38, 38, 0.5)}:host [part=legend]{top:15px;color:var(--text-color);font-size:90%}:host [part=legend] .row{margin:1px 5px}:host [part=legend] .price{margin-right:5px}:host [part=legend] .ohlc{margin-right:2px}:host [part=legend].horizontal{display:flex;max-width:calc(100% - 75px);flex-wrap:wrap}:host [part=jump-button-container]{display:none;position:absolute;transition:background-color .1s;width:23px;height:23px;color:#ccc;border:1px solid #0d0d0d;box-shadow:0 0 0 0 rgba(0,0,0,.5);border-radius:100%;z-index:1000;cursor:pointer;background-color:#1a1a1a}:host [part=jump-button-container]:hover{color:#fff;border-color:#1429bd;box-shadow:0 0 0 0 rgba(0,0,0,.8);background-color:#343434}:host [part=jump-button-container]:active{color:#fff;box-shadow:0 0 0 0 rgba(0,0,0,.5);background-color:#1a1a1a}:host [part=jump-button]{position:relative;display:inline-block;width:5px;height:5px;border-top:2px solid #ccc;border-right:2px solid #ccc;transform:rotate(45deg) skew(0);margin-top:8px;margin-left:7px}:host [part=branding-container]{position:absolute;opacity:.6;bottom:3px;z-index:1000}:host [part=branding-container].left{left:10px}:host [part=branding-container].right{right:10px}:host [part=branding-container].none{top:13px;right:13px}:host [part=branding]{height:22px;width:22px;fill:rgba(204,204,204,.8)}:host [part=jump-button-container],:host [part=jump-button-container]:hover,:host [part=jump-button]{border-color:grey}');

package/lib/interactive-chart/themes/halo/light/index.js

@@ -1,3 +1,3 @@
 import '@refinitiv-ui/elements/tooltip/themes/halo/light';
 
-elf.customStyles.define('ef-interactive-chart', ':host{--chart-color-1:#334BFF;--chart-color-2:#000000;--chart-color-3:#7F6400;--chart-color-4:#71549F;--chart-color-5:#007678;--chart-color-6:#CC4000;--chart-color-7:#007653;--chart-color-8:#D22962;--chart-color-9:#595959;--chart-color-10:#236F99;--line-width:2;--fill-opacity:0.4;--text-color:rgba(13, 13, 13, 0.8);--background-color:#FAFAFA;--chart-up-color:#246B3E;--chart-down-color:#B63243;--cross-hair-color:#404040;--grid-vert-line-color:rgba(242, 242, 242, 0.5);--grid-horz-line-color:rgba(242, 242, 242, 0.5);--scale-price-border-color:rgba(242, 242, 242, 0.5);--scale-times-border-color:rgba(242, 242, 242, 0.5)}:host [part=legend]{position:absolute;left:15px;top:15px;z-index:1000;color:var(--text-color);font-size:90%}:host [part=legend] .row{margin:1px 5px}:host [part=legend] .price{margin-right:5px}:host [part=legend] .ohlc{margin-right:2px}:host [part=legend].yaxis-left{left:70px}:host [part=legend].yaxis-right{left:15px}:host [part=legend].horizontal{display:flex;max-width:calc(100% - 75px);flex-wrap:wrap}:host [part=jump-button-container]{display:none;position:absolute;transition:background-color .1s;width:23px;height:23px;color:#0d0d0d;border:1px solid #ccc;box-shadow:0 0 0 0 rgba(0,0,0,.25);border-radius:100%;z-index:1000;cursor:pointer;background-color:#fafafa}:host [part=jump-button-container]:hover{color:#fff;border-color:#1429bd;box-shadow:0 0 0 0 rgba(0,0,0,.55);background-color:#fff}:host [part=jump-button-container]:active{color:#fff;box-shadow:0 0 0 0 rgba(0,0,0,.25);background-color:#fafafa}:host [part=jump-button]{position:relative;display:inline-block;width:5px;height:5px;border-top:2px solid #0d0d0d;border-right:2px solid #0d0d0d;transform:rotate(45deg) skew(0);margin-top:8px;margin-left:7px}:host [part=branding-container]{position:absolute;opacity:.6;bottom:3px;z-index:1000}:host [part=branding-container].left{left:10px}:host [part=branding-container].right{right:10px}:host [part=branding-container].none{top:13px;right:13px}:host [part=branding]{height:22px;width:22px;fill:rgba(13,13,13,.8)}:host [part=jump-button-container],:host [part=jump-button-container]:hover,:host [part=jump-button]{border-color:#8d8d8d}');
+elf.customStyles.define('ef-interactive-chart', ':host{--chart-color-1:#334BFF;--chart-color-2:#000000;--chart-color-3:#7F6400;--chart-color-4:#71549F;--chart-color-5:#007678;--chart-color-6:#CC4000;--chart-color-7:#007653;--chart-color-8:#D22962;--chart-color-9:#595959;--chart-color-10:#236F99;--line-width:2;--fill-opacity:0.4;--text-color:rgba(13, 13, 13, 0.8);--background-color:#FAFAFA;--chart-up-color:#246B3E;--chart-down-color:#B63243;--cross-hair-color:#404040;--grid-vert-line-color:rgba(242, 242, 242, 0.5);--grid-horz-line-color:rgba(242, 242, 242, 0.5);--scale-price-border-color:rgba(242, 242, 242, 0.5);--scale-times-border-color:rgba(242, 242, 242, 0.5)}:host [part=legend]{top:15px;color:var(--text-color);font-size:90%}:host [part=legend] .row{margin:1px 5px}:host [part=legend] .price{margin-right:5px}:host [part=legend] .ohlc{margin-right:2px}:host [part=legend].horizontal{display:flex;max-width:calc(100% - 75px);flex-wrap:wrap}:host [part=jump-button-container]{display:none;position:absolute;transition:background-color .1s;width:23px;height:23px;color:#0d0d0d;border:1px solid #ccc;box-shadow:0 0 0 0 rgba(0,0,0,.25);border-radius:100%;z-index:1000;cursor:pointer;background-color:#fafafa}:host [part=jump-button-container]:hover{color:#fff;border-color:#1429bd;box-shadow:0 0 0 0 rgba(0,0,0,.55);background-color:#fff}:host [part=jump-button-container]:active{color:#fff;box-shadow:0 0 0 0 rgba(0,0,0,.25);background-color:#fafafa}:host [part=jump-button]{position:relative;display:inline-block;width:5px;height:5px;border-top:2px solid #0d0d0d;border-right:2px solid #0d0d0d;transform:rotate(45deg) skew(0);margin-top:8px;margin-left:7px}:host [part=branding-container]{position:absolute;opacity:.6;bottom:3px;z-index:1000}:host [part=branding-container].left{left:10px}:host [part=branding-container].right{right:10px}:host [part=branding-container].none{top:13px;right:13px}:host [part=branding]{height:22px;width:22px;fill:rgba(13,13,13,.8)}:host [part=jump-button-container],:host [part=jump-button-container]:hover,:host [part=jump-button]{border-color:#8d8d8d}');

package/lib/interactive-chart/themes/solar/charcoal/index.js

@@ -1,3 +1,3 @@
 import '@refinitiv-ui/elements/tooltip/themes/solar/charcoal';
 
-elf.customStyles.define('ef-interactive-chart', ':host{--chart-color-1:#FF9933;--chart-color-2:#B10CF2;--chart-color-3:#7DE442;--chart-color-4:#3780BF;--chart-color-5:#FA4C11;--chart-color-6:#FFE433;--chart-color-7:#8C8C8C;--chart-color-8:#5A54FF;--chart-color-9:#E53766;--chart-color-10:#648608;--line-width:2;--fill-opacity:0.4;--text-color:rgba(194, 194, 194, 0.8);--background-color:#1A1A1C;--chart-up-color:#39C46E;--chart-down-color:#F5475B;--cross-hair-color:#E2E2E2;--grid-vert-line-color:rgba(10, 10, 10, 0.5);--grid-horz-line-color:rgba(10, 10, 10, 0.5);--scale-price-border-color:rgba(10, 10, 10, 0.5);--scale-times-border-color:rgba(10, 10, 10, 0.5);--chart-color-1:#FF9933;--chart-color-2:#B10CF2;--chart-color-3:#7DE442;--chart-color-4:#3780BF;--chart-color-5:#FA4C11;--chart-color-6:#FFE433;--chart-color-7:#8C8C8C;--chart-color-8:#5A54FF;--chart-color-9:#E53766;--chart-color-10:#648608;--chart-color-11:#48CBF7;--chart-color-12:#F3478E;--chart-color-13:#508BF7;--chart-color-14:#EFF748;--chart-color-15:#FF4043;--chart-color-16:#A7DB0B;--chart-color-17:#C2C2C2;--chart-color-18:#1578AD;--chart-color-19:#F2B530;--chart-color-20:#297835;--chart-color-21:#7045FF;--chart-color-22:#DD48F7;--chart-color-23:#09A8C0;--chart-color-24:#60E65C;--chart-color-25:#2960A3;--grid-vert-line-color:rgba(194, 194, 194, 0.1);--grid-horz-line-color:rgba(194, 194, 194, 0.1);--scale-price-border-color:rgba(194, 194, 194, 0.1);--scale-times-border-color:rgba(194, 194, 194, 0.1)}:host [part=legend]{position:absolute;left:15px;top:15px;z-index:1000;color:var(--text-color);font-size:90%}:host [part=legend] .row{margin:1px 5px}:host [part=legend] .price{margin-right:5px}:host [part=legend] .ohlc{margin-right:2px}:host [part=legend].yaxis-left{left:70px}:host [part=legend].yaxis-right{left:15px}:host [part=legend].horizontal{display:flex;max-width:calc(100% - 75px);flex-wrap:wrap}:host [part=jump-button-container]{display:none;position:absolute;transition:background-color .1s;width:23px;height:23px;color:#c2c2c2;background-color:#3c3c42;border:1px solid #000;box-shadow:0 0 0 0 rgba(0,0,0,.6);border-radius:100%;z-index:1000;cursor:pointer;background-image:linear-gradient(rgba(255,255,255,.1) 10%,rgba(255,255,255,0) 100%)}:host [part=jump-button-container]:hover{color:#e2e2e2;background-color:#4d4d55;border-color:#000;box-shadow:0 0 0 0 rgba(0,0,0,.9)}:host [part=jump-button-container]:active{background-color:#38383d;color:#c2c2c2;box-shadow:0 0 0 0 rgba(0,0,0,.6);background-image:linear-gradient(rgba(255,255,255,.1) 10%,rgba(255,255,255,0) 100%)}:host [part=jump-button]{position:relative;display:inline-block;width:5px;height:5px;border-top:2px solid #c2c2c2;border-right:2px solid #c2c2c2;transform:rotate(45deg) skew(0);margin-top:8px;margin-left:7px}:host [part=branding-container]{position:absolute;opacity:.6;bottom:3px;z-index:1000}:host [part=branding-container].left{left:10px}:host [part=branding-container].right{right:10px}:host [part=branding-container].none{top:13px;right:13px}:host [part=branding]{height:22px;width:22px;fill:rgba(194,194,194,.8)}:host [part=jump-button-container]:hover [part=jump-button]{border-color:#e2e2e2}');
+elf.customStyles.define('ef-interactive-chart', ':host{--chart-color-1:#FF9933;--chart-color-2:#B10CF2;--chart-color-3:#7DE442;--chart-color-4:#3780BF;--chart-color-5:#FA4C11;--chart-color-6:#FFE433;--chart-color-7:#8C8C8C;--chart-color-8:#5A54FF;--chart-color-9:#E53766;--chart-color-10:#648608;--line-width:2;--fill-opacity:0.4;--text-color:rgba(194, 194, 194, 0.8);--background-color:#1A1A1C;--chart-up-color:#39C46E;--chart-down-color:#F5475B;--cross-hair-color:#E2E2E2;--grid-vert-line-color:rgba(10, 10, 10, 0.5);--grid-horz-line-color:rgba(10, 10, 10, 0.5);--scale-price-border-color:rgba(10, 10, 10, 0.5);--scale-times-border-color:rgba(10, 10, 10, 0.5);--chart-color-1:#FF9933;--chart-color-2:#B10CF2;--chart-color-3:#7DE442;--chart-color-4:#3780BF;--chart-color-5:#FA4C11;--chart-color-6:#FFE433;--chart-color-7:#8C8C8C;--chart-color-8:#5A54FF;--chart-color-9:#E53766;--chart-color-10:#648608;--chart-color-11:#48CBF7;--chart-color-12:#F3478E;--chart-color-13:#508BF7;--chart-color-14:#EFF748;--chart-color-15:#FF4043;--chart-color-16:#A7DB0B;--chart-color-17:#C2C2C2;--chart-color-18:#1578AD;--chart-color-19:#F2B530;--chart-color-20:#297835;--chart-color-21:#7045FF;--chart-color-22:#DD48F7;--chart-color-23:#09A8C0;--chart-color-24:#60E65C;--chart-color-25:#2960A3;--grid-vert-line-color:rgba(194, 194, 194, 0.1);--grid-horz-line-color:rgba(194, 194, 194, 0.1);--scale-price-border-color:rgba(194, 194, 194, 0.1);--scale-times-border-color:rgba(194, 194, 194, 0.1)}:host [part=legend]{top:15px;color:var(--text-color);font-size:90%}:host [part=legend] .row{margin:1px 5px}:host [part=legend] .price{margin-right:5px}:host [part=legend] .ohlc{margin-right:2px}:host [part=legend].horizontal{display:flex;max-width:calc(100% - 75px);flex-wrap:wrap}:host [part=jump-button-container]{display:none;position:absolute;transition:background-color .1s;width:23px;height:23px;color:#c2c2c2;background-color:#3c3c42;border:1px solid #000;box-shadow:0 0 0 0 rgba(0,0,0,.6);border-radius:100%;z-index:1000;cursor:pointer;background-image:linear-gradient(rgba(255,255,255,.1) 10%,rgba(255,255,255,0) 100%)}:host [part=jump-button-container]:hover{color:#e2e2e2;background-color:#4d4d55;border-color:#000;box-shadow:0 0 0 0 rgba(0,0,0,.9)}:host [part=jump-button-container]:active{background-color:#38383d;color:#c2c2c2;box-shadow:0 0 0 0 rgba(0,0,0,.6);background-image:linear-gradient(rgba(255,255,255,.1) 10%,rgba(255,255,255,0) 100%)}:host [part=jump-button]{position:relative;display:inline-block;width:5px;height:5px;border-top:2px solid #c2c2c2;border-right:2px solid #c2c2c2;transform:rotate(45deg) skew(0);margin-top:8px;margin-left:7px}:host [part=branding-container]{position:absolute;opacity:.6;bottom:3px;z-index:1000}:host [part=branding-container].left{left:10px}:host [part=branding-container].right{right:10px}:host [part=branding-container].none{top:13px;right:13px}:host [part=branding]{height:22px;width:22px;fill:rgba(194,194,194,.8)}:host [part=jump-button-container]:hover [part=jump-button]{border-color:#e2e2e2}');

package/lib/interactive-chart/themes/solar/pearl/index.js

@@ -1,3 +1,3 @@
 import '@refinitiv-ui/elements/tooltip/themes/solar/pearl';
 
-elf.customStyles.define('ef-interactive-chart', ':host{--chart-color-1:#EE7600;--chart-color-2:#B10CF2;--chart-color-3:#309054;--chart-color-4:#3780BF;--chart-color-5:#FA4C11;--chart-color-6:#D9B500;--chart-color-7:#8C8C8C;--chart-color-8:#5A54FF;--chart-color-9:#E53766;--chart-color-10:#648608;--line-width:2;--fill-opacity:0.4;--text-color:rgba(72, 72, 72, 0.8);--background-color:#FFFFFF;--chart-up-color:#309054;--chart-down-color:#D94255;--cross-hair-color:#ACAFB5;--grid-vert-line-color:rgba(213, 216, 219, 0.5);--grid-horz-line-color:rgba(213, 216, 219, 0.5);--scale-price-border-color:rgba(213, 216, 219, 0.5);--scale-times-border-color:rgba(213, 216, 219, 0.5);--chart-color-1:#EE7600;--chart-color-2:#B10CF2;--chart-color-3:#309054;--chart-color-4:#3780BF;--chart-color-5:#FA4C11;--chart-color-6:#D9B500;--chart-color-7:#8C8C8C;--chart-color-8:#5A54FF;--chart-color-9:#E53766;--chart-color-10:#648608;--chart-color-11:#40B6DE;--chart-color-12:#F3478E;--chart-color-13:#508BF7;--chart-color-14:#AAB218;--chart-color-15:#FF4043;--chart-color-16:#80A808;--chart-color-17:#707070;--chart-color-18:#1578AC;--chart-color-19:#D9A22B;--chart-color-20:#297835;--chart-color-21:#7045FF;--chart-color-22:#DD48F7;--chart-color-23:#09A8C0;--chart-color-24:#4BB347;--chart-color-25:#2960A3;--grid-vert-line-color:rgba(72, 72, 72, 0.1);--grid-horz-line-color:rgba(72, 72, 72, 0.1);--scale-price-border-color:rgba(72, 72, 72, 0.1);--scale-times-border-color:rgba(72, 72, 72, 0.1)}:host [part=legend]{position:absolute;left:15px;top:15px;z-index:1000;color:var(--text-color);font-size:90%}:host [part=legend] .row{margin:1px 5px}:host [part=legend] .price{margin-right:5px}:host [part=legend] .ohlc{margin-right:2px}:host [part=legend].yaxis-left{left:70px}:host [part=legend].yaxis-right{left:15px}:host [part=legend].horizontal{display:flex;max-width:calc(100% - 75px);flex-wrap:wrap}:host [part=jump-button-container]{display:none;position:absolute;transition:background-color .1s;width:23px;height:23px;color:#505050;background-color:#fafbfc;border:1px solid #a9afba;box-shadow:0 0 0 0 rgba(0,0,0,.3);border-radius:100%;z-index:1000;cursor:pointer;background-image:linear-gradient(rgba(0,0,0,0) 0,rgba(0,0,0,.1) 100%)}:host [part=jump-button-container]:hover{color:#1d1d1d;background-color:#fff;border-color:#a9afba;box-shadow:0 0 0 0 rgba(0,0,0,.6)}:host [part=jump-button-container]:active{background-color:#fff;color:#1d1d1d;box-shadow:0 0 0 0 rgba(0,0,0,.3);background-image:none}:host [part=jump-button]{position:relative;display:inline-block;width:5px;height:5px;border-top:2px solid #505050;border-right:2px solid #505050;transform:rotate(45deg) skew(0);margin-top:8px;margin-left:7px}:host [part=branding-container]{position:absolute;opacity:.6;bottom:3px;z-index:1000}:host [part=branding-container].left{left:10px}:host [part=branding-container].right{right:10px}:host [part=branding-container].none{top:13px;right:13px}:host [part=branding]{height:22px;width:22px;fill:rgba(72,72,72,.8)}:host [part=jump-button-container]:hover [part=jump-button]{border-color:#1d1d1d}');
+elf.customStyles.define('ef-interactive-chart', ':host{--chart-color-1:#EE7600;--chart-color-2:#B10CF2;--chart-color-3:#309054;--chart-color-4:#3780BF;--chart-color-5:#FA4C11;--chart-color-6:#D9B500;--chart-color-7:#8C8C8C;--chart-color-8:#5A54FF;--chart-color-9:#E53766;--chart-color-10:#648608;--line-width:2;--fill-opacity:0.4;--text-color:rgba(72, 72, 72, 0.8);--background-color:#FFFFFF;--chart-up-color:#309054;--chart-down-color:#D94255;--cross-hair-color:#ACAFB5;--grid-vert-line-color:rgba(213, 216, 219, 0.5);--grid-horz-line-color:rgba(213, 216, 219, 0.5);--scale-price-border-color:rgba(213, 216, 219, 0.5);--scale-times-border-color:rgba(213, 216, 219, 0.5);--chart-color-1:#EE7600;--chart-color-2:#B10CF2;--chart-color-3:#309054;--chart-color-4:#3780BF;--chart-color-5:#FA4C11;--chart-color-6:#D9B500;--chart-color-7:#8C8C8C;--chart-color-8:#5A54FF;--chart-color-9:#E53766;--chart-color-10:#648608;--chart-color-11:#40B6DE;--chart-color-12:#F3478E;--chart-color-13:#508BF7;--chart-color-14:#AAB218;--chart-color-15:#FF4043;--chart-color-16:#80A808;--chart-color-17:#707070;--chart-color-18:#1578AC;--chart-color-19:#D9A22B;--chart-color-20:#297835;--chart-color-21:#7045FF;--chart-color-22:#DD48F7;--chart-color-23:#09A8C0;--chart-color-24:#4BB347;--chart-color-25:#2960A3;--grid-vert-line-color:rgba(72, 72, 72, 0.1);--grid-horz-line-color:rgba(72, 72, 72, 0.1);--scale-price-border-color:rgba(72, 72, 72, 0.1);--scale-times-border-color:rgba(72, 72, 72, 0.1)}:host [part=legend]{top:15px;color:var(--text-color);font-size:90%}:host [part=legend] .row{margin:1px 5px}:host [part=legend] .price{margin-right:5px}:host [part=legend] .ohlc{margin-right:2px}:host [part=legend].horizontal{display:flex;max-width:calc(100% - 75px);flex-wrap:wrap}:host [part=jump-button-container]{display:none;position:absolute;transition:background-color .1s;width:23px;height:23px;color:#505050;background-color:#fafbfc;border:1px solid #a9afba;box-shadow:0 0 0 0 rgba(0,0,0,.3);border-radius:100%;z-index:1000;cursor:pointer;background-image:linear-gradient(rgba(0,0,0,0) 0,rgba(0,0,0,.1) 100%)}:host [part=jump-button-container]:hover{color:#1d1d1d;background-color:#fff;border-color:#a9afba;box-shadow:0 0 0 0 rgba(0,0,0,.6)}:host [part=jump-button-container]:active{background-color:#fff;color:#1d1d1d;box-shadow:0 0 0 0 rgba(0,0,0,.3);background-image:none}:host [part=jump-button]{position:relative;display:inline-block;width:5px;height:5px;border-top:2px solid #505050;border-right:2px solid #505050;transform:rotate(45deg) skew(0);margin-top:8px;margin-left:7px}:host [part=branding-container]{position:absolute;opacity:.6;bottom:3px;z-index:1000}:host [part=branding-container].left{left:10px}:host [part=branding-container].right{right:10px}:host [part=branding-container].none{top:13px;right:13px}:host [part=branding]{height:22px;width:22px;fill:rgba(72,72,72,.8)}:host [part=jump-button-container]:hover [part=jump-button]{border-color:#1d1d1d}');

package/lib/item/custom-elements.json

@@ -118,11 +118,6 @@
           "description": "Return true if the item can be highlighted. True if not disabled and type is Text",
           "type": "boolean"
         },
-        {
-          "name": "isTruncated (readonly)",
-          "description": "Getter returning if the label is truncated",
-          "type": "boolean"
-        },
         {
           "name": "value",
           "attribute": "value",

package/lib/item/custom-elements.md

@@ -13,7 +13,6 @@ to create simple menus or navigation panels.
 | `highlightable (readonly)` |               | `boolean`          |         | Return true if the item can be highlighted. True if not disabled and type is Text |
 | `highlighted`              | `highlighted` | `boolean`          | false   | Highlight the item                               |
 | `icon`                     | `icon`        | `string \| null`   | null    | Set the icon name from the ef-icon list          |
-| `isTruncated (readonly)`   |               | `boolean`          |         | Getter returning if the label is truncated       |
 | `label`                    | `label`       | `string \| null`   | null    | The text for the label indicating the meaning of the item.<br />By having both `label` and content, `label` always takes priority |
 | `multiple`                 | `multiple`    | `boolean`          | false   | Is the item part of a multiple selection         |
 | `selected`                 | `selected`    | `boolean`          | false   | Indicates that the item is selected              |

package/lib/item/index.d.ts

@@ -65,9 +65,17 @@ export declare class Item extends ControlElement {
      */
     for: string | null;
     /**
-     * Cache label element
+     * Reference to the label element
      */
-    private labelEl?;
+    private labelRef;
+    /**
+     * Reference to the subLabel element
+     */
+    private subLabelRef;
+    /**
+     * Reference to the slot element
+     */
+    private slotRef;
     /**
      * True, if there is no slotted content
      */
@@ -98,12 +106,34 @@ export declare class Item extends ControlElement {
      * @returns {void}
      */
     private typeChanged;
+    /**
+     * Called after the component is first rendered
+     * @param changedProperties Properties which have changed
+     * @returns {void}
+     */
+    protected firstUpdated(changedProperties: PropertyValues): void;
     /**
      * Invoked before update() to compute values needed during the update.
      * @param changedProperties changed properties
      * @returns {void}
      */
     protected willUpdate(changedProperties: PropertyValues): void;
+    /**
+     * Get Item content
+     * @returns return item content from slot or label and sub-label
+     */
+    private getItemContent;
+    /**
+     * Get element overflown
+     * @param element Target element
+     * @returns return true if element is overflown.
+     */
+    private isItemElementOverflown;
+    /**
+     * Get item overflown
+     * @returns return true if an item is overflown.
+     */
+    private isItemOverflown;
     /**
      * Get icon template if icon attribute is defined
      */
@@ -116,6 +146,10 @@ export declare class Item extends ControlElement {
      * Get label template if it is defined and no slot content present
      */
     private get labelTemplate();
+    /**
+     * Get slot content
+     */
+    private get slotContent();
     /**
      * Get template for `for` attribute.
      * This is usually used with menus when an item needs to reference an element
@@ -132,12 +166,6 @@ export declare class Item extends ControlElement {
      * @returns whether element is highlightable
      */
     get highlightable(): boolean;
-    /**
-     * Getter returning if the label is truncated
-     * @prop {boolean} isTruncated
-     * @returns whether element is truncated or not
-     */
-    get isTruncated(): boolean;
     /**
      * A `TemplateResult` that will be used
      * to render the updated internal template.

package/lib/item/index.js

@@ -2,10 +2,12 @@ import { __decorate } from "tslib";
 import { ControlElement, css, html } from '@refinitiv-ui/core';
 import { customElement } from '@refinitiv-ui/core/decorators/custom-element.js';
 import { property } from '@refinitiv-ui/core/decorators/property.js';
-import { query } from '@refinitiv-ui/core/decorators/query.js';
 import { VERSION } from '../version.js';
 import '../icon/index.js';
 import '../checkbox/index.js';
+import { registerOverflowTooltip } from '../tooltip/index.js';
+import { isElementOverflown } from '@refinitiv-ui/utils/element.js';
+import { createRef, ref } from '@refinitiv-ui/core/directives/ref.js';
 const isAllWhitespaceTextNode = (node) => node.nodeType === document.TEXT_NODE
     && !node.textContent?.trim();
 /**
@@ -59,6 +61,18 @@ let Item = class Item extends ControlElement {
          * Specifies which element an item is bound to
          */
         this.for = null;
+        /**
+         * Reference to the label element
+         */
+        this.labelRef = createRef();
+        /**
+         * Reference to the subLabel element
+         */
+        this.subLabelRef = createRef();
+        /**
+         * Reference to the slot element
+         */
+        this.slotRef = createRef();
         /**
          * True, if there is no slotted content
          */
@@ -144,6 +158,15 @@ let Item = class Item extends ControlElement {
             this.enableFocus();
         }
     }
+    /**
+     * Called after the component is first rendered
+     * @param changedProperties Properties which have changed
+     * @returns {void}
+     */
+    firstUpdated(changedProperties) {
+        super.firstUpdated(changedProperties);
+        registerOverflowTooltip(this, () => this.getItemContent(), () => this.isItemOverflown());
+    }
     /**
      * Invoked before update() to compute values needed during the update.
      * @param changedProperties changed properties
@@ -160,6 +183,40 @@ let Item = class Item extends ControlElement {
             this.selectedChanged();
         }
     }
+    /**
+     * Get Item content
+     * @returns return item content from slot or label and sub-label
+     */
+    getItemContent() {
+        if (this.isSlotEmpty) {
+            let text = '';
+            if (this.label) {
+                text += this.label;
+            }
+            if (this.subLabel) {
+                text += text ? ` (${this.subLabel})` : this.subLabel;
+            }
+            return text;
+        }
+        else {
+            return this.slotContent;
+        }
+    }
+    /**
+     * Get element overflown
+     * @param element Target element
+     * @returns return true if element is overflown.
+     */
+    isItemElementOverflown(element) {
+        return element ? isElementOverflown(element) : false;
+    }
+    /**
+     * Get item overflown
+     * @returns return true if an item is overflown.
+     */
+    isItemOverflown() {
+        return this.isItemElementOverflown(this.labelRef.value) || this.isItemElementOverflown(this.subLabelRef.value);
+    }
     /**
      * Get icon template if icon attribute is defined
      */
@@ -170,13 +227,20 @@ let Item = class Item extends ControlElement {
      * Get subLabel template if it is defined and no slot content present
      */
     get subLabelTemplate() {
-        return this.subLabel && this.isSlotEmpty ? html `<div part="sub-label">${this.subLabel}</div>` : undefined;
+        return html `<div part="sub-label" ${ref(this.subLabelRef)}>${this.subLabel}</div>`;
     }
     /**
      * Get label template if it is defined and no slot content present
      */
     get labelTemplate() {
-        return this.label && this.isSlotEmpty ? html `${this.label}` : undefined;
+        return html `${this.label}`;
+    }
+    /**
+     * Get slot content
+     */
+    get slotContent() {
+        const nodes = this.slotRef.value?.assignedNodes() || [];
+        return nodes.map(node => node.textContent).join(' ').trim();
     }
     /**
      * Get template for `for` attribute.
@@ -201,14 +265,6 @@ let Item = class Item extends ControlElement {
     get highlightable() {
         return !this.disabled && this.type !== 'header' && this.type !== 'divider';
     }
-    /**
-     * Getter returning if the label is truncated
-     * @prop {boolean} isTruncated
-     * @returns whether element is truncated or not
-     */
-    get isTruncated() {
-        return !!(this.labelEl && (this.labelEl.offsetWidth < this.labelEl.scrollWidth));
-    }
     /**
      * A `TemplateResult` that will be used
      * to render the updated internal template.
@@ -221,10 +277,10 @@ let Item = class Item extends ControlElement {
         ${this.multipleTemplate}
         <slot name="left"></slot>
       </div>
-      <div part="center" id="label">
-        ${this.labelTemplate}
-        <slot @slotchange="${this.checkSlotChildren}"></slot>
-        ${this.subLabelTemplate}
+      <div part="center" ${ref(this.labelRef)}>
+        ${this.label && this.isSlotEmpty ? this.labelTemplate : undefined}
+        <slot ${ref(this.slotRef)} @slotchange="${this.checkSlotChildren}"></slot>
+        ${this.subLabel && this.isSlotEmpty ? this.subLabelTemplate : undefined}
       </div>
       <div part="right">
         <slot name="right"></slot>
@@ -257,9 +313,6 @@ __decorate([
 __decorate([
     property({ type: String, reflect: true })
 ], Item.prototype, "for", void 0);
-__decorate([
-    query('#label')
-], Item.prototype, "labelEl", void 0);
 Item = __decorate([
     customElement('ef-item', {
         alias: 'coral-item'

package/lib/version.js

@@ -1 +1 @@
-export const VERSION = '6.1.1';
+export const VERSION = '6.2.1';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@refinitiv-ui/elements",
-  "version": "6.1.1",
+  "version": "6.2.1",
   "description": "Element Framework Elements",
   "author": "Refinitiv",
   "license": "Apache-2.0",
@@ -91,6 +91,11 @@
     "./color-dialog/themes/halo/light": "./lib/color-dialog/themes/halo/light/index.js",
     "./color-dialog/themes/solar/charcoal": "./lib/color-dialog/themes/solar/charcoal/index.js",
     "./color-dialog/themes/solar/pearl": "./lib/color-dialog/themes/solar/pearl/index.js",
+    "./color-picker": "./lib/color-picker/index.js",
+    "./color-picker/themes/halo/dark": "./lib/color-picker/themes/halo/dark/index.js",
+    "./color-picker/themes/halo/light": "./lib/color-picker/themes/halo/light/index.js",
+    "./color-picker/themes/solar/charcoal": "./lib/color-picker/themes/solar/charcoal/index.js",
+    "./color-picker/themes/solar/pearl": "./lib/color-picker/themes/solar/pearl/index.js",
     "./combo-box": "./lib/combo-box/index.js",
     "./combo-box/themes/halo/dark": "./lib/combo-box/themes/halo/dark/index.js",
     "./combo-box/themes/halo/light": "./lib/combo-box/themes/halo/light/index.js",
@@ -328,34 +333,34 @@
   },
   "dependencies": {
     "@refinitiv-ui/browser-sparkline": "1.1.8",
-    "@refinitiv-ui/halo-theme": "^6.1.4",
-    "@refinitiv-ui/solar-theme": "^6.0.5",
+    "@refinitiv-ui/halo-theme": "^6.2.0",
+    "@refinitiv-ui/solar-theme": "^6.1.0",
     "@types/chart.js": "^2.9.31",
     "chart.js": "~2.9.4",
     "d3-interpolate": "^3.0.1",
     "date-fns": "^2.22.1",
-    "lightweight-charts": "^3.3.0",
+    "lightweight-charts": "^3.8.0",
     "tslib": "^2.3.1"
   },
   "devDependencies": {
-    "@refinitiv-ui/core": "^6.0.5",
-    "@refinitiv-ui/demo-block": "^6.0.6",
-    "@refinitiv-ui/i18n": "^6.0.4",
-    "@refinitiv-ui/phrasebook": "^6.1.3",
+    "@refinitiv-ui/core": "^6.0.7",
+    "@refinitiv-ui/demo-block": "^6.0.8",
+    "@refinitiv-ui/i18n": "^6.0.6",
+    "@refinitiv-ui/phrasebook": "^6.2.0",
     "@refinitiv-ui/test-helpers": "^6.0.4",
-    "@refinitiv-ui/translate": "^6.0.5",
-    "@refinitiv-ui/utils": "^6.0.4",
+    "@refinitiv-ui/translate": "^6.0.7",
+    "@refinitiv-ui/utils": "^6.1.1",
     "@types/d3-interpolate": "^3.0.1"
   },
   "peerDependencies": {
-    "@refinitiv-ui/core": "^6.0.5",
-    "@refinitiv-ui/i18n": "^6.0.4",
-    "@refinitiv-ui/phrasebook": "^6.1.3",
-    "@refinitiv-ui/translate": "^6.0.5",
-    "@refinitiv-ui/utils": "^6.0.4"
+    "@refinitiv-ui/core": "^6.0.7",
+    "@refinitiv-ui/i18n": "^6.0.6",
+    "@refinitiv-ui/phrasebook": "^6.2.0",
+    "@refinitiv-ui/translate": "^6.0.7",
+    "@refinitiv-ui/utils": "^6.1.1"
   },
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "edcc6dfb5f7def08c7cf6395487cf53e63d65dae"
+  "gitHead": "57da6d58ff28705699d54ab9e9bc2ea76c563216"
 }