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

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

@@ -1,101 +0,0 @@
-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

@@ -1,67 +0,0 @@
-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

@@ -1,161 +0,0 @@
-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

@@ -1,65 +0,0 @@
-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

@@ -1,132 +0,0 @@
-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

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