@refinitiv-ui/elements 5.3.3 → 5.3.4

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

@@ -0,0 +1,119 @@
+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 '../../';
+/**
+ * Element base class usually used
+ * for creating palettes elements.
+ */
+export class Palettes extends BasicElement {
+    constructor() {
+        super(...arguments);
+        /**
+         * 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
+     * @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 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);
+        }
+    }
+}
+__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,62 @@
+/**
+ * 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";
+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 {};

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

@@ -0,0 +1,258 @@
+/**
+ * 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
+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;
+        }
+        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);
+    }
+}

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 tru 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,139 @@
+import { ColorHelpers } from './color-helpers';
+/**
+ * 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 { red, green, blue } = ColorHelpers.hexToRGB(value);
+        this._red = red;
+        this._green = green;
+        this._blue = blue;
+        this._hex = ColorHelpers.removeHashSign(value);
+    }
+    getHexValue() {
+        if (this.red === '' && this.green === '' && this.blue === '') {
+            return '';
+        }
+        else if (!this.isValidRGB()) {
+            return '';
+        }
+        const hex = ColorHelpers.rgbToHex(this.red, this.green, this.blue);
+        return hex ? ColorHelpers.removeHashSign(hex) : '';
+    }
+    isValidRGBValue(value) {
+        return value === '' || ColorHelpers.isValidDecimalForRGB(value);
+    }
+    isValidHexValue(value) {
+        return value === '' || ColorHelpers.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 tru if different
+     */
+    hasChanged() {
+        return ColorHelpers.expandHex(this.initialValue) !== ColorHelpers.expandHex(this.value);
+    }
+    /**
+     * 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 rgb = ColorHelpers.hexToRGB(hex);
+            this._red = rgb.red;
+            this._green = rgb.green;
+            this._blue = rgb.blue;
+        }
+        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 };