@refinitiv-ui/elements 5.0.0-beta.3 → 5.0.0-dev.204

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

@@ -1,22 +1,26 @@
-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 { __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
  */
 let ColorPalettes = class ColorPalettes extends Palettes {
     /**
-     * A `CSSResult` that will be used
+     * Element version number
+     * @returns version number
+     */
+    static get version() {
+        return VERSION;
+    }
+    /**
+     * 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 `
@@ -67,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]);
@@ -95,4 +99,3 @@ ColorPalettes = __decorate([
     customElement('ef-color-palettes', { theme: false })
 ], ColorPalettes);
 export { ColorPalettes };
-//# sourceMappingURL=color-palettes.js.map

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

@@ -1,18 +1,23 @@
 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
  */
 export declare class GrayscalePalettes extends Palettes {
     /**
-     * A `CSSResult` that will be used
+     * Element version number
+     * @returns version number
+     */
+    static get version(): string;
+    /**
+     * 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
      */
@@ -57,4 +62,6 @@ declare global {
       'ef-grayscale-palettes': Partial<GrayscalePalettes> | JSXInterface.HTMLAttributes<GrayscalePalettes>;
     }
   }
-}
+}
+
+export {};

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

@@ -1,12 +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 { __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
@@ -20,10 +18,17 @@ let GrayscalePalettes = class GrayscalePalettes extends Palettes {
         this.allowNocolor = false;
     }
     /**
-     * A `CSSResult` that will be used
+     * Element version number
+     * @returns version number
+     */
+    static get version() {
+        return VERSION;
+    }
+    /**
+     * 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 `
@@ -99,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);
@@ -154,4 +159,3 @@ GrayscalePalettes = __decorate([
     customElement('ef-grayscale-palettes', { theme: false })
 ], GrayscalePalettes);
 export { GrayscalePalettes };
-//# sourceMappingURL=grayscale-palettes.js.map

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

@@ -4,6 +4,11 @@ import { BasicElement, SVGTemplateResult } from '@refinitiv-ui/core';
  * for creating palettes elements.
  */
 export declare class Palettes extends BasicElement {
+    /**
+     * Element version number
+     * @returns version number
+     */
+    static get version(): string;
     private colorSelector?;
     private colorSelectorShadow?;
     /**
@@ -31,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,10 +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 { __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.
@@ -16,43 +16,13 @@ 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
+     * @returns version number
+     */
+    static get version() {
+        return VERSION;
     }
     /**
      * Create selector template
@@ -87,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
@@ -99,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')
@@ -109,4 +130,3 @@ __decorate([
 __decorate([
     property({ type: String })
 ], Palettes.prototype, "value", void 0);
-//# sourceMappingURL=palettes.js.map

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,115 +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);
     }
-}
-//# sourceMappingURL=color-helpers.js.map
+    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;
     }
@@ -137,4 +139,3 @@ class ValueModel {
     }
 }
 export { ValueModel };
-//# sourceMappingURL=value-model.js.map