@refinitiv-ui/elements 5.5.0 → 5.8.1

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

@@ -0,0 +1,39 @@
+# ef-color-dialog
+
+Displays a colour picker dialog,
+for selecting a predefined range of colours.
+
+## Attributes
+
+| Attribute              | Type                  | Default | Description                                      |
+|------------------------|-----------------------|---------|--------------------------------------------------|
+| `no-cancel-on-esc-key` | `boolean`             | false   | Prevents dialog to close when user presses ESC key |
+| `position-target`      | `string \| undefined` |         | Set position of dialog i.e. `top`, `right`, `left`, `bottom`, `center` or combination of theme e.g. `top right`. |
+
+## Properties
+
+| Property                 | Attribute              | Type                  | Default | Description                                      |
+|--------------------------|------------------------|-----------------------|---------|--------------------------------------------------|
+| `allowNocolor`           | `allow-nocolor`        | `boolean`             | false   | Set the palettes to activate no-color option     |
+| `blue`                   | `blue`                 | `string`              | ""      | Blue value from 0 to 255                         |
+| `draggable`              |                        | `boolean`             | true    | False to make the dialog not draggable.          |
+| `green`                  | `green`                | `string`              | ""      | Green value from 0 to 255                        |
+| `header`                 | `header`               | `string \| null`      | null    | Set Header/Title of the color dialog             |
+| `hex`                    | `hex`                  | `string`              | ""      | Value of hex without # sign, supports both 3-digits shorthand hex and regular 6-digits hex |
+| `noCancelOnEscKey`       | `no-cancel-on-esc-key` | `boolean`             | false   | Prevents dialog to close when user presses ESC key |
+| `noCancelOnOutsideClick` |                        | `boolean`             | true    | Prevents dialog to close when user clicks outside the dialog. |
+| `opened`                 | `opened`               | `boolean`             | false   | Set dialog to open                               |
+| `positionTarget`         | `position-target`      | `string \| undefined` |         | Set position of dialog i.e. `top`, `right`, `left`, `bottom`, `center` or combination of theme e.g. `top right`. |
+| `red`                    | `red`                  | `string`              | ""      | Red value from 0 to 255                          |
+| `value`                  | `value`                | `string`              | ""      | Value of selected color from color dialog will be written here as hex value<br />e.g. "#00f" or "#0000ff" |
+| `withBackdrop`           |                        | `boolean`             | true    | False to hide backdrop.                          |
+| `withShadow`             |                        | `boolean`             | true    | False to remove shadow for dialog component.     |
+| `x`                      | `x`                    | `string \| undefined` |         | Set a specific x coordinate of dialog            |
+| `y`                      | `y`                    | `string \| undefined` |         | Set a specific y coordinate of dialog            |
+
+## Events
+
+| Event            | Description                               |
+|------------------|-------------------------------------------|
+| `opened-changed` | Fired when the `opened` property changes. |
+| `value-changed`  | Fired when the `value` property changes.  |

package/lib/color-dialog/elements/color-palettes.d.ts

@@ -1,6 +1,6 @@
 import { JSXInterface } from '../../jsx';
-import { TemplateResult, CSSResult, PropertyValues } from '@refinitiv-ui/core';
-import { Palettes } from './palettes';
+import { TemplateResult, CSSResultGroup, PropertyValues } from '@refinitiv-ui/core';
+import { Palettes } from './palettes.js';
 /**
  * Component that allows user to select
  * any colours by tapping or dragging
@@ -12,12 +12,12 @@ export declare class ColorPalettes extends Palettes {
      */
     static get version(): string;
     /**
-     * A `CSSResult` that will be used
+     * A `CSSResultGroup` that will be used
      * to style the host, slotted children
      * and the internal template of the element.
-     * @return {CSSResult | CSSResult[]} CSS template
+     * @return CSS template
      */
-    static get styles(): CSSResult | CSSResult[];
+    static get styles(): CSSResultGroup;
     /**
      * create color items template from COLOR_ITEMS array
      * @return color items template

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

@@ -1,13 +1,9 @@
-var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
-    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
-    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
-    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
-    return c > 3 && r && Object.defineProperty(target, key, r), r;
-};
-import { html, css, customElement, svg } from '@refinitiv-ui/core';
-import { Palettes } from './palettes';
-import { COLOR_ITEMS } from '../helpers/color-helpers';
-import { VERSION } from '../../';
+import { __decorate } from "tslib";
+import { html, css, svg } from '@refinitiv-ui/core';
+import { customElement } from '@refinitiv-ui/core/lib/decorators/custom-element.js';
+import { VERSION } from '../../version.js';
+import { Palettes } from './palettes.js';
+import { COLOR_ITEMS } from '../helpers/color-helpers.js';
 /**
  * Component that allows user to select
  * any colours by tapping or dragging
@@ -21,10 +17,10 @@ let ColorPalettes = class ColorPalettes extends Palettes {
         return VERSION;
     }
     /**
-     * A `CSSResult` that will be used
+     * A `CSSResultGroup` that will be used
      * to style the host, slotted children
      * and the internal template of the element.
-     * @return {CSSResult | CSSResult[]} CSS template
+     * @return CSS template
      */
     static get styles() {
         return css `

package/lib/color-dialog/elements/grayscale-palettes.d.ts

@@ -1,6 +1,6 @@
 import { JSXInterface } from '../../jsx';
-import { TemplateResult, CSSResult, PropertyValues } from '@refinitiv-ui/core';
-import { Palettes } from './palettes';
+import { TemplateResult, CSSResultGroup, PropertyValues } from '@refinitiv-ui/core';
+import { Palettes } from './palettes.js';
 /**
  * Component that allows user to select any
  * grayscale color by tapping or dragging
@@ -12,12 +12,12 @@ export declare class GrayscalePalettes extends Palettes {
      */
     static get version(): string;
     /**
-     * A `CSSResult` that will be used
+     * A `CSSResultGroup` that will be used
      * to style the host, slotted children
      * and the internal template of the element.
-     * @return {CSSResult | CSSResult[]} CSS template
+     * @return CSS template
      */
-    static get styles(): CSSResult | CSSResult[];
+    static get styles(): CSSResultGroup;
     /**
      * Set the palettes to activate no-color option
      */

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

@@ -1,13 +1,10 @@
-var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
-    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
-    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
-    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
-    return c > 3 && r && Object.defineProperty(target, key, r), r;
-};
-import { html, css, property, customElement, svg } from '@refinitiv-ui/core';
-import { Palettes } from './palettes';
-import { GRAYSCALE_ITEMS, NOCOLOR_POINTS } from '../helpers/color-helpers';
-import { VERSION } from '../../';
+import { __decorate } from "tslib";
+import { html, css, svg } from '@refinitiv-ui/core';
+import { customElement } from '@refinitiv-ui/core/lib/decorators/custom-element.js';
+import { property } from '@refinitiv-ui/core/lib/decorators/property.js';
+import { VERSION } from '../../version.js';
+import { Palettes } from './palettes.js';
+import { GRAYSCALE_ITEMS, NOCOLOR_POINTS } from '../helpers/color-helpers.js';
 /**
  * Component that allows user to select any
  * grayscale color by tapping or dragging
@@ -28,10 +25,10 @@ let GrayscalePalettes = class GrayscalePalettes extends Palettes {
         return VERSION;
     }
     /**
-     * A `CSSResult` that will be used
+     * A `CSSResultGroup` that will be used
      * to style the host, slotted children
      * and the internal template of the element.
-     * @return {CSSResult | CSSResult[]} CSS template
+     * @return CSS template
      */
     static get styles() {
         return css `

package/lib/color-dialog/elements/palettes.d.ts

@@ -36,19 +36,19 @@ export declare class Palettes extends BasicElement {
      * @param event mouse event
      * @return {void}
      */
-    protected onTapItem: (event: MouseEvent) => void;
+    protected onTapItem(event: MouseEvent): void;
     /**
      * Update color value when drag on color item
      * @param event mouse event
      * @return {void}
      */
-    protected onMousemove: (event: MouseEvent) => void;
+    protected onMousemove(event: MouseEvent): void;
     /**
      * Update color value when drag on color item in mobile device
      * @param event touch event
      * @return {void}
      */
-    protected onTouchmove: (event: TouchEvent) => void;
+    protected onTouchmove(event: TouchEvent): void;
     /**
      * Update color value and fired value-changed event
      * @param element target element to get value

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

@@ -1,13 +1,10 @@
-var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
-    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
-    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
-    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
-    return c > 3 && r && Object.defineProperty(target, key, r), r;
-};
-import { BasicElement, property, svg, query } from '@refinitiv-ui/core';
-import { VERSION } from '../../';
-import { rgb } from '@refinitiv-ui/utils';
-import { isHex } from '../helpers/color-helpers';
+import { __decorate } from "tslib";
+import { BasicElement, svg } from '@refinitiv-ui/core';
+import { property } from '@refinitiv-ui/core/lib/decorators/property.js';
+import { query } from '@refinitiv-ui/core/lib/decorators/query.js';
+import { VERSION } from '../../version.js';
+import { rgb } from '@refinitiv-ui/utils/lib/color.js';
+import { isHex } from '../helpers/color-helpers.js';
 /**
  * Element base class usually used
  * for creating palettes elements.
@@ -19,43 +16,6 @@ export class Palettes extends BasicElement {
          * Color value in hex
          */
         this.value = '';
-        /**
-         * Update color value when tab on color item
-         * @param event mouse event
-         * @return {void}
-         */
-        this.onTapItem = (event) => {
-            const polygonElement = event.target;
-            this.updateValue(polygonElement);
-        };
-        /**
-         * Update color value when drag on color item
-         * @param event mouse event
-         * @return {void}
-         */
-        this.onMousemove = (event) => {
-            const polygonElement = event.target;
-            let mouseButton = event.buttons;
-            if (mouseButton === undefined) { // buttons property is not supported in safari
-                mouseButton = event.which;
-            }
-            if (mouseButton !== 1) {
-                return;
-            }
-            // only update when user click and drag on color item
-            this.updateValue(polygonElement);
-        };
-        /**
-         * Update color value when drag on color item in mobile device
-         * @param event touch event
-         * @return {void}
-         */
-        this.onTouchmove = (event) => {
-            var _a;
-            const touchOffsets = event.changedTouches[0];
-            const realTarget = (_a = this.shadowRoot) === null || _a === void 0 ? void 0 : _a.elementFromPoint(touchOffsets.clientX, touchOffsets.clientY);
-            this.updateValue(realTarget);
-        };
     }
     /**
      * Element version number
@@ -97,6 +57,48 @@ export class Palettes extends BasicElement {
             this.colorSelector.setAttribute('points', points);
         }
     }
+    /**
+     * Update color value when tab on color item
+     * @param event mouse event
+     * @return {void}
+     */
+    onTapItem(event) {
+        const polygonElement = event.target;
+        this.updateValue(polygonElement);
+    }
+    /**
+     * Update color value when drag on color item
+     * @param event mouse event
+     * @return {void}
+     */
+    onMousemove(event) {
+        const polygonElement = event.target;
+        let mouseButton = event.buttons;
+        if (mouseButton === undefined) { // buttons property is not supported in safari
+            mouseButton = event.which;
+        }
+        if (mouseButton !== 1) {
+            return;
+        }
+        // only update when user click and drag on color item
+        this.updateValue(polygonElement);
+    }
+    /**
+     * Update color value when drag on color item in mobile device
+     * @param event touch event
+     * @return {void}
+     */
+    onTouchmove(event) {
+        var _a;
+        const touchOffsets = event.changedTouches[0];
+        // TODO: it is a bug of TypeScript@4.4 remove ts-ignore once it is fixed
+        // https://github.com/microsoft/TypeScript/issues/45047
+        // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+        // @ts-ignore
+        // eslint-disable-next-line @typescript-eslint/no-unsafe-call
+        const realTarget = (_a = this.shadowRoot) === null || _a === void 0 ? void 0 : _a.elementFromPoint(touchOffsets.clientX, touchOffsets.clientY);
+        this.updateValue(realTarget);
+    }
     /**
      * Update color value and fired value-changed event
      * @param element target element to get value

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

@@ -1,5 +1,5 @@
-import { rgb } from '@refinitiv-ui/utils';
-import { isHex } from './color-helpers';
+import { rgb } from '@refinitiv-ui/utils/lib/color.js';
+import { isHex } from './color-helpers.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.d.ts

@@ -1,13 +1,13 @@
 import { JSXInterface } from '../jsx';
-import { TemplateResult, CSSResult, PropertyValues } from '@refinitiv-ui/core';
+import { TemplateResult, CSSResultGroup, PropertyValues } from '@refinitiv-ui/core';
+import '../button/index.js';
+import '../number-field/index.js';
+import '../text-field/index.js';
+import { Dialog } from '../dialog/index.js';
+import './elements/color-palettes.js';
+import './elements/grayscale-palettes.js';
 import { Translate } from '@refinitiv-ui/translate';
-import '@refinitiv-ui/phrasebook/lib/locale/en/color-dialog';
-import '../button';
-import '../number-field';
-import '../text-field';
-import { Dialog } from '../dialog';
-import './elements/color-palettes';
-import './elements/grayscale-palettes';
+import '@refinitiv-ui/phrasebook/lib/locale/en/color-dialog.js';
 /**
  * Displays a colour picker dialog,
  * for selecting a predefined range of colours.
@@ -15,8 +15,8 @@ import './elements/grayscale-palettes';
  * @fires value-changed - Fired when the `value` property changes.
  * @fires opened-changed - Fired when the `opened` property changes.
  *
- * @attr {string|null} header - Set Header/Title of the color dialog
- * @prop {string|null} header - Set Header/Title of the color dialog
+ * @attr {string | null} header - Set Header/Title of the color dialog
+ * @prop {string | null} [header=null] - Set Header/Title of the color dialog
  *
  * @attr {boolean} [opened=false] - Set dialog to open
  * @prop {boolean} [opened=false] - Set dialog to open
@@ -24,14 +24,14 @@ import './elements/grayscale-palettes';
  * @attr {boolean} [no-cancel-on-esc-key=false] - Prevents dialog to close when user presses ESC key
  * @prop {boolean} [noCancelOnEscKey=false] - Prevents dialog to close when user presses ESC key
  *
- * @attr {string} x - Set a specific x coordinate of dialog
- * @prop {string} x - Set a specific x coordinate of dialog
+ * @attr {string | undefined} x - Set a specific x coordinate of dialog
+ * @prop {string | undefined} x - Set a specific x coordinate of dialog
  *
- * @attr {string} y - Set a specific y coordinate of dialog
- * @prop {string} y - Set a specific y coordinate of dialog
+ * @attr {string | undefined} y - Set a specific y coordinate of dialog
+ * @prop {string | undefined} y - Set a specific y coordinate of dialog
  *
- * @attr {string} position-target - Set position of dialog i.e. `top`, `right`, `left`, `bottom`, `center` or combination of theme e.g. `top right`.
- * @prop {string} positionTarget - Set position of dialog i.e. `top`, `right`, `left`, `bottom`, `center` or combination of theme e.g. `top right`.
+ * @attr {string | undefined} position-target - Set position of dialog i.e. `top`, `right`, `left`, `bottom`, `center` or combination of theme e.g. `top right`.
+ * @prop {string | undefined} positionTarget - Set position of dialog i.e. `top`, `right`, `left`, `bottom`, `center` or combination of theme e.g. `top right`.
  *
  * @prop {boolean} [noCancelOnOutsideClick=true] - Prevents dialog to close when user clicks outside the dialog.
  *
@@ -48,12 +48,12 @@ export declare class ColorDialog extends Dialog {
      */
     static get version(): string;
     /**
-     * A `CSSResult` that will be used
+     * A `CSSResultGroup` that will be used
      * to style the host, slotted children
      * and the internal template of the element.
-     * @return {CSSResult | CSSResult[]} CSS template
+     * @return CSS template
      */
-    static get styles(): CSSResult | CSSResult[];
+    static get styles(): CSSResultGroup;
     /**
      * speed up rendering by not populating content on page load
      */

package/lib/color-dialog/index.js

@@ -1,22 +1,21 @@
-var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
-    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
-    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
-    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
-    return c > 3 && r && Object.defineProperty(target, key, r), r;
-};
-import { html, css, customElement, property, WarningNotice, styleMap, query } from '@refinitiv-ui/core';
-import { rgb } from '@refinitiv-ui/utils';
+import { __decorate } from "tslib";
+import { html, css, WarningNotice } from '@refinitiv-ui/core';
+import { customElement } from '@refinitiv-ui/core/lib/decorators/custom-element.js';
+import { property } from '@refinitiv-ui/core/lib/decorators/property.js';
+import { query } from '@refinitiv-ui/core/lib/decorators/query.js';
+import { styleMap } from '@refinitiv-ui/core/lib/directives/style-map.js';
+import { rgb } from '@refinitiv-ui/utils/lib/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';
+import { Dialog } from '../dialog/index.js';
+import './elements/color-palettes.js';
+import './elements/grayscale-palettes.js';
 import { translate } from '@refinitiv-ui/translate';
-import '@refinitiv-ui/phrasebook/lib/locale/en/color-dialog';
-import '../button';
-import '../number-field';
-import '../text-field';
-import { Dialog } from '../dialog';
-import './elements/color-palettes';
-import './elements/grayscale-palettes';
-import { isHex, removeHashSign } from './helpers/color-helpers';
-import { ValueModel } from './helpers/value-model';
-import { VERSION } from '../';
+import '@refinitiv-ui/phrasebook/lib/locale/en/color-dialog.js';
 /**
  * Displays a colour picker dialog,
  * for selecting a predefined range of colours.
@@ -24,8 +23,8 @@ import { VERSION } from '../';
  * @fires value-changed - Fired when the `value` property changes.
  * @fires opened-changed - Fired when the `opened` property changes.
  *
- * @attr {string|null} header - Set Header/Title of the color dialog
- * @prop {string|null} header - Set Header/Title of the color dialog
+ * @attr {string | null} header - Set Header/Title of the color dialog
+ * @prop {string | null} [header=null] - Set Header/Title of the color dialog
  *
  * @attr {boolean} [opened=false] - Set dialog to open
  * @prop {boolean} [opened=false] - Set dialog to open
@@ -33,14 +32,14 @@ import { VERSION } from '../';
  * @attr {boolean} [no-cancel-on-esc-key=false] - Prevents dialog to close when user presses ESC key
  * @prop {boolean} [noCancelOnEscKey=false] - Prevents dialog to close when user presses ESC key
  *
- * @attr {string} x - Set a specific x coordinate of dialog
- * @prop {string} x - Set a specific x coordinate of dialog
+ * @attr {string | undefined} x - Set a specific x coordinate of dialog
+ * @prop {string | undefined} x - Set a specific x coordinate of dialog
  *
- * @attr {string} y - Set a specific y coordinate of dialog
- * @prop {string} y - Set a specific y coordinate of dialog
+ * @attr {string | undefined} y - Set a specific y coordinate of dialog
+ * @prop {string | undefined} y - Set a specific y coordinate of dialog
  *
- * @attr {string} position-target - Set position of dialog i.e. `top`, `right`, `left`, `bottom`, `center` or combination of theme e.g. `top right`.
- * @prop {string} positionTarget - Set position of dialog i.e. `top`, `right`, `left`, `bottom`, `center` or combination of theme e.g. `top right`.
+ * @attr {string | undefined} position-target - Set position of dialog i.e. `top`, `right`, `left`, `bottom`, `center` or combination of theme e.g. `top right`.
+ * @prop {string | undefined} positionTarget - Set position of dialog i.e. `top`, `right`, `left`, `bottom`, `center` or combination of theme e.g. `top right`.
  *
  * @prop {boolean} [noCancelOnOutsideClick=true] - Prevents dialog to close when user clicks outside the dialog.
  *
@@ -80,13 +79,14 @@ let ColorDialog = class ColorDialog extends Dialog {
         return VERSION;
     }
     /**
-     * A `CSSResult` that will be used
+     * A `CSSResultGroup` that will be used
      * to style the host, slotted children
      * and the internal template of the element.
-     * @return {CSSResult | CSSResult[]} CSS template
+     * @return CSS template
      */
     static get styles() {
-        return [...Dialog.styles,
+        return [
+            super.styles,
             css `
         :host {
           display: block;
@@ -97,7 +97,8 @@ let ColorDialog = class ColorDialog extends Dialog {
           var(--no-color-line-color, #ff0000) calc(50% + 1px),
           transparent calc(50% + 2px));
         }
-    `];
+    `
+        ];
     }
     /**
      * Value of selected color from color dialog will be written here as hex value
@@ -112,7 +113,7 @@ let ColorDialog = class ColorDialog extends Dialog {
             value = '';
         }
         this._value = value;
-        void this.requestUpdate('value', oldValue);
+        this.requestUpdate('value', oldValue);
     }
     get value() {
         return this._value;
@@ -263,7 +264,7 @@ let ColorDialog = class ColorDialog extends Dialog {
      */
     onColorChanged(event) {
         this.valueModel.hex = removeHashSign(event.target.value);
-        void this.requestUpdate();
+        this.requestUpdate();
     }
     /**
      * update hex value when typing on hex input
@@ -272,7 +273,7 @@ let ColorDialog = class ColorDialog extends Dialog {
      */
     onHexChanged(event) {
         this.valueModel.hex = event.target.value;
-        void this.requestUpdate();
+        this.requestUpdate();
     }
     /**
      * update r,g,b value when typing on RGB inputs
@@ -290,7 +291,7 @@ let ColorDialog = class ColorDialog extends Dialog {
         else if (targetElem === this.blueInputEl) {
             this.valueModel.blue = this.blueInputEl.value;
         }
-        void this.requestUpdate();
+        this.requestUpdate();
     }
     /**
      * set opened state to false
@@ -347,7 +348,7 @@ let ColorDialog = class ColorDialog extends Dialog {
           <div
             part="preview-color"
             style=${styleMap({
-            backgroundColor: this.valueModel.value
+            backgroundColor: this.valueModel.value || undefined
         })}
             ?no-color=${!this.valueModel.value}></div>
           <div>${this.t('RED')}&nbsp;: