@refinitiv-ui/elements 5.12.0-alpha.1 → 5.12.0-alpha.2

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

@@ -0,0 +1,232 @@
+import { JSXInterface } from '../jsx';
+import { TemplateResult, CSSResultGroup, PropertyValues } from '@refinitiv-ui/core';
+import '../button/index.js';
+import '../number-field/index.js';
+import '../text-field/index.js';
+import { Dialog } from '../dialog/index.js';
+import './elements/color-palettes.js';
+import './elements/grayscale-palettes.js';
+import { Translate } from '@refinitiv-ui/translate';
+import '@refinitiv-ui/phrasebook/locale/en/color-dialog.js';
+/**
+ * Displays a colour picker dialog,
+ * for selecting a predefined range of colours.
+ *
+ * @fires value-changed - Fired when the `value` property changes.
+ * @fires opened-changed - Fired when the `opened` property changes.
+ *
+ * @attr {string | null} header - Set Header/Title of the color dialog
+ * @prop {string | null} [header=null] - Set Header/Title of the color dialog
+ *
+ * @attr {boolean} [opened=false] - Set dialog to open
+ * @prop {boolean} [opened=false] - Set dialog to open
+ *
+ * @attr {boolean} [no-cancel-on-esc-key=false] - Prevents dialog to close when user presses ESC key
+ * @prop {boolean} [noCancelOnEscKey=false] - Prevents dialog to close when user presses ESC key
+ *
+ * @attr {string | undefined} x - Set a specific x coordinate of dialog
+ * @prop {string | undefined} x - Set a specific x coordinate of dialog
+ *
+ * @attr {string | undefined} y - Set a specific y coordinate of dialog
+ * @prop {string | undefined} y - Set a specific y coordinate of dialog
+ *
+ * @attr {string | undefined} position-target - Set position of dialog i.e. `top`, `right`, `left`, `bottom`, `center` or combination of theme e.g. `top right`.
+ * @prop {string | undefined} positionTarget - Set position of dialog i.e. `top`, `right`, `left`, `bottom`, `center` or combination of theme e.g. `top right`.
+ *
+ * @prop {boolean} [noCancelOnOutsideClick=true] - Prevents dialog to close when user clicks outside the dialog.
+ *
+ * @prop {boolean} [withBackdrop=true] - False to hide backdrop.
+ *
+ * @prop {boolean} [draggable=true] - False to make the dialog not draggable.
+ *
+ * @prop {boolean} [withShadow=true] - False to remove shadow for dialog component.
+ */
+export declare class ColorDialog extends Dialog {
+    /**
+     * 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;
+    /**
+     * speed up rendering by not populating content on page load
+     */
+    private lazyRendered;
+    /**
+     * Color dialog has commit button to update actual values
+     * Value model is used to support this functionality
+     */
+    private valueModel;
+    /**
+    * @ignore
+    */
+    draggable: boolean;
+    /**
+     * Set the palettes to activate no-color option
+     */
+    allowNocolor: boolean;
+    private _value;
+    /**
+     * Value of selected color from color dialog will be written here as hex value
+     * e.g. "#00f" or "#0000ff"
+     * @default -
+     * @param value A value to set
+     */
+    set value(value: string);
+    get value(): string;
+    /**
+     * Value of hex without # sign, supports both 3-digits shorthand hex and regular 6-digits hex
+     * @default -
+     * @param hex A hex value to set
+     */
+    set hex(hex: string);
+    get hex(): string;
+    /**
+     * Red value from 0 to 255
+     * @default -
+     * @param red Red value
+     */
+    set red(red: string);
+    get red(): string;
+    /**
+     * Green value from 0 to 255
+     * @default -
+     * @param green Green value
+     */
+    set green(green: string);
+    get green(): string;
+    /**
+     * Blue value from 0 to 255
+     * @default -
+     * @param blue Blue value
+     */
+    set blue(blue: string);
+    get blue(): string;
+    /**
+     * Used for translations
+     */
+    protected t: Translate;
+    /**
+     * A rgb color input for red spectrum
+     */
+    private redInputEl?;
+    /**
+     * A rgb color input for green spectrum
+     */
+    private greenInputEl?;
+    /**
+     * A rgb color input for blue spectrum
+     */
+    private blueInputEl?;
+    /**
+     * Check if component should be updated
+     * @param changedProperties properties changed on shouldUpdate lifecycle callback
+     * @returns boolean should component update
+     */
+    protected shouldUpdate(changedProperties: PropertyValues): boolean;
+    /**
+     * Updates the element
+     * @param changedProperties Properties that has changed
+     * @returns {void}
+     */
+    protected update(changedProperties: PropertyValues): void;
+    /**
+     * @inheritdoc
+     * Reset value model
+     * @param opened True if opened
+     * @returns {void}
+     */
+    protected setOpened(opened: boolean): void;
+    /**
+     * Reset value model always resets
+     * when either red, green, blue, hex or value are changed externally
+     * Value model is reset internally otherwise
+     * @returns {void}
+     */
+    private resetValueModel;
+    /**
+     * Check if value is valid HEX value (including #)
+     * @param value Value to check
+     * @returns true if value is valid
+     */
+    private isValidValue;
+    /**
+     * Check if value is valid HEX value (excluding #)
+     * @param value Value to check
+     * @returns true if value is valid
+     */
+    private isValidHex;
+    /**
+     * Check if value is within 0 - 255, and warn of it is not
+     * @param value Value to check
+     * @returns true if value is within 0 - 255
+     */
+    private isValidRGB;
+    /**
+     * update color value when tapping or dragging on color palettes
+     * @param event select color event
+     * @return {void}
+     */
+    private onColorChanged;
+    /**
+     * update hex value when typing on hex input
+     * @param event input event
+     * @return {void}
+     */
+    private onHexChanged;
+    /**
+     * update r,g,b value when typing on RGB inputs
+     * @param event input event
+     * @return {void}
+     */
+    private onRGBChanged;
+    /**
+     * set opened state to false
+     * @return {void}
+     */
+    private onCloseDialog;
+    /**
+     * fired value-changed event and close dialog
+     * @return {void}
+     */
+    private onConfirmValue;
+    /**
+     * Check if apply button is disabled
+     * The button is disabled if value is invalid
+     * or value has not changed
+     * @returns {boolean} true if disabled
+     */
+    private isApplyDisabled;
+    /**
+     * A `TemplateResult` that will be used
+     * to render the updated internal template.
+     * @return {TemplateResult}  Render template
+     */
+    protected get contentRegion(): TemplateResult;
+    /**
+     * A `TemplateResult` that will be used
+     * to render the updated internal template.
+     * @return {TemplateResult}  Render template
+     */
+    protected get footerRegion(): TemplateResult;
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'ef-color-dialog': ColorDialog;
+  }
+
+  namespace JSX {
+    interface IntrinsicElements {
+      'ef-color-dialog': Partial<ColorDialog> | JSXInterface.HTMLAttributes<ColorDialog>;
+    }
+  }
+}
+
+export {};

package/lib/color-dialog/index.js

@@ -0,0 +1,459 @@
+import { __decorate } from "tslib";
+import { html, css, WarningNotice } from '@refinitiv-ui/core';
+import { customElement } from '@refinitiv-ui/core/decorators/custom-element.js';
+import { property } from '@refinitiv-ui/core/decorators/property.js';
+import { query } from '@refinitiv-ui/core/decorators/query.js';
+import { styleMap } from '@refinitiv-ui/core/directives/style-map.js';
+import { rgb } from '@refinitiv-ui/utils/color.js';
+import { VERSION } from '../version.js';
+import { ValueModel } from './helpers/value-model.js';
+import { isHex, removeHashSign } from './helpers/color-helpers.js';
+import '../button/index.js';
+import '../number-field/index.js';
+import '../text-field/index.js';
+import { Dialog } from '../dialog/index.js';
+import './elements/color-palettes.js';
+import './elements/grayscale-palettes.js';
+import { translate } from '@refinitiv-ui/translate';
+import '@refinitiv-ui/phrasebook/locale/en/color-dialog.js';
+/**
+ * Displays a colour picker dialog,
+ * for selecting a predefined range of colours.
+ *
+ * @fires value-changed - Fired when the `value` property changes.
+ * @fires opened-changed - Fired when the `opened` property changes.
+ *
+ * @attr {string | null} header - Set Header/Title of the color dialog
+ * @prop {string | null} [header=null] - Set Header/Title of the color dialog
+ *
+ * @attr {boolean} [opened=false] - Set dialog to open
+ * @prop {boolean} [opened=false] - Set dialog to open
+ *
+ * @attr {boolean} [no-cancel-on-esc-key=false] - Prevents dialog to close when user presses ESC key
+ * @prop {boolean} [noCancelOnEscKey=false] - Prevents dialog to close when user presses ESC key
+ *
+ * @attr {string | undefined} x - Set a specific x coordinate of dialog
+ * @prop {string | undefined} x - Set a specific x coordinate of dialog
+ *
+ * @attr {string | undefined} y - Set a specific y coordinate of dialog
+ * @prop {string | undefined} y - Set a specific y coordinate of dialog
+ *
+ * @attr {string | undefined} position-target - Set position of dialog i.e. `top`, `right`, `left`, `bottom`, `center` or combination of theme e.g. `top right`.
+ * @prop {string | undefined} positionTarget - Set position of dialog i.e. `top`, `right`, `left`, `bottom`, `center` or combination of theme e.g. `top right`.
+ *
+ * @prop {boolean} [noCancelOnOutsideClick=true] - Prevents dialog to close when user clicks outside the dialog.
+ *
+ * @prop {boolean} [withBackdrop=true] - False to hide backdrop.
+ *
+ * @prop {boolean} [draggable=true] - False to make the dialog not draggable.
+ *
+ * @prop {boolean} [withShadow=true] - False to remove shadow for dialog component.
+ */
+let ColorDialog = class ColorDialog extends Dialog {
+    constructor() {
+        super(...arguments);
+        /**
+         * speed up rendering by not populating content on page load
+         */
+        this.lazyRendered = false;
+        /**
+         * Color dialog has commit button to update actual values
+         * Value model is used to support this functionality
+         */
+        this.valueModel = new ValueModel();
+        /**
+        * @ignore
+        */
+        this.draggable = true;
+        /**
+         * Set the palettes to activate no-color option
+         */
+        this.allowNocolor = false;
+        this._value = '';
+    }
+    /**
+     * 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 [
+            super.styles,
+            css `
+        :host {
+          display: block;
+        }
+        [part=preview-color][no-color] {
+          background: linear-gradient(to bottom right, transparent calc(50% - 2px),
+          var(--no-color-line-color, #ff0000) calc(50% - 1px),
+          var(--no-color-line-color, #ff0000) calc(50% + 1px),
+          transparent calc(50% + 2px));
+        }
+    `
+        ];
+    }
+    /**
+     * Value of selected color from color dialog will be written here as hex value
+     * e.g. "#00f" or "#0000ff"
+     * @default -
+     * @param value A value to set
+     */
+    set value(value) {
+        value = String(value);
+        const oldValue = this._value;
+        if (!this.isValidValue(value)) {
+            value = '';
+        }
+        this._value = value;
+        this.requestUpdate('value', oldValue);
+    }
+    get value() {
+        return this._value;
+    }
+    /**
+     * Value of hex without # sign, supports both 3-digits shorthand hex and regular 6-digits hex
+     * @default -
+     * @param hex A hex value to set
+     */
+    set hex(hex) {
+        hex = String(hex);
+        if (!this.isValidHex(hex)) {
+            hex = '';
+        }
+        this.value = hex ? `#${hex}` : '';
+    }
+    get hex() {
+        const value = this.value;
+        return value ? removeHashSign(value) : '';
+    }
+    /**
+     * Red value from 0 to 255
+     * @default -
+     * @param red Red value
+     */
+    set red(red) {
+        red = String(red);
+        this.value = this.isValidRGB(red) ? rgb(Number(red), Number(this.green), Number(this.blue)).formatHex() : '';
+    }
+    get red() {
+        return this.hex ? rgb(`#${this.hex}`).r.toString() : '';
+    }
+    /**
+     * Green value from 0 to 255
+     * @default -
+     * @param green Green value
+     */
+    set green(green) {
+        green = String(green);
+        this.value = this.isValidRGB(green) ? rgb(Number(this.red), Number(green), Number(this.blue)).formatHex() : '';
+    }
+    get green() {
+        return this.hex ? rgb(`#${this.hex}`).g.toString() : '';
+    }
+    /**
+     * Blue value from 0 to 255
+     * @default -
+     * @param blue Blue value
+     */
+    set blue(blue) {
+        blue = String(blue);
+        this.value = this.isValidRGB(blue) ? rgb(Number(this.red), Number(this.green), Number(blue)).formatHex() : '';
+    }
+    get blue() {
+        return this.hex ? rgb(`#${this.hex}`).b.toString() : '';
+    }
+    /**
+     * Check if component should be updated
+     * @param changedProperties properties changed on shouldUpdate lifecycle callback
+     * @returns boolean should component update
+     */
+    shouldUpdate(changedProperties) {
+        const shouldUpdate = super.shouldUpdate(changedProperties);
+        return shouldUpdate
+            || changedProperties.has('allowNocolor')
+            || changedProperties.has('red')
+            || changedProperties.has('green')
+            || changedProperties.has('blue')
+            || changedProperties.has('value')
+            || changedProperties.has('hex')
+            || changedProperties.has('enableConfirm');
+    }
+    /**
+     * Updates the element
+     * @param changedProperties Properties that has changed
+     * @returns {void}
+     */
+    update(changedProperties) {
+        if (changedProperties.has('value')) {
+            // ensure that the internal values are always in sync when set externally
+            this.resetValueModel();
+        }
+        if (this.opened && changedProperties.has('opened')) {
+            this.lazyRendered = true;
+        }
+        super.update(changedProperties);
+    }
+    /**
+     * @inheritdoc
+     * Reset value model
+     * @param opened True if opened
+     * @returns {void}
+     */
+    setOpened(opened) {
+        // setOpened is run only from internal context. It is safe to reset it here
+        this.resetValueModel();
+        super.setOpened(opened);
+    }
+    /**
+     * Reset value model always resets
+     * when either red, green, blue, hex or value are changed externally
+     * Value model is reset internally otherwise
+     * @returns {void}
+     */
+    resetValueModel() {
+        this.valueModel = new ValueModel(this.value);
+    }
+    /**
+     * Check if value is valid HEX value (including #)
+     * @param value Value to check
+     * @returns true if value is valid
+     */
+    isValidValue(value) {
+        const isValid = value === '' || isHex(value);
+        if (!isValid) {
+            new WarningNotice(`The specified value "${value}" is not valid value. The correct value should look like "#fff" or "#ffffff".`).show();
+        }
+        return isValid;
+    }
+    /**
+     * Check if value is valid HEX value (excluding #)
+     * @param value Value to check
+     * @returns true if value is valid
+     */
+    isValidHex(value) {
+        const isValid = value === '' || (!value.includes('#') && isHex(`#${value}`));
+        if (!isValid) {
+            new WarningNotice(`The specified hex "${value}" is not valid color. The correct value should look like "fff" or "ffffff".`).show();
+        }
+        return isValid;
+    }
+    /**
+     * Check if value is within 0 - 255, and warn of it is not
+     * @param value Value to check
+     * @returns true if value is within 0 - 255
+     */
+    isValidRGB(value) {
+        const isValid = value === '' || Number(value) >= 0 && Number(value) <= 255;
+        if (!isValid) {
+            new WarningNotice(`The specified RGB "${value}" is not valid color. The value should be 0 - 255.`).show();
+        }
+        return isValid;
+    }
+    /**
+     * update color value when tapping or dragging on color palettes
+     * @param event select color event
+     * @return {void}
+     */
+    onColorChanged(event) {
+        this.valueModel.hex = removeHashSign(event.target.value);
+        this.requestUpdate();
+    }
+    /**
+     * update hex value when typing on hex input
+     * @param event input event
+     * @return {void}
+     */
+    onHexChanged(event) {
+        this.valueModel.hex = event.target.value;
+        this.requestUpdate();
+    }
+    /**
+     * update r,g,b value when typing on RGB inputs
+     * @param event input event
+     * @return {void}
+     */
+    onRGBChanged(event) {
+        const targetElem = event.target;
+        if (targetElem === this.redInputEl) {
+            this.valueModel.red = this.redInputEl.value;
+        }
+        else if (targetElem === this.greenInputEl) {
+            this.valueModel.green = this.greenInputEl.value;
+        }
+        else if (targetElem === this.blueInputEl) {
+            this.valueModel.blue = this.blueInputEl.value;
+        }
+        this.requestUpdate();
+    }
+    /**
+     * set opened state to false
+     * @return {void}
+     */
+    onCloseDialog() {
+        this.setOpened(false);
+    }
+    /**
+     * fired value-changed event and close dialog
+     * @return {void}
+     */
+    onConfirmValue() {
+        // no need to check for anything, as the button is disabled if not dirty is invalid
+        this.value = this.valueModel.value;
+        this.notifyPropertyChange('value', this.value);
+        this.setOpened(false);
+    }
+    /**
+     * Check if apply button is disabled
+     * The button is disabled if value is invalid
+     * or value has not changed
+     * @returns {boolean} true if disabled
+     */
+    isApplyDisabled() {
+        return this.valueModel.hasChanged() && this.valueModel.isValid() ? this.allowNocolor ? false : this.valueModel.hex === '' : true;
+    }
+    /**
+     * A `TemplateResult` that will be used
+     * to render the updated internal template.
+     * @return {TemplateResult}  Render template
+     */
+    get contentRegion() {
+        if (!this.lazyRendered) {
+            return html ``;
+        }
+        return html `
+      <div part="content-section">
+        <div part="palettes-container">
+          <ef-color-palettes
+            .value=${this.valueModel.value}
+            @value-changed=${this.onColorChanged}
+            part="color-palettes">
+          </ef-color-palettes>
+          <ef-grayscale-palettes
+            .value=${this.valueModel.value}
+            @value-changed=${this.onColorChanged}
+            ?allow-nocolor=${this.allowNocolor}
+            part="grayscale-palettes"
+            >
+          </ef-grayscale-palettes>
+        </div>
+        <div part="inputs-container">
+          <div
+            part="preview-color"
+            style=${styleMap({
+            backgroundColor: this.valueModel.value || undefined
+        })}
+            ?no-color=${!this.valueModel.value}></div>
+          <div>${this.t('RED')}&nbsp;:
+            <ef-number-field
+              .value=${this.valueModel.red}
+              @value-changed=${this.onRGBChanged}
+              part="color-input"
+              min="0"
+              max="255"
+              no-spinner
+              id="redInput"
+            ></ef-number-field>
+          </div>
+          <div>${this.t('GREEN')}&nbsp;:
+            <ef-number-field
+              .value=${this.valueModel.green}
+              @value-changed=${this.onRGBChanged}
+              part="color-input"
+              min="0"
+              max="255"
+              no-spinner
+              id="greenInput"
+            ></ef-number-field>
+          </div>
+          <div>${this.t('BLUE')}&nbsp;:
+            <ef-number-field
+              .value=${this.valueModel.blue}
+              @value-changed=${this.onRGBChanged}
+              part="color-input"
+              min="0"
+              max="255"
+              no-spinner
+              id="blueInput"
+            ></ef-number-field>
+          </div>
+          <div>#&nbsp;:
+            <ef-text-field
+              .value=${this.valueModel.hex}
+              @value-changed=${this.onHexChanged}
+              pattern="^([0-9a-fA-F]{3}){1,2}$"
+              part="color-input"
+              id="hexInput"
+              maxlength="6">
+            </ef-text-field>
+          </div>
+        </div>
+      </div>
+    `;
+    }
+    /**
+     * A `TemplateResult` that will be used
+     * to render the updated internal template.
+     * @return {TemplateResult}  Render template
+     */
+    get footerRegion() {
+        if (!this.lazyRendered) {
+            return html ``;
+        }
+        return html `
+      <ef-button
+        id="confirmButton"
+        part="button"
+        cta
+        @tap=${this.onConfirmValue}
+        ?disabled=${this.isApplyDisabled()}>${this.t('APPLY')}</ef-button>
+      <ef-button
+        id="closeButton"
+        @tap=${this.onCloseDialog}
+        part="button">${this.t('CLOSE')}</ef-button>
+    `;
+    }
+};
+__decorate([
+    property({ type: Boolean, attribute: 'allow-nocolor' })
+], ColorDialog.prototype, "allowNocolor", void 0);
+__decorate([
+    property({ type: String })
+], ColorDialog.prototype, "value", null);
+__decorate([
+    property({ type: String })
+], ColorDialog.prototype, "hex", null);
+__decorate([
+    property({ type: String })
+], ColorDialog.prototype, "red", null);
+__decorate([
+    property({ type: String })
+], ColorDialog.prototype, "green", null);
+__decorate([
+    property({ type: String })
+], ColorDialog.prototype, "blue", null);
+__decorate([
+    translate()
+], ColorDialog.prototype, "t", void 0);
+__decorate([
+    query('#redInput')
+], ColorDialog.prototype, "redInputEl", void 0);
+__decorate([
+    query('#greenInput')
+], ColorDialog.prototype, "greenInputEl", void 0);
+__decorate([
+    query('#blueInput')
+], ColorDialog.prototype, "blueInputEl", void 0);
+ColorDialog = __decorate([
+    customElement('ef-color-dialog', {
+        alias: 'emerald-color-dialog'
+    })
+], ColorDialog);
+export { ColorDialog };

package/lib/color-dialog/themes/halo/dark/index.js

@@ -0,0 +1,7 @@
+import '@refinitiv-ui/elements/lib/text-field/themes/halo/dark';
+import '@refinitiv-ui/elements/lib/number-field/themes/halo/dark';
+import '@refinitiv-ui/elements/lib/button/themes/halo/dark';
+import '@refinitiv-ui/elements/lib/panel/themes/halo/dark';
+import '@refinitiv-ui/elements/lib/dialog/themes/halo/dark';
+
+elf.customStyles.define('ef-color-dialog', ':host{width:425px}:host [part=content-section]{display:flex;min-width:0}:host [part=inputs-container]{display:flex;flex-direction:column;align-items:flex-end;padding-left:15px}:host [part=inputs-container]>*{display:flex;align-items:center;margin-bottom:5px}:host [part=color-input],:host [part=preview-color]{touch-action:manipulation;margin:2px;width:100px;box-sizing:border-box}:host [part=preview-color]{border:1px solid #404040;height:24px;margin-bottom:10px}:host [part=palettes-container]{width:100%}:host [part=color-palettes]{width:100%;height:calc(100% - 23px)}:host [part=grayscale-palettes]{height:23px}:host [part=color-palettes],:host [part=grayscale-palettes]{touch-action:manipulation}:host [part=footer]{display:flex;justify-content:flex-end;align-items:center}:host [part=button]{touch-action:manipulation;margin:8px}:host [part=button]:first-child{margin-right:0}');