@refinitiv-ui/elements 0.0.0-dev.2589386127.1 → 0.0.0-dev.2997969095.1

package/CHANGELOG.md

@@ -3,6 +3,70 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [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)
+
+
+### Bug Fixes
+
+* **datetime-picker:** parse invalid value to date object ([#422](https://github.com/Refinitiv/refinitiv-ui/issues/422)) ([dd86b73](https://github.com/Refinitiv/refinitiv-ui/commit/dd86b73fecd03518d2dae78174b91b0ef50fc913))
+* **overlay:** Tab does not work with slotted elements ([16f4b60](https://github.com/Refinitiv/refinitiv-ui/commit/16f4b60e9b840d3b7d225f3d61f15e017dc17855))
+* **radio-button:** check-changed is not fired on arrow keys ([77d7407](https://github.com/Refinitiv/refinitiv-ui/commit/77d7407883ba77e7b07bdaa8483fc49d35c76c14))
+
+
+### Features
+
+* **interactive-chart:** add disabledLegend option to hide data legend ([#421](https://github.com/Refinitiv/refinitiv-ui/issues/421)) ([32a6d7b](https://github.com/Refinitiv/refinitiv-ui/commit/32a6d7b1889597a7ae804edbb08fc95fc5c5a04e))
+
+
+
+
+
+## [6.0.4](https://github.com/Refinitiv/refinitiv-ui/compare/@refinitiv-ui/elements@6.0.3...@refinitiv-ui/elements@6.0.4) (2022-08-02)
+
+
+### Bug Fixes
+
+* **calendar:** day cell selected style not work with disabled state ([#410](https://github.com/Refinitiv/refinitiv-ui/issues/410)) ([1d9c931](https://github.com/Refinitiv/refinitiv-ui/commit/1d9c931b4d625b93c6fd60b780060ff2f03d9fc9))
+* **interactive-chart:** show dash text when legend hided ([#402](https://github.com/Refinitiv/refinitiv-ui/issues/402)) ([93631ca](https://github.com/Refinitiv/refinitiv-ui/commit/93631cac4db0623f05c333b53f67728ace953039))
+* **tab-bar:** notify value change event on pressing an arrow key ([#398](https://github.com/Refinitiv/refinitiv-ui/issues/398)) ([e55d152](https://github.com/Refinitiv/refinitiv-ui/commit/e55d152491b97c8763dc628ef7d1c013e4c3f01a))
+
+
+
+
+
+## [6.0.3](https://github.com/Refinitiv/refinitiv-ui/compare/@refinitiv-ui/elements@6.0.2...@refinitiv-ui/elements@6.0.3) (2022-07-20)
+
+**Note:** Version bump only for package @refinitiv-ui/elements
+
+
+
+
+
+## [6.0.2](https://github.com/Refinitiv/refinitiv-ui/compare/@refinitiv-ui/elements@6.0.1...@refinitiv-ui/elements@6.0.2) (2022-07-19)
+
+
+### Bug Fixes
+
+* **accordion:** The element should interact only with its direct children ([#378](https://github.com/Refinitiv/refinitiv-ui/issues/378)) ([f8e11d3](https://github.com/Refinitiv/refinitiv-ui/commit/f8e11d391839cb1e53aad3ec2682a089766851ff))
+* **list:** item should not receive focus when click ([#272](https://github.com/Refinitiv/refinitiv-ui/issues/272)) ([e2293e3](https://github.com/Refinitiv/refinitiv-ui/commit/e2293e37126a446d5c1d16be1e5eb503425534f3))
+* **tab-bar:** resize callback is not fired when a new tab has been added ([#389](https://github.com/Refinitiv/refinitiv-ui/issues/389)) ([13408e1](https://github.com/Refinitiv/refinitiv-ui/commit/13408e15302a19cd614fdd5f1b4af9be5f1881bd))
+* use `setAttribute` instead of `AriaMixins`  for aria attributes ([#327](https://github.com/Refinitiv/refinitiv-ui/issues/327)) ([09f91fa](https://github.com/Refinitiv/refinitiv-ui/commit/09f91fafdef57fa26722ccf0e19f586833405cbb))
+
+
+
+
+
 ## [6.0.1](https://github.com/Refinitiv/refinitiv-ui/compare/@refinitiv-ui/elements@6.0.0...@refinitiv-ui/elements@6.0.1) (2022-06-20)
 
 

package/lib/calendar/index.js

@@ -156,7 +156,7 @@ let Calendar = class Calendar extends ControlElement {
       [part~=cell-content]:not([tabindex]) {
         pointer-events: none;
       }
-      [part~=selection] {
+      [part~=selectable] {
         cursor: pointer;
       }
     `;
@@ -307,7 +307,7 @@ let Calendar = class Calendar extends ControlElement {
      * @returns button HTML date button element or null
      */
     getDateButtonByIndex(index) {
-        const elements = Array.from(this.renderRoot.querySelectorAll('[part~=cell] > [part~=selection]'));
+        const elements = Array.from(this.renderRoot.querySelectorAll('[part~=cell] > [part~=selectable]'));
         return elements.find((element) => this.isDateButton(element) && String(element.index) === String(index));
     }
     /**
@@ -315,7 +315,7 @@ let Calendar = class Calendar extends ControlElement {
      * @returns button HTML date button element or null
      */
     get activeDateButton() {
-        return this.renderRoot.querySelector('[part~=cell][active] > [part~=selection]');
+        return this.renderRoot.querySelector('[part~=cell][active] > [part~=selectable]');
     }
     /**
      * Return true if passed target is HTML
@@ -1118,7 +1118,8 @@ let Calendar = class Calendar extends ControlElement {
      * @returns template result
      */
     renderCell(cell) {
-        const isSelectable = cell.value !== undefined && !cell.disabled;
+        const isSelection = cell.value !== undefined;
+        const isSelectable = isSelection && !cell.disabled;
         return html `<div
       role="gridcell"
       part="cell ${cell.view}"
@@ -1140,7 +1141,7 @@ let Calendar = class Calendar extends ControlElement {
             value: parse(cell.value),
             view: this.renderView
         }) : undefined)}"
-             part="cell-content${isSelectable ? ' selection' : ''}"
+             part="cell-content${isSelection ? ' selection' : ''}${isSelectable ? ' selectable' : ''}"
              .value=${cell.value}
              .index=${cell.index}>${cell.text}</div>
     </div>`;

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

@@ -1,3 +1,3 @@
 import '@refinitiv-ui/elements/button/themes/halo/dark';
 
-elf.customStyles.define('ef-calendar', ':host{font-style:normal;font-variant:normal;font-weight:400;line-height:normal;text-align:left;text-indent:0;text-shadow:none;text-transform:none;white-space:normal;word-break:normal;word-spacing:normal;word-wrap:normal;outline:0;font-size:12rem;color:#ccc;min-width:196px;-webkit-user-select:none;-moz-user-select:none;user-select:none;background:#262626;padding:4px 3px}:host [part=navigation]{padding-bottom:3px}:host [part=btn-next],:host [part=btn-prev],:host [part=btn-view]{margin:0}:host [part=btn-view]{background:0 0;margin-left:16px;border:none;color:inherit;padding:0}:host [part=btn-view]:hover,:host [part=btn-view][focused=visible]{opacity:.8}:host [part=table]{width:100%;background:#262626}:host [part~=row]:not(:first-of-type) [part~=cell] [part~=cell-content]{top:1px}:host [part~=day-name-row]{background-color:#333}:host [part~=cell][disabled]{opacity:.4}:host [part~=cell][today]{color:#fff}:host [part~=cell][today] [part~=selection]{background:#404040}:host [part~=cell]:not([selected]):not([range]):not([disabled])[idle] [part~=selection]{opacity:.6}:host [part~=cell]:not([today]):not([range]) [part~=selection]:hover{color:#fff}:host [part~=cell]:not(:active) [part~=selection]:hover{border-color:#1429bd}:host [part~=cell]:not([today]):not([range]):not(:active) [part~=selection]:hover,:host [part~=cell][today][selected] [part~=selection]:hover{background:#1429bd}:host [part~=cell]:not([selected]):not([range]):not([today]) [part~=selection]:hover{background:#1429bd}:host [part~=cell]:not([selected]):not([range]):not([today]):not(:active) [part~=selection]:hover{border-color:#1429bd}:host [part~=cell]:not([selected]):not([range]):not([today]):active [part~=selection]{color:#fff;background-color:#0f1e8a}:host [part~=cell][range]:not(:active) [part~=selection]:hover,:host [part~=cell][selected]:not(:active) [part~=selection]:hover,:host [part~=cell][today]:not(:active) [part~=selection]:hover{border-color:#1429bd}:host [part~=cell][range]:active [part~=selection],:host [part~=cell][selected]:active [part~=selection],:host [part~=cell][today]:active [part~=selection]{color:#fff;background-color:#0f1e8a}:host [part~=cell][range] [part~=selection]{background:rgba(51,75,255,.2)}:host [part~=cell][range][today]{color:#fff}:host [part~=cell][selected]{color:#fff}:host [part~=cell][selected] [part~=selection]{background:#334bff}:host [part~=cell]:not(:first-of-type) [part~=cell-content]{left:1px}:host [part~=day-name]{color:#999;font-weight:600}:host [part~=day-name] [part~=cell-content]{background-color:#1a1a1a}:host [part~=cell-content]{background:#0d0d0d;top:0;bottom:0;right:0;left:0}:host [part~=selection]{outline:0;border:1px solid #0d0d0d}:host([focused=visible]) [part~=cell] [part~=selection]:focus{outline:#1429bd solid 1px}:host([disabled]){opacity:.4}');
+elf.customStyles.define('ef-calendar', ':host{font-style:normal;font-variant:normal;font-weight:400;line-height:normal;text-align:left;text-indent:0;text-shadow:none;text-transform:none;white-space:normal;word-break:normal;word-spacing:normal;word-wrap:normal;outline:0;font-size:12rem;color:#ccc;min-width:196px;-webkit-user-select:none;-moz-user-select:none;user-select:none;background:#262626;padding:4px 3px}:host [part=navigation]{padding-bottom:3px}:host [part=btn-next],:host [part=btn-prev],:host [part=btn-view]{margin:0}:host [part=btn-view]{background:0 0;margin-left:16px;border:none;color:inherit;padding:0}:host [part=btn-view]:hover,:host [part=btn-view][focused=visible]{opacity:.8}:host [part=table]{width:100%;background:#262626}:host [part~=row]:not(:first-of-type) [part~=cell] [part~=cell-content]{top:1px}:host [part~=day-name-row]{background-color:#333}:host [part~=cell][disabled]{opacity:.4}:host [part~=cell][today]{color:#fff}:host [part~=cell][today] [part~=selection]{background:#404040}:host [part~=cell]:not([selected]):not([range]):not([disabled])[idle] [part~=selection]{opacity:.6}:host [part~=cell]:not([today]):not([range]) [part~=selection]:hover{color:#fff}:host [part~=cell]:not(:active) [part~=selection]:hover{border-color:#1429bd}:host [part~=cell]:not([today]):not([range]):not(:active) [part~=selection]:hover,:host [part~=cell][today][selected] [part~=selection]:hover{background:#1429bd}:host [part~=cell]:not([selected]):not([range]):not([today]) [part~=selection]:hover{background:#1429bd}:host [part~=cell]:not([selected]):not([range]):not([today]):not(:active) [part~=selection]:hover{border-color:#1429bd}:host [part~=cell]:not([selected]):not([range]):not([today]):not([disabled]):active [part~=selection]{color:#fff;background-color:#0f1e8a}:host [part~=cell][range]:not(:active) [part~=selection]:hover,:host [part~=cell][selected]:not(:active) [part~=selection]:hover,:host [part~=cell][today]:not(:active) [part~=selection]:hover{border-color:#1429bd}:host [part~=cell][range]:not([disabled]):active [part~=selection],:host [part~=cell][selected]:not([disabled]):active [part~=selection],:host [part~=cell][today]:not([disabled]):active [part~=selection]{color:#fff;background-color:#0f1e8a}:host [part~=cell][range] [part~=selection]{background:rgba(51,75,255,.2)}:host [part~=cell][range][today]{color:#fff}:host [part~=cell][selected]{color:#fff}:host [part~=cell][selected] [part~=selection]{background:#334bff}:host [part~=cell]:not(:first-of-type) [part~=cell-content]{left:1px}:host [part~=day-name]{color:#999;font-weight:600}:host [part~=day-name] [part~=cell-content]{background-color:#1a1a1a}:host [part~=cell-content]{background:#0d0d0d;top:0;bottom:0;right:0;left:0}:host [part~=selection]{outline:0;border:1px solid #0d0d0d}:host([focused=visible]) [part~=cell] [part~=selection]:focus{outline:#1429bd solid 1px}:host([disabled]){opacity:.4}');

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

@@ -1,3 +1,3 @@
 import '@refinitiv-ui/elements/button/themes/halo/light';
 
-elf.customStyles.define('ef-calendar', ':host{font-style:normal;font-variant:normal;font-weight:400;line-height:normal;text-align:left;text-indent:0;text-shadow:none;text-transform:none;white-space:normal;word-break:normal;word-spacing:normal;word-wrap:normal;outline:0;font-size:12rem;color:#0d0d0d;min-width:196px;-webkit-user-select:none;-moz-user-select:none;user-select:none;background:#f2f2f2;padding:4px 3px}:host [part=navigation]{padding-bottom:3px}:host [part=btn-next],:host [part=btn-prev],:host [part=btn-view]{margin:0}:host [part=btn-next]:not(:hover):not(:focus):not(:active),:host [part=btn-prev]:not(:hover):not(:focus):not(:active){color:#595959}:host [part=btn-view]{background:0 0;margin-left:16px;border:none;color:inherit;padding:0}:host [part=btn-view]:hover,:host [part=btn-view][focused=visible]{opacity:.8}:host [part=table]{width:100%;background:#e6e6e6}:host [part~=row]:not(:first-of-type) [part~=cell] [part~=cell-content]{top:1px}:host [part~=day-name-row]{background-color:#e6e6e6}:host [part~=cell][disabled]{opacity:.4}:host [part~=cell][today]{color:#0d0d0d}:host [part~=cell][today] [part~=selection]{background:#d9d9d9}:host [part~=cell]:not([selected]):not([range]):not([disabled])[idle] [part~=selection]{opacity:.6}:host [part~=cell]:not([today]):not([range]) [part~=selection]:hover{color:#fff}:host [part~=cell]:not(:active) [part~=selection]:hover{border-color:#1429bd}:host [part~=cell]:not([today]):not([range]):not(:active) [part~=selection]:hover,:host [part~=cell][today][selected] [part~=selection]:hover{background:#1429bd}:host [part~=cell]:not([selected]):not([range]):not([today]) [part~=selection]:hover{background:#1429bd}:host [part~=cell]:not([selected]):not([range]):not([today]):not(:active) [part~=selection]:hover{border-color:#1429bd}:host [part~=cell]:not([selected]):not([range]):not([today]):active [part~=selection]{color:#fff;background-color:#0f1e8a}:host [part~=cell][range]:not(:active) [part~=selection]:hover,:host [part~=cell][selected]:not(:active) [part~=selection]:hover,:host [part~=cell][today]:not(:active) [part~=selection]:hover{border-color:#1429bd}:host [part~=cell][range]:active [part~=selection],:host [part~=cell][selected]:active [part~=selection],:host [part~=cell][today]:active [part~=selection]{color:#fff;background-color:#0f1e8a}:host [part~=cell][range] [part~=selection]{background:rgba(51,75,255,.2)}:host [part~=cell][range][today]{color:#fff}:host [part~=cell][selected]{color:#fff}:host [part~=cell][selected] [part~=selection]{background:#334bff}:host [part~=cell]:not(:first-of-type) [part~=cell-content]{left:1px}:host [part~=day-name]{color:#737373;font-weight:600}:host [part~=day-name] [part~=cell-content]{background-color:#fafafa}:host [part~=cell-content]{background:#fff;top:0;bottom:0;right:0;left:0}:host [part~=selection]{outline:0;border:1px solid #fff}:host([focused=visible]) [part~=cell] [part~=selection]:focus{outline:#1429bd solid 1px}:host([disabled]){opacity:.4}');
+elf.customStyles.define('ef-calendar', ':host{font-style:normal;font-variant:normal;font-weight:400;line-height:normal;text-align:left;text-indent:0;text-shadow:none;text-transform:none;white-space:normal;word-break:normal;word-spacing:normal;word-wrap:normal;outline:0;font-size:12rem;color:#0d0d0d;min-width:196px;-webkit-user-select:none;-moz-user-select:none;user-select:none;background:#f2f2f2;padding:4px 3px}:host [part=navigation]{padding-bottom:3px}:host [part=btn-next],:host [part=btn-prev],:host [part=btn-view]{margin:0}:host [part=btn-next]:not(:hover):not(:focus):not(:active),:host [part=btn-prev]:not(:hover):not(:focus):not(:active){color:#595959}:host [part=btn-view]{background:0 0;margin-left:16px;border:none;color:inherit;padding:0}:host [part=btn-view]:hover,:host [part=btn-view][focused=visible]{opacity:.8}:host [part=table]{width:100%;background:#e6e6e6}:host [part~=row]:not(:first-of-type) [part~=cell] [part~=cell-content]{top:1px}:host [part~=day-name-row]{background-color:#e6e6e6}:host [part~=cell][disabled]{opacity:.4}:host [part~=cell][today]{color:#0d0d0d}:host [part~=cell][today] [part~=selection]{background:#d9d9d9}:host [part~=cell]:not([selected]):not([range]):not([disabled])[idle] [part~=selection]{opacity:.6}:host [part~=cell]:not([today]):not([range]) [part~=selection]:hover{color:#fff}:host [part~=cell]:not(:active) [part~=selection]:hover{border-color:#1429bd}:host [part~=cell]:not([today]):not([range]):not(:active) [part~=selection]:hover,:host [part~=cell][today][selected] [part~=selection]:hover{background:#1429bd}:host [part~=cell]:not([selected]):not([range]):not([today]) [part~=selection]:hover{background:#1429bd}:host [part~=cell]:not([selected]):not([range]):not([today]):not(:active) [part~=selection]:hover{border-color:#1429bd}:host [part~=cell]:not([selected]):not([range]):not([today]):not([disabled]):active [part~=selection]{color:#fff;background-color:#0f1e8a}:host [part~=cell][range]:not(:active) [part~=selection]:hover,:host [part~=cell][selected]:not(:active) [part~=selection]:hover,:host [part~=cell][today]:not(:active) [part~=selection]:hover{border-color:#1429bd}:host [part~=cell][range]:not([disabled]):active [part~=selection],:host [part~=cell][selected]:not([disabled]):active [part~=selection],:host [part~=cell][today]:not([disabled]):active [part~=selection]{color:#fff;background-color:#0f1e8a}:host [part~=cell][range] [part~=selection]{background:rgba(51,75,255,.2)}:host [part~=cell][range][today]{color:#fff}:host [part~=cell][selected]{color:#fff}:host [part~=cell][selected] [part~=selection]{background:#334bff}:host [part~=cell]:not(:first-of-type) [part~=cell-content]{left:1px}:host [part~=day-name]{color:#737373;font-weight:600}:host [part~=day-name] [part~=cell-content]{background-color:#fafafa}:host [part~=cell-content]{background:#fff;top:0;bottom:0;right:0;left:0}:host [part~=selection]{outline:0;border:1px solid #fff}:host([focused=visible]) [part~=cell] [part~=selection]:focus{outline:#1429bd solid 1px}:host([disabled]){opacity:.4}');

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 };