@refinitiv-ui/elements 5.3.3 → 5.7.0

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

@@ -0,0 +1,132 @@
+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.
+ */
+export class Palettes extends BasicElement {
+    constructor() {
+        super(...arguments);
+        /**
+         * Color value in hex
+         */
+        this.value = '';
+    }
+    /**
+     * Element version number
+     * @returns version number
+     */
+    static get version() {
+        return VERSION;
+    }
+    /**
+     * Create selector template
+     * @return {SVGTemplateResult} selector template
+     */
+    get SelectorTemplate() {
+        return (svg `
+        <polygon class="color-selector-shadow"></polygon>
+        <polygon class="color-selector"></polygon>
+      `);
+    }
+    /**
+     * Hide selector element
+     * @return {void}
+     */
+    hideSelector() {
+        if (this.colorSelector && this.colorSelectorShadow) {
+            this.colorSelector.style.display = 'none';
+            this.colorSelectorShadow.style.display = 'none';
+        }
+    }
+    /**
+     * Show selector element on specific points
+     * @return {void}
+     * @param points points of colorSelector
+     */
+    showSelector(points) {
+        if (this.colorSelector && this.colorSelectorShadow) {
+            this.colorSelector.style.display = '';
+            this.colorSelectorShadow.style.display = '';
+            this.colorSelectorShadow.setAttribute('points', points);
+            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
+     * @return {void}
+     */
+    updateValue(element) {
+        const color = element.getAttribute('fill');
+        if (color) {
+            this.value = color;
+            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')
+], Palettes.prototype, "colorSelector", void 0);
+__decorate([
+    query('.color-selector-shadow')
+], Palettes.prototype, "colorSelectorShadow", void 0);
+__decorate([
+    property({ type: String })
+], Palettes.prototype, "value", void 0);

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

@@ -0,0 +1,16 @@
+/**
+ * SVG polygons per color
+ */
+export declare const COLOR_ITEMS: string[][];
+/**
+ * SVG polygons per grayscale items
+ */
+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

@@ -0,0 +1,161 @@
+/**
+ * SVG polygons per color
+ */
+export const COLOR_ITEMS = [
+    ['63,0,72,4,72,15,63,19,54,15,54,4', '#003366'],
+    ['81,0,90,4,90,15,81,19,72,15,72,4', '#336699'],
+    ['99,0,108,4,108,15,99,19,90,15,90,4', '#3366cc'],
+    ['117,0,126,4,126,15,117,19,108,15,108,4', '#003399'],
+    ['135,0,144,4,144,15,135,19,126,15,126,4', '#000099'],
+    ['153,0,162,4,162,15,153,19,144,15,144,4', '#0000cc'],
+    ['171,0,180,4,180,15,171,19,162,15,162,4', '#000066'],
+    ['54,15,63,19,63,30,54,34,45,30,45,19', '#006666'],
+    ['72,15,81,19,81,30,72,34,63,30,63,19', '#006699'],
+    ['90,15,99,19,99,30,90,34,81,30,81,19', '#0099cc'],
+    ['108,15,117,19,117,30,108,34,99,30,99,19', '#0066cc'],
+    ['126,15,135,19,135,30,126,34,117,30,117,19', '#0033cc'],
+    ['144,15,153,19,153,30,144,34,135,30,135,19', '#0000ff'],
+    ['162,15,171,19,171,30,162,34,153,30,153,19', '#3333ff'],
+    ['180,15,189,19,189,30,180,34,171,30,171,19', '#333399'],
+    ['45,30,54,34,54,45,45,49,36,45,36,34', '#669999'],
+    ['63,30,72,34,72,45,63,49,54,45,54,34', '#009999'],
+    ['81,30,90,34,90,45,81,49,72,45,72,34', '#33cccc'],
+    ['99,30,108,34,108,45,99,49,90,45,90,34', '#00ccff'],
+    ['117,30,126,34,126,45,117,49,108,45,108,34', '#0099ff'],
+    ['135,30,144,34,144,45,135,49,126,45,126,34', '#0066ff'],
+    ['153,30,162,34,162,45,153,49,144,45,144,34', '#3366ff'],
+    ['171,30,180,34,180,45,171,49,162,45,162,34', '#3333cc'],
+    ['189,30,198,34,198,45,189,49,180,45,180,34', '#666699'],
+    ['36,45,45,49,45,60,36,64,27,60,27,49', '#339966'],
+    ['54,45,63,49,63,60,54,64,45,60,45,49', '#00cc99'],
+    ['72,45,81,49,81,60,72,64,63,60,63,49', '#00ffcc'],
+    ['90,45,99,49,99,60,90,64,81,60,81,49', '#00ffff'],
+    ['108,45,117,49,117,60,108,64,99,60,99,49', '#33ccff'],
+    ['126,45,135,49,135,60,126,64,117,60,117,49', '#3399ff'],
+    ['144,45,153,49,153,60,144,64,135,60,135,49', '#6699ff'],
+    ['162,45,171,49,171,60,162,64,153,60,153,49', '#6666ff'],
+    ['180,45,189,49,189,60,180,64,171,60,171,49', '#6600ff'],
+    ['198,45,207,49,207,60,198,64,189,60,189,49', '#6600cc'],
+    ['27,60,36,64,36,75,27,79,18,75,18,64', '#339933'],
+    ['45,60,54,64,54,75,45,79,36,75,36,64', '#00cc66'],
+    ['63,60,72,64,72,75,63,79,54,75,54,64', '#00ff99'],
+    ['81,60,90,64,90,75,81,79,72,75,72,64', '#66ffcc'],
+    ['99,60,108,64,108,75,99,79,90,75,90,64', '#66ffff'],
+    ['117,60,126,64,126,75,117,79,108,75,108,64', '#66ccff'],
+    ['135,60,144,64,144,75,135,79,126,75,126,64', '#99ccff'],
+    ['153,60,162,64,162,75,153,79,144,75,144,64', '#9999ff'],
+    ['171,60,180,64,180,75,171,79,162,75,162,64', '#9966ff'],
+    ['189,60,198,64,198,75,189,79,180,75,180,64', '#9933ff'],
+    ['207,60,216,64,216,75,207,79,198,75,198,64', '#9900ff'],
+    ['18,75,27,79,27,90,18,94,9,90,9,79', '#006600'],
+    ['36,75,45,79,45,90,36,94,27,90,27,79', '#00cc00'],
+    ['54,75,63,79,63,90,54,94,45,90,45,79', '#00ff00'],
+    ['72,75,81,79,81,90,72,94,63,90,63,79', '#66ff99'],
+    ['90,75,99,79,99,90,90,94,81,90,81,79', '#99ffcc'],
+    ['108,75,117,79,117,90,108,94,99,90,99,79', '#ccffff'],
+    ['126,75,135,79,135,90,126,94,117,90,117,79', '#ccccff'],
+    ['144,75,153,79,153,90,144,94,135,90,135,79', '#cc99ff'],
+    ['162,75,171,79,171,90,162,94,153,90,153,79', '#cc66ff'],
+    ['180,75,189,79,189,90,180,94,171,90,171,79', '#cc33ff'],
+    ['198,75,207,79,207,90,198,94,189,90,189,79', '#cc00ff'],
+    ['216,75,225,79,225,90,216,94,207,90,207,79', '#9900cc'],
+    ['9,90,18,94,18,105,9,109,0,105,0,94', '#003300'],
+    ['27,90,36,94,36,105,27,109,18,105,18,94', '#009933'],
+    ['45,90,54,94,54,105,45,109,36,105,36,94', '#33cc33'],
+    ['63,90,72,94,72,105,63,109,54,105,54,94', '#66ff66'],
+    ['81,90,90,94,90,105,81,109,72,105,72,94', '#99ff99'],
+    ['99,90,108,94,108,105,99,109,90,105,90,94', '#ccffcc'],
+    ['117,90,126,94,126,105,117,109,108,105,108,94', '#ffffff'],
+    ['135,90,144,94,144,105,135,109,126,105,126,94', '#ffccff'],
+    ['153,90,162,94,162,105,153,109,144,105,144,94', '#ff99ff'],
+    ['171,90,180,94,180,105,171,109,162,105,162,94', '#ff66ff'],
+    ['189,90,198,94,198,105,189,109,180,105,180,94', '#ff00ff'],
+    ['207,90,216,94,216,105,207,109,198,105,198,94', '#cc00cc'],
+    ['225,90,234,94,234,105,225,109,216,105,216,94', '#660066'],
+    ['18,105,27,109,27,120,18,124,9,120,9,109', '#336600'],
+    ['36,105,45,109,45,120,36,124,27,120,27,109', '#009900'],
+    ['54,105,63,109,63,120,54,124,45,120,45,109', '#66ff33'],
+    ['72,105,81,109,81,120,72,124,63,120,63,109', '#99ff66'],
+    ['90,105,99,109,99,120,90,124,81,120,81,109', '#ccff99'],
+    ['108,105,117,109,117,120,108,124,99,120,99,109', '#ffffcc'],
+    ['126,105,135,109,135,120,126,124,117,120,117,109', '#ffcccc'],
+    ['144,105,153,109,153,120,144,124,135,120,135,109', '#ff99cc'],
+    ['162,105,171,109,171,120,162,124,153,120,153,109', '#ff66cc'],
+    ['180,105,189,109,189,120,180,124,171,120,171,109', '#ff33cc'],
+    ['198,105,207,109,207,120,198,124,189,120,189,109', '#cc0099'],
+    ['216,105,225,109,225,120,216,124,207,120,207,109', '#993399'],
+    ['27,120,36,124,36,135,27,139,18,135,18,124', '#333300'],
+    ['45,120,54,124,54,135,45,139,36,135,36,124', '#669900'],
+    ['63,120,72,124,72,135,63,139,54,135,54,124', '#99ff33'],
+    ['81,120,90,124,90,135,81,139,72,135,72,124', '#ccff66'],
+    ['99,120,108,124,108,135,99,139,90,135,90,124', '#ffff99'],
+    ['117,120,126,124,126,135,117,139,108,135,108,124', '#ffcc99'],
+    ['135,120,144,124,144,135,135,139,126,135,126,124', '#ff9999'],
+    ['153,120,162,124,162,135,153,139,144,135,144,124', '#ff6699'],
+    ['171,120,180,124,180,135,171,139,162,135,162,124', '#ff3399'],
+    ['189,120,198,124,198,135,189,139,180,135,180,124', '#cc3399'],
+    ['207,120,216,124,216,135,207,139,198,135,198,124', '#990099'],
+    ['36,135,45,139,45,150,36,154,27,150,27,139', '#666633'],
+    ['54,135,63,139,63,150,54,154,45,150,45,139', '#99cc00'],
+    ['72,135,81,139,81,150,72,154,63,150,63,139', '#ccff33'],
+    ['90,135,99,139,99,150,90,154,81,150,81,139', '#ffff66'],
+    ['108,135,117,139,117,150,108,154,99,150,99,139', '#ffcc66'],
+    ['126,135,135,139,135,150,126,154,117,150,117,139', '#ff9966'],
+    ['144,135,153,139,153,150,144,154,135,150,135,139', '#ff6666'],
+    ['162,135,171,139,171,150,162,154,153,150,153,139', '#ff0066'],
+    ['180,135,189,139,189,150,180,154,171,150,171,139', '#cc6699'],
+    ['198,135,207,139,207,150,198,154,189,150,189,139', '#993366'],
+    ['45,150,54,154,54,165,45,169,36,165,36,154', '#999966'],
+    ['63,150,72,154,72,165,63,169,54,165,54,154', '#cccc00'],
+    ['81,150,90,154,90,165,81,169,72,165,72,154', '#ffff00'],
+    ['99,150,108,154,108,165,99,169,90,165,90,154', '#ffcc00'],
+    ['117,150,126,154,126,165,117,169,108,165,108,154', '#ff9933'],
+    ['135,150,144,154,144,165,135,169,126,165,126,154', '#ff6600'],
+    ['153,150,162,154,162,165,153,169,144,165,144,154', '#ff5050'],
+    ['171,150,180,154,180,165,171,169,162,165,162,154', '#cc0066'],
+    ['189,150,198,154,198,165,189,169,180,165,180,154', '#660033'],
+    ['54,165,63,169,63,180,54,184,45,180,45,169', '#996633'],
+    ['72,165,81,169,81,180,72,184,63,180,63,169', '#cc9900'],
+    ['90,165,99,169,99,180,90,184,81,180,81,169', '#ff9900'],
+    ['108,165,117,169,117,180,108,184,99,180,99,169', '#cc6600'],
+    ['126,165,135,169,135,180,126,184,117,180,117,169', '#ff3300'],
+    ['144,165,153,169,153,180,144,184,135,180,135,169', '#ff0000'],
+    ['162,165,171,169,171,180,162,184,153,180,153,169', '#cc0000'],
+    ['180,165,189,169,189,180,180,184,171,180,171,169', '#990033'],
+    ['63,180,72,184,72,195,63,199,54,195,54,184', '#663300'],
+    ['81,180,90,184,90,195,81,199,72,195,72,184', '#996600'],
+    ['99,180,108,184,108,195,99,199,90,195,90,184', '#cc3300'],
+    ['117,180,126,184,126,195,117,199,108,195,108,184', '#993300'],
+    ['135,180,144,184,144,195,135,199,126,195,126,184', '#990000'],
+    ['153,180,162,184,162,195,153,199,144,195,144,184', '#800000'],
+    ['171,180,180,184,180,195,171,199,162,195,162,184', '#993333']
+];
+/**
+ * SVG polygons per grayscale items
+ */
+export const GRAYSCALE_ITEMS = [
+    ['29, 2, 38, 6, 38, 17, 29, 21, 20, 17, 20, 6', '#ffffff'],
+    ['47, 2, 56, 6, 56, 17, 47, 21, 38, 17, 38, 6', '#eaeaea'],
+    ['65, 2, 74, 6, 74, 17, 65, 21, 56, 17, 56, 6', '#b2b2b2'],
+    ['83, 2, 92, 6, 92, 17, 83, 21, 74, 17, 74, 6', '#777777'],
+    ['101, 2, 110, 6, 110, 17, 101, 21, 92, 17, 92, 6', '#4d4d4c'],
+    ['119, 2, 128, 6, 128, 17, 119, 21, 110, 17, 110, 6', '#323332'],
+    ['137, 2, 146, 6, 146, 17, 137, 21, 128, 17, 128, 6', '#282828'],
+    ['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.d.ts

@@ -0,0 +1,75 @@
+/**
+ * A helper model in order to keep and update values between RGB and HEX
+ */
+declare class ValueModel {
+    private initialValue;
+    private _hex;
+    private _red;
+    private _green;
+    private _blue;
+    /**
+     * Create the new value model
+     * @param value A valid hex value (e.g. "#ffffff") or an empty string
+     */
+    constructor(value?: string);
+    private getHexValue;
+    private isValidRGBValue;
+    private isValidHexValue;
+    private isValidRGB;
+    private isValidHex;
+    /**
+     * Check if new value is different to initial
+     * ignoring hex length
+     * @returns true if different
+     */
+    hasChanged(): boolean;
+    /**
+     * Check if RGB and Hex values are valid
+     * @returns true if both are valid
+     */
+    isValid(): boolean;
+    /**
+     * Set red color from RGB pallette.
+     * Setting this overrides hex
+     * @param red Red color, the string number from 0 - 255
+     */
+    set red(red: string);
+    /**
+     * Get red color from RGB pallette
+     */
+    get red(): string;
+    /**
+     * Set green color from RGB pallette.
+     * Setting this overrides hex
+     * @param green Green color, the string number from 0 - 255
+     */
+    set green(green: string);
+    /**
+     * Get green color from RGB pallette
+     */
+    get green(): string;
+    /**
+     * Set blue color from RGB pallette.
+     * Setting this overrides hex
+     * @param blue Blue color, the string number from 0 - 255
+     */
+    set blue(blue: string);
+    /**
+     * Get blue color from RGB pallette
+     */
+    get blue(): string;
+    /**
+     * Set hex value. Setting hex overrides RGB
+     * @param hex Hex value, e.g. "ffffff" or "#ffffff"
+     */
+    set hex(hex: string);
+    /**
+     * Get the hex value (hex without #, e.g "ffffff").
+     */
+    get hex(): string;
+    /**
+     * Get the value. Value is Hex with #, e.g. "#ffffff"
+     */
+    get value(): string;
+}
+export { ValueModel };

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

@@ -0,0 +1,141 @@
+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
+ */
+class ValueModel {
+    /**
+     * Create the new value model
+     * @param value A valid hex value (e.g. "#ffffff") or an empty string
+     */
+    constructor(value = '') {
+        this.initialValue = 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 === '') {
+            return '';
+        }
+        else if (!this.isValidRGB()) {
+            return '';
+        }
+        const hex = rgb(Number(this.red), Number(this.green), Number(this.blue)).formatHex();
+        return hex ? hex.slice(1) : '';
+    }
+    isValidRGBValue(value) {
+        return value === '' || Number(value) >= 0 && Number(value) <= 255;
+    }
+    isValidHexValue(value) {
+        return value === '' || isHex(`#${value}`);
+    }
+    isValidRGB() {
+        return this.isValidRGBValue(this.red)
+            && this.isValidRGBValue(this.green)
+            && this.isValidRGBValue(this.blue);
+    }
+    isValidHex() {
+        return this.isValidHexValue(this.hex);
+    }
+    /**
+     * Check if new value is different to initial
+     * ignoring hex length
+     * @returns true if different
+     */
+    hasChanged() {
+        return rgb(this.initialValue).formatHex() !== rgb(this.value).formatHex();
+    }
+    /**
+     * Check if RGB and Hex values are valid
+     * @returns true if both are valid
+     */
+    isValid() {
+        return this.isValidRGB() && this.isValidHex();
+    }
+    /**
+     * Set red color from RGB pallette.
+     * Setting this overrides hex
+     * @param red Red color, the string number from 0 - 255
+     */
+    set red(red) {
+        this._red = red;
+        this._green = this._green || '0';
+        this._blue = this._blue || '0';
+        this._hex = this.getHexValue();
+    }
+    /**
+     * Get red color from RGB pallette
+     */
+    get red() {
+        return this._red;
+    }
+    /**
+     * Set green color from RGB pallette.
+     * Setting this overrides hex
+     * @param green Green color, the string number from 0 - 255
+     */
+    set green(green) {
+        this._green = green;
+        this._red = this._red || '0';
+        this._blue = this._blue || '0';
+        this._hex = this.getHexValue();
+    }
+    /**
+     * Get green color from RGB pallette
+     */
+    get green() {
+        return this._green;
+    }
+    /**
+     * Set blue color from RGB pallette.
+     * Setting this overrides hex
+     * @param blue Blue color, the string number from 0 - 255
+     */
+    set blue(blue) {
+        this._blue = blue;
+        this._red = this._red || '0';
+        this._green = this._green || '0';
+        this._hex = this.getHexValue();
+    }
+    /**
+     * Get blue color from RGB pallette
+     */
+    get blue() {
+        return this._blue;
+    }
+    /**
+     * Set hex value. Setting hex overrides RGB
+     * @param hex Hex value, e.g. "ffffff" or "#ffffff"
+     */
+    set hex(hex) {
+        if (!this.isValidHexValue(hex)) {
+            this._red = '';
+            this._green = '';
+            this._blue = '';
+        }
+        else {
+            const { r, g, b } = rgb(`#${hex}`);
+            this._red = rgbNumberToString(r);
+            this._green = rgbNumberToString(g);
+            this._blue = rgbNumberToString(b);
+        }
+        this._hex = hex;
+    }
+    /**
+     * Get the hex value (hex without #, e.g "ffffff").
+     */
+    get hex() {
+        return this._hex;
+    }
+    /**
+     * Get the value. Value is Hex with #, e.g. "#ffffff"
+     */
+    get value() {
+        return this._hex ? `#${this._hex}` : '';
+    }
+}
+export { ValueModel };