@refinitiv-ui/elements 5.12.0-alpha.0 → 5.12.0

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;
+}

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;