@refinitiv-ui/elements 6.1.0 → 6.2.0

package/CHANGELOG.md

@@ -3,6 +3,36 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [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)
+
+
+### Bug Fixes
+
+* **combo-box:** incorrect popup logic in some scenarios ([159eb53](https://github.com/Refinitiv/refinitiv-ui/commit/159eb53c7bec583c59de4dfac2542e67c840b2fc))
+
+
+
+
+
 # [6.1.0](https://github.com/Refinitiv/refinitiv-ui/compare/@refinitiv-ui/elements@6.0.4...@refinitiv-ui/elements@6.1.0) (2022-08-16)
 
 

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/combo-box/index.js

@@ -802,7 +802,10 @@ let ComboBox = class ComboBox extends FormFieldElement {
             this.freeTextValue = inputText;
             this.notifyPropertyChange('value', inputText);
         }
-        this.setOpened(true);
+        // The popup can only be opened if input element has focus
+        if (this.shadowRoot && this.shadowRoot.activeElement === this.inputElement) {
+            this.setOpened(true);
+        }
     }
     /**
      * Handle list value changed

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'