@refinitiv-ui/elements 5.3.4 → 5.8.0

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, ColorHelpers } 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 `
@@ -75,7 +71,7 @@ let ColorPalettes = class ColorPalettes extends Palettes {
      */
     updated(changedProperties) {
         if (changedProperties.has('value')) {
-            const value = ColorHelpers.expandHex(this.value);
+            const value = this.expandHex(this.value);
             const item = COLOR_ITEMS.find((item) => item[1] === value);
             if (item) {
                 this.showSelector(item[0]);

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, ColorHelpers } 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 `
@@ -107,7 +104,7 @@ let GrayscalePalettes = class GrayscalePalettes extends Palettes {
      */
     updated(changedProperties) {
         if (changedProperties.has('value')) {
-            const value = ColorHelpers.expandHex(this.value);
+            const value = this.expandHex(this.value);
             const item = GRAYSCALE_ITEMS.find((item) => item[1] === value);
             if (this.allowNocolor && this.value === '') {
                 this.showSelector(NOCOLOR_POINTS);

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

@@ -36,23 +36,30 @@ 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
      * @return {void}
      */
     protected updateValue(element: SVGAElement): void;
+    /**
+     * Expand short format hex into long format
+     * For instance, "#fff" becomes "#ffffff"
+     * @param hex hex to expand
+     * @returns expanded hex value
+     */
+    protected expandHex(hex: string): string;
 }

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

@@ -1,11 +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 { __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.
@@ -17,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
@@ -95,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
@@ -107,6 +111,15 @@ export class Palettes extends BasicElement {
             this.notifyPropertyChange('value', color);
         }
     }
+    /**
+     * Expand short format hex into long format
+     * For instance, "#fff" becomes "#ffffff"
+     * @param hex hex to expand
+     * @returns expanded hex value
+     */
+    expandHex(hex) {
+        return isHex(hex) ? rgb(this.value).formatHex() : '';
+    }
 }
 __decorate([
     query('.color-selector')

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

@@ -7,56 +7,10 @@ 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";
-declare type rgbValue = {
-    red: string;
-    green: string;
-    blue: string;
-};
-export declare class ColorHelpers {
-    /**
-     * Remove hash (#) sign from hex value
-     * @param hex Hex to check
-     * @returns hex value without # sign
-     */
-    static removeHashSign(hex: string): string;
-    /**
-     * Expand short format hex into long format
-     * For instance, "#fff" becomes "#ffffff"
-     * @param value hex to expand
-     * @returns expanded hex value
-     */
-    static expandHex(value: string): string;
-    /**
-     * Transform RGB value into hex (with #)
-     * @param red Red value, 0 - 255
-     * @param green Green value, 0 - 255
-     * @param blue Blue value, 0 - 255
-     * @returns hex value
-     */
-    static rgbToHex(red: string, green: string, blue: string): string;
-    /**
-     * Transform 10 base number to HEX number
-     * @param num Number to transform
-     * @returns hex representation
-     */
-    private static numberToHex;
-    /**
-     * Transform Hex to RGB
-     * @param hex Hex to transform
-     * @returns rgb values
-     */
-    static hexToRGB(hex: string): rgbValue;
-    /**
-     * Check if value is a valid hex (including #)
-     * @param value Value to check
-     * @returns true if valid hex
-     */
-    static isHex(value: string): boolean;
-    /**
-     * Check if value is a valid RGB string number between 0 - 255
-     * @param value Value to check
-     * @returns true if a valid number
-     */
-    static isValidDecimalForRGB(value: string): boolean;
-}
-export {};
+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

@@ -145,114 +145,17 @@ export const GRAYSCALE_ITEMS = [
 ];
 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
-const RGB_REGEXP = /^([0-1]?[0-9]?[0-9]|2[0-4][0-9]|25[0-5])$/; // used to validate RGB colours, e.g. 0 to 255
-export class ColorHelpers {
-    /**
-     * Remove hash (#) sign from hex value
-     * @param hex Hex to check
-     * @returns hex value without # sign
-     */
-    static removeHashSign(hex) {
-        if (hex) {
-            if (hex.startsWith('#')) {
-                hex = hex.slice(1);
-            }
-        }
-        return hex;
-    }
-    /**
-     * Expand short format hex into long format
-     * For instance, "#fff" becomes "#ffffff"
-     * @param value hex to expand
-     * @returns expanded hex value
-     */
-    static expandHex(value) {
-        const hex = this.removeHashSign(value);
-        if (hex && hex.length <= 3) {
-            return '#' + hex[0] + hex[0] + hex[1] + hex[1] + hex[2] + hex[2];
-        }
-        return value;
-    }
-    /**
-     * Transform RGB value into hex (with #)
-     * @param red Red value, 0 - 255
-     * @param green Green value, 0 - 255
-     * @param blue Blue value, 0 - 255
-     * @returns hex value
-     */
-    static rgbToHex(red, green, blue) {
-        const rHex = this.numberToHex(parseInt(red, 10));
-        const gHex = this.numberToHex(parseInt(green, 10));
-        const bHex = this.numberToHex(parseInt(blue, 10));
-        return `#${rHex}${gHex}${bHex}`;
-    }
-    /**
-     * Transform 10 base number to HEX number
-     * @param num Number to transform
-     * @returns hex representation
-     */
-    static numberToHex(num) {
-        if (num && num > 0) {
-            if (num < 10) {
-                return `0${num}`;
-            }
-            else if (num <= 15) {
-                return `0${num.toString(16)}`;
-            }
-            else {
-                return num.toString(16);
-            }
-        }
-        else {
-            return '00';
-        }
-    }
-    /**
-     * Transform Hex to RGB
-     * @param hex Hex to transform
-     * @returns rgb values
-     */
-    static hexToRGB(hex) {
-        hex = this.removeHashSign(hex);
-        if (!hex) {
-            return {
-                red: '',
-                green: '',
-                blue: ''
-            };
-        }
-        if (hex.length === 3) {
-            let hex6 = '';
-            for (let i = 0; i < 3; i++) {
-                const c = hex[i];
-                hex6 += '' + c + c;
-            }
-            hex = hex6;
+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);
         }
-        const bigint = parseInt(hex, 16);
-        const r = (bigint >> 16) & 255;
-        const g = (bigint >> 8) & 255;
-        const b = bigint & 255;
-        return {
-            red: String(r),
-            green: String(g),
-            blue: String(b)
-        };
-    }
-    /**
-     * Check if value is a valid hex (including #)
-     * @param value Value to check
-     * @returns true if valid hex
-     */
-    static isHex(value) {
-        return HEX_REGEXP.test(value);
-    }
-    /**
-     * Check if value is a valid RGB string number between 0 - 255
-     * @param value Value to check
-     * @returns true if a valid number
-     */
-    static isValidDecimalForRGB(value) {
-        return RGB_REGEXP.test(value);
     }
-}
+    return hex;
+};

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

@@ -20,7 +20,7 @@ declare class ValueModel {
     /**
      * Check if new value is different to initial
      * ignoring hex length
-     * @returns tru if different
+     * @returns true if different
      */
     hasChanged(): boolean;
     /**

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

@@ -1,4 +1,6 @@
-import { ColorHelpers } 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
  */
@@ -9,11 +11,11 @@ class ValueModel {
      */
     constructor(value = '') {
         this.initialValue = value;
-        const { red, green, blue } = ColorHelpers.hexToRGB(value);
-        this._red = red;
-        this._green = green;
-        this._blue = blue;
-        this._hex = ColorHelpers.removeHashSign(value);
+        const { r, g, b } = rgb(value);
+        this._red = rgbNumberToString(r);
+        this._green = rgbNumberToString(g);
+        this._blue = rgbNumberToString(b);
+        this._hex = value.slice(1);
     }
     getHexValue() {
         if (this.red === '' && this.green === '' && this.blue === '') {
@@ -22,14 +24,14 @@ class ValueModel {
         else if (!this.isValidRGB()) {
             return '';
         }
-        const hex = ColorHelpers.rgbToHex(this.red, this.green, this.blue);
-        return hex ? ColorHelpers.removeHashSign(hex) : '';
+        const hex = rgb(Number(this.red), Number(this.green), Number(this.blue)).formatHex();
+        return hex ? hex.slice(1) : '';
     }
     isValidRGBValue(value) {
-        return value === '' || ColorHelpers.isValidDecimalForRGB(value);
+        return value === '' || Number(value) >= 0 && Number(value) <= 255;
     }
     isValidHexValue(value) {
-        return value === '' || ColorHelpers.isHex(`#${value}`);
+        return value === '' || isHex(`#${value}`);
     }
     isValidRGB() {
         return this.isValidRGBValue(this.red)
@@ -42,10 +44,10 @@ class ValueModel {
     /**
      * Check if new value is different to initial
      * ignoring hex length
-     * @returns tru if different
+     * @returns true if different
      */
     hasChanged() {
-        return ColorHelpers.expandHex(this.initialValue) !== ColorHelpers.expandHex(this.value);
+        return rgb(this.initialValue).formatHex() !== rgb(this.value).formatHex();
     }
     /**
      * Check if RGB and Hex values are valid
@@ -116,10 +118,10 @@ class ValueModel {
             this._blue = '';
         }
         else {
-            const rgb = ColorHelpers.hexToRGB(hex);
-            this._red = rgb.red;
-            this._green = rgb.green;
-            this._blue = rgb.blue;
+            const { r, g, b } = rgb(`#${hex}`);
+            this._red = rgbNumberToString(r);
+            this._green = rgbNumberToString(g);
+            this._blue = rgbNumberToString(b);
         }
         this._hex = hex;
     }