@refinitiv-ui/elements 5.3.3 → 5.7.0

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

@@ -0,0 +1,193 @@
+{
+  "version": "experimental",
+  "tags": [
+    {
+      "name": "ef-color-dialog",
+      "description": "Displays a colour picker dialog,\nfor selecting a predefined range of colours.",
+      "attributes": [
+        {
+          "name": "allow-nocolor",
+          "description": "Set the palettes to activate no-color option",
+          "type": "boolean",
+          "default": "false"
+        },
+        {
+          "name": "value",
+          "description": "Value of selected color from color dialog will be written here as hex value\ne.g. \"#00f\" or \"#0000ff\"",
+          "type": "string",
+          "default": "\"\""
+        },
+        {
+          "name": "hex",
+          "description": "Value of hex without # sign, supports both 3-digits shorthand hex and regular 6-digits hex",
+          "type": "string",
+          "default": "\"\""
+        },
+        {
+          "name": "red",
+          "description": "Red value from 0 to 255",
+          "type": "string",
+          "default": "\"\""
+        },
+        {
+          "name": "green",
+          "description": "Green value from 0 to 255",
+          "type": "string",
+          "default": "\"\""
+        },
+        {
+          "name": "blue",
+          "description": "Blue value from 0 to 255",
+          "type": "string",
+          "default": "\"\""
+        },
+        {
+          "name": "header",
+          "description": "Set Header/Title of the color dialog",
+          "type": "string|null"
+        },
+        {
+          "name": "opened",
+          "description": "Set dialog to open",
+          "type": "boolean",
+          "default": "false"
+        },
+        {
+          "name": "x",
+          "description": "Set a specific x coordinate of dialog",
+          "type": "string"
+        },
+        {
+          "name": "y",
+          "description": "Set a specific y coordinate of dialog",
+          "type": "string"
+        },
+        {
+          "name": "no-cancel-on-esc-key",
+          "description": "Prevents dialog to close when user presses ESC key",
+          "type": "boolean",
+          "default": "false"
+        },
+        {
+          "name": "position-target",
+          "description": "Set position of dialog i.e. `top`, `right`, `left`, `bottom`, `center` or combination of theme e.g. `top right`.",
+          "type": "string"
+        }
+      ],
+      "properties": [
+        {
+          "name": "allowNocolor",
+          "attribute": "allow-nocolor",
+          "description": "Set the palettes to activate no-color option",
+          "type": "boolean",
+          "default": "false"
+        },
+        {
+          "name": "value",
+          "attribute": "value",
+          "description": "Value of selected color from color dialog will be written here as hex value\ne.g. \"#00f\" or \"#0000ff\"",
+          "type": "string",
+          "default": "\"\""
+        },
+        {
+          "name": "hex",
+          "attribute": "hex",
+          "description": "Value of hex without # sign, supports both 3-digits shorthand hex and regular 6-digits hex",
+          "type": "string",
+          "default": "\"\""
+        },
+        {
+          "name": "red",
+          "attribute": "red",
+          "description": "Red value from 0 to 255",
+          "type": "string",
+          "default": "\"\""
+        },
+        {
+          "name": "green",
+          "attribute": "green",
+          "description": "Green value from 0 to 255",
+          "type": "string",
+          "default": "\"\""
+        },
+        {
+          "name": "blue",
+          "attribute": "blue",
+          "description": "Blue value from 0 to 255",
+          "type": "string",
+          "default": "\"\""
+        },
+        {
+          "name": "header",
+          "attribute": "header",
+          "description": "Set Header/Title of the color dialog",
+          "type": "string|null"
+        },
+        {
+          "name": "opened",
+          "attribute": "opened",
+          "description": "Set dialog to open",
+          "type": "boolean",
+          "default": "false"
+        },
+        {
+          "name": "noCancelOnEscKey",
+          "description": "Prevents dialog to close when user presses ESC key",
+          "type": "boolean",
+          "default": "false"
+        },
+        {
+          "name": "x",
+          "attribute": "x",
+          "description": "Set a specific x coordinate of dialog",
+          "type": "string"
+        },
+        {
+          "name": "y",
+          "attribute": "y",
+          "description": "Set a specific y coordinate of dialog",
+          "type": "string"
+        },
+        {
+          "name": "positionTarget",
+          "description": "Set position of dialog i.e. `top`, `right`, `left`, `bottom`, `center` or combination of theme e.g. `top right`.",
+          "type": "string"
+        },
+        {
+          "name": "noCancelOnOutsideClick",
+          "description": "Prevents dialog to close when user clicks outside the dialog.",
+          "type": "boolean",
+          "default": "true"
+        },
+        {
+          "name": "withBackdrop",
+          "description": "False to hide backdrop.",
+          "type": "boolean",
+          "default": "true"
+        },
+        {
+          "name": "draggable",
+          "description": "False to make the dialog not draggable.",
+          "type": "boolean",
+          "default": "true"
+        },
+        {
+          "name": "withShadow",
+          "description": "False to remove shadow for dialog component.",
+          "type": "boolean",
+          "default": "true"
+        }
+      ],
+      "events": [
+        {
+          "name": "value-changed",
+          "description": "Fired when the `value` property changes."
+        },
+        {
+          "name": "opened-changed",
+          "description": "Fired when the `opened` property changes."
+        }
+      ]
+    }
+  ]
+}

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`  |         | 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` |         | 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`       |                 | `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`         |                 | `string`       |         | 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`       |         | Set a specific x coordinate of dialog            |
+| `y`                      | `y`             | `string`       |         | 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

@@ -0,0 +1,52 @@
+import { JSXInterface } from '../../jsx';
+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
+ */
+export declare class ColorPalettes extends Palettes {
+    /**
+     * 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 CSS template
+     */
+    static get styles(): CSSResultGroup;
+    /**
+     * create color items template from COLOR_ITEMS array
+     * @return color items template
+     */
+    private get ColorItemsTemplate();
+    /**
+     * Update color selector element when value has been changed
+     * @param changedProperties Properties that has changed
+     * @return {void}
+     */
+    protected updated(changedProperties: PropertyValues): void;
+    /**
+     * A `TemplateResult` that will be used
+     * to render the updated internal template.
+     * @return {TemplateResult}  Render template
+     */
+    protected render(): TemplateResult;
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'ef-color-palettes': ColorPalettes;
+  }
+
+  namespace JSX {
+    interface IntrinsicElements {
+      'ef-color-palettes': Partial<ColorPalettes> | JSXInterface.HTMLAttributes<ColorPalettes>;
+    }
+  }
+}
+
+export {};

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

@@ -0,0 +1,101 @@
+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 {
+    /**
+     * 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 CSS template
+     */
+    static get styles() {
+        return css `
+      :host {
+        display: block;
+      }
+      svg {
+        width: 100%;
+      }
+      .color-selector {
+        stroke: #fff;
+        stroke-width: 2;
+        fill: none;
+        pointer-events: none;
+      }
+      .color-selector-shadow {
+        stroke: black;
+        stroke-width: 3;
+        fill: none;
+        pointer-events: none;
+      }
+    `;
+    }
+    /**
+     * create color items template from COLOR_ITEMS array
+     * @return color items template
+     */
+    get ColorItemsTemplate() {
+        return COLOR_ITEMS.map((item) => {
+            return (svg `
+          <polygon
+            data-role="color-item"
+            stroke=${item[1]}
+            fill=${item[1]}
+            points=${item[0]}
+            @tap=${this.onTapItem}
+            @mousemove=${this.onMousemove}
+            @touchmove=${this.onTouchmove}
+          >
+          </polygon>
+        `);
+        });
+    }
+    /**
+     * Update color selector element when value has been changed
+     * @param changedProperties Properties that has changed
+     * @return {void}
+     */
+    updated(changedProperties) {
+        if (changedProperties.has('value')) {
+            const value = this.expandHex(this.value);
+            const item = COLOR_ITEMS.find((item) => item[1] === value);
+            if (item) {
+                this.showSelector(item[0]);
+            }
+            else {
+                this.hideSelector();
+            }
+        }
+    }
+    /**
+     * A `TemplateResult` that will be used
+     * to render the updated internal template.
+     * @return {TemplateResult}  Render template
+     */
+    render() {
+        return html `
+      <svg id="colorPalettes" viewBox="-5 -5 245 210">
+        ${this.ColorItemsTemplate}
+        ${this.SelectorTemplate}
+      </svg>
+    `;
+    }
+};
+ColorPalettes = __decorate([
+    customElement('ef-color-palettes', { theme: false })
+], ColorPalettes);
+export { ColorPalettes };

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

@@ -0,0 +1,67 @@
+import { JSXInterface } from '../../jsx';
+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 {
+    /**
+     * 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 CSS template
+     */
+    static get styles(): CSSResultGroup;
+    /**
+     * Set the palettes to activate no-color option
+     */
+    allowNocolor: boolean;
+    /**
+     * Create grayscale items template from GRAYSCALE_ITEMS array
+     * @return grayscale items template
+     */
+    private get GrayscaleItemsTemplate();
+    /**
+     * Create no color item template
+     * @return no color item template
+     */
+    private get NoColorItemTemplate();
+    /**
+     * Update color selector element when value has been changed
+     * @param changedProperties Properties that has changed
+     * @return {void}
+     */
+    protected updated(changedProperties: PropertyValues): void;
+    /**
+     * Update color value and fired value-changed event
+     * @param element target element to get value
+     * @return {void}
+     */
+    protected updateValue(element: SVGAElement): void;
+    /**
+     * A `TemplateResult` that will be used
+     * to render the updated internal template.
+     * @return {TemplateResult}  Render template
+     */
+    protected render(): TemplateResult;
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'ef-grayscale-palettes': GrayscalePalettes;
+  }
+
+  namespace JSX {
+    interface IntrinsicElements {
+      'ef-grayscale-palettes': Partial<GrayscalePalettes> | JSXInterface.HTMLAttributes<GrayscalePalettes>;
+    }
+  }
+}
+
+export {};

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

@@ -0,0 +1,161 @@
+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
+ */
+let GrayscalePalettes = class GrayscalePalettes extends Palettes {
+    constructor() {
+        super(...arguments);
+        /**
+         * Set the palettes to activate no-color option
+         */
+        this.allowNocolor = false;
+    }
+    /**
+     * 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 CSS template
+     */
+    static get styles() {
+        return css `
+      :host {
+        display: flex;
+        justify-content: center;
+        max-height: 23px;
+        min-height: 0;
+      }
+      line {
+        pointer-events: none;
+      }
+      .color-selector {
+        stroke: #fff;
+        stroke-width: 2;
+        fill: none;
+        pointer-events: none;
+      }
+      .color-selector-shadow {
+        stroke: black;
+        stroke-width: 3;
+        fill: none;
+        pointer-events: none;
+      }
+      svg {
+        height: 100%;
+      }
+    `;
+    }
+    /**
+     * Create grayscale items template from GRAYSCALE_ITEMS array
+     * @return grayscale items template
+     */
+    get GrayscaleItemsTemplate() {
+        return GRAYSCALE_ITEMS.map((item) => {
+            return (svg `
+          <polygon
+            data-role="color-item"
+            stroke="rgba(0,0,0,0.4)"
+            fill=${item[1]}
+            points=${item[0]}
+            @tap=${this.onTapItem}
+            @mousemove=${this.onMousemove}
+            @touchmove=${this.onTouchmove}
+          >
+          </polygon>
+        `);
+        });
+    }
+    /**
+     * Create no color item template
+     * @return no color item template
+     */
+    get NoColorItemTemplate() {
+        return this.allowNocolor ? (svg `
+        <polygon
+          id="nocolor-item"
+          stroke="rgba(0,0,0,0.4)"
+          fill="#fff"
+          points=${NOCOLOR_POINTS}
+          @tap=${this.onTapItem}
+          @mousemove=${this.onMousemove}
+          @touchmove=${this.onTouchmove}
+        >
+        </polygon>
+        <line x1="15" y1="6" x2="-3" y2="17" stroke="red" stroke-width="2"></line>
+      `) : null;
+    }
+    /**
+     * Update color selector element when value has been changed
+     * @param changedProperties Properties that has changed
+     * @return {void}
+     */
+    updated(changedProperties) {
+        if (changedProperties.has('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);
+            }
+            else if (item) {
+                this.showSelector(item[0]);
+            }
+            else {
+                this.hideSelector();
+            }
+        }
+        // hide selector if value equal '' and allowNocolor has been changed to false
+        if (changedProperties.has('allowNocolor')) {
+            if (!this.allowNocolor && this.value === '') {
+                this.hideSelector();
+            }
+        }
+    }
+    /**
+     * Update color value and fired value-changed event
+     * @param element target element to get value
+     * @return {void}
+     */
+    updateValue(element) {
+        const color = element.getAttribute('fill');
+        const itemId = element.getAttribute('id');
+        if (color) {
+            this.value = itemId === 'nocolor-item' ? '' : color;
+            this.notifyPropertyChange('value', color);
+        }
+    }
+    /**
+     * A `TemplateResult` that will be used
+     * to render the updated internal template.
+     * @return {TemplateResult}  Render template
+     */
+    render() {
+        const viewBox = this.allowNocolor ? '-5 0 169 23' : '6 0 169 23';
+        return html `
+      <svg id="grayscale-palettes" viewBox=${viewBox}>
+        ${this.NoColorItemTemplate}
+        ${this.GrayscaleItemsTemplate}
+        ${this.SelectorTemplate}
+      </svg>
+    `;
+    }
+};
+__decorate([
+    property({ type: Boolean, attribute: 'allow-nocolor' })
+], GrayscalePalettes.prototype, "allowNocolor", void 0);
+GrayscalePalettes = __decorate([
+    customElement('ef-grayscale-palettes', { theme: false })
+], GrayscalePalettes);
+export { GrayscalePalettes };

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

@@ -0,0 +1,65 @@
+import { BasicElement, SVGTemplateResult } from '@refinitiv-ui/core';
+/**
+ * Element base class usually used
+ * for creating palettes elements.
+ */
+export declare class Palettes extends BasicElement {
+    /**
+     * Element version number
+     * @returns version number
+     */
+    static get version(): string;
+    private colorSelector?;
+    private colorSelectorShadow?;
+    /**
+     * Color value in hex
+     */
+    value: string;
+    /**
+     * Create selector template
+     * @return {SVGTemplateResult} selector template
+     */
+    protected get SelectorTemplate(): SVGTemplateResult;
+    /**
+     * Hide selector element
+     * @return {void}
+     */
+    protected hideSelector(): void;
+    /**
+     * Show selector element on specific points
+     * @return {void}
+     * @param points points of colorSelector
+     */
+    protected showSelector(points: string): void;
+    /**
+     * Update color value when tab on color item
+     * @param event mouse event
+     * @return {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;
+    /**
+     * Update color value when drag on color item in mobile device
+     * @param event touch event
+     * @return {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;
+}