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

package/lib/collapse/index.js

@@ -0,0 +1,197 @@
+var Collapse_1;
+import { __decorate } from "tslib";
+import { BasicElement, css, html } 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 { VERSION } from '../version.js';
+import '../header/index.js';
+import '../panel/index.js';
+import '../icon/index.js';
+/**
+ * Allows users to hide non-critical information
+ * or areas of the screen, maximizing the amount of real estate
+ * for their primary displays.
+ *
+ * @fires expanded-changed - Fired when the `expanded` property changes.
+ *
+ * @slot header-left - Slot to add custom contents to the left side of header e.g. ef-icon, ef-checkbox
+ * @slot header-right - Slot to add custom contents to the right side of header e.g. ef-icon, ef-checkbox
+ */
+let Collapse = Collapse_1 = class Collapse extends BasicElement {
+    constructor() {
+        super(...arguments);
+        /**
+         * Set text on the header
+         */
+        this.header = null;
+        /**
+         * Use level styling from theme
+         */
+        this.level = '3';
+        /**
+         * Set to expand the item
+         */
+        this.expanded = false;
+        /**
+         * Set to apply padding from theme to content section
+         */
+        this.spacing = false;
+        /**
+         * Handle tap on the item header, will toggle the expanded state
+         * @param event Event object
+         * @returns {void}
+         */
+        this.handleTap = (event) => {
+            const target = event.target;
+            // This is to prevent toggling when elements on slots are tap
+            if (Collapse_1.isHeader(target)) {
+                this.toggle();
+            }
+        };
+    }
+    /**
+     * 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;
+      }
+      [part="header"] {
+        cursor: default;
+      }
+      [part="toggle"] {
+        display: inline-block;
+        margin: 0 5px;
+      }
+      [part="content"]  {
+        overflow: hidden;
+        box-sizing: border-box;
+      }
+      [no-animation] {
+        animation: none !important;
+      }
+    `;
+    }
+    /**
+     * Called once after the component is first rendered
+     * @param changedProperties map of changed properties with old values
+     * @returns {void}
+     */
+    firstUpdated(changedProperties) {
+        super.firstUpdated(changedProperties);
+        this.panelHolder && this.panelHolder.setAttribute('no-animation', '');
+    }
+    /**
+     * Invoked whenever the element is updated
+     * @param changedProperties map of changed properties with old values
+     * @return {void}
+     */
+    updated(changedProperties) {
+        super.updated(changedProperties);
+        if (changedProperties.has('expanded')) {
+            this.showHide();
+        }
+    }
+    /**
+     * Toggle the item
+     * @returns {void}
+     */
+    toggle() {
+        this.expanded = !this.expanded;
+        const event = this.notifyPropertyChange('expanded', this.expanded, true);
+        if (!event) { // revert expanded if event is cancelled
+            this.expanded = !this.expanded;
+        }
+    }
+    /**
+     * Check if target is a header
+     * @param element for checking
+     * @returns {boolean} true if target is ef-header
+     */
+    static isHeader(element) {
+        return element.localName === 'ef-header' || element.getAttribute('part') === 'toggle';
+    }
+    /**
+     * Show or Hide the item depending on the expanded state
+     * @returns {void}
+     */
+    showHide() {
+        if (!this.panelHolder) {
+            return;
+        }
+        this.panelHolder.removeAttribute(('no-animation'));
+        this.setAnimationTargetHeight(this.getContentHeight());
+    }
+    /**
+     * Set current content height at the target-height
+     * @param height number or null value
+     * @returns {void}
+     */
+    setAnimationTargetHeight(height) {
+        this.updateVariable('--target-height', `${height}px`);
+    }
+    /**
+     * Gets the height of the ef-panel element which contains the content
+     * will pass height including optional spacing
+     * @returns clientHeight of the panel so that the panel holder max-height can be set
+     */
+    getContentHeight() {
+        return this.panel && this.panel.clientHeight || 0;
+    }
+    /**
+     * A `TemplateResult` that will be used
+     * to render the updated internal template.
+     * @return {TemplateResult}  Render template
+     */
+    render() {
+        return html `
+      <ef-header part="header" level="${this.level}" @tap="${this.handleTap}">
+        <ef-icon icon="right" slot="left" part="toggle"></ef-icon>
+        <slot slot="left" name="header-left"></slot>
+        <slot slot="right" name="header-right"></slot>
+        ${this.header}
+      </ef-header>
+      <div part="content">
+        <ef-panel ?spacing="${this.spacing}" transparent>
+          <slot></slot>
+        </ef-panel>
+      </div>
+    `;
+    }
+};
+__decorate([
+    property({ type: String })
+], Collapse.prototype, "header", void 0);
+__decorate([
+    property({ type: String })
+], Collapse.prototype, "level", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], Collapse.prototype, "expanded", void 0);
+__decorate([
+    property({ type: Boolean })
+], Collapse.prototype, "spacing", void 0);
+__decorate([
+    query('[part="content"]', true)
+], Collapse.prototype, "panelHolder", void 0);
+__decorate([
+    query('ef-panel', true)
+], Collapse.prototype, "panel", void 0);
+Collapse = Collapse_1 = __decorate([
+    customElement('ef-collapse', {
+        alias: 'coral-collapse'
+    })
+], Collapse);
+export { Collapse };

package/lib/collapse/themes/halo/dark/index.js

@@ -0,0 +1,5 @@
+import '@refinitiv-ui/elements/lib/panel/themes/halo/dark';
+import '@refinitiv-ui/elements/lib/header/themes/halo/dark';
+import '@refinitiv-ui/elements/lib/icon/themes/halo/dark';
+
+elf.customStyles.define('ef-collapse', ':host [part=toggle]{transition:.1s;opacity:.5;flex-shrink:0;margin:0 4px;opacity:1}:host([expanded]) [part=toggle]{transform:rotate(90deg)}:host [part=header]{touch-action:manipulation;text-transform:inherit}@-webkit-keyframes expand{from{height:0}to{height:var(--target-height)}}@keyframes expand{from{height:0}to{height:var(--target-height)}}@-webkit-keyframes collapse{from{height:var(--target-height)}to{height:0}}@keyframes collapse{from{height:var(--target-height)}to{height:0}}:host [part=content]{-webkit-animation-duration:.1s;animation-duration:.1s;-webkit-animation-timing-function:ease;animation-timing-function:ease;text-transform:none}:host(:not([expanded])) [part=content]{height:0;-webkit-animation-name:collapse;animation-name:collapse}:host(:not([expanded])) [part=toggle]{transform:rotate(0)}:host([expanded]) [part=content]{-webkit-animation-name:expand;animation-name:expand}:host [part=content] ef-panel:not([spacing]){padding:var(--panel-padding)}:host{text-transform:uppercase}:host [part=header]:hover,:host([expanded]) [part=header]{color:#fff;cursor:pointer;background-color:#404040}:host [part=header]:hover[level="1"],:host([expanded]) [part=header][level="1"]{background-color:#5a5a5a}:host [part=header]:hover[level="2"],:host([expanded]) [part=header][level="2"]{background-color:#4d4d4d}:host [part=header]:hover[level="4"],:host([expanded]) [part=header][level="4"]{background-color:#343434}');

package/lib/collapse/themes/halo/light/index.js

@@ -0,0 +1,5 @@
+import '@refinitiv-ui/elements/lib/panel/themes/halo/light';
+import '@refinitiv-ui/elements/lib/header/themes/halo/light';
+import '@refinitiv-ui/elements/lib/icon/themes/halo/light';
+
+elf.customStyles.define('ef-collapse', ':host [part=toggle]{transition:.1s;opacity:.5;flex-shrink:0;margin:0 4px;opacity:1}:host([expanded]) [part=toggle]{transform:rotate(90deg)}:host [part=header]{touch-action:manipulation;text-transform:inherit}@-webkit-keyframes expand{from{height:0}to{height:var(--target-height)}}@keyframes expand{from{height:0}to{height:var(--target-height)}}@-webkit-keyframes collapse{from{height:var(--target-height)}to{height:0}}@keyframes collapse{from{height:var(--target-height)}to{height:0}}:host [part=content]{-webkit-animation-duration:.1s;animation-duration:.1s;-webkit-animation-timing-function:ease;animation-timing-function:ease;text-transform:none}:host(:not([expanded])) [part=content]{height:0;-webkit-animation-name:collapse;animation-name:collapse}:host(:not([expanded])) [part=toggle]{transform:rotate(0)}:host([expanded]) [part=content]{-webkit-animation-name:expand;animation-name:expand}:host [part=content] ef-panel:not([spacing]){padding:var(--panel-padding)}:host{text-transform:uppercase}:host [part=header]:hover,:host([expanded]) [part=header]{color:#0d0d0d;cursor:pointer;background-color:#eaeaea}:host [part=header]:hover[level="1"],:host([expanded]) [part=header][level="1"]{background-color:#d1d1d1}:host [part=header]:hover[level="2"],:host([expanded]) [part=header][level="2"]{background-color:#dedede}:host [part=header]:hover[level="4"],:host([expanded]) [part=header][level="4"]{background-color:#f2f2f2}');

package/lib/collapse/themes/halo/node_modules/@refinitiv-ui/elemental-theme/dark/index.js

@@ -0,0 +1,5 @@
+import '@refinitiv-ui/elements/lib/panel/themes/halo/node_modules/@refinitiv-ui/elemental-theme/dark';
+import '@refinitiv-ui/elements/lib/header/themes/halo/node_modules/@refinitiv-ui/elemental-theme/dark';
+import '@refinitiv-ui/elements/lib/icon/themes/halo/node_modules/@refinitiv-ui/elemental-theme/dark';
+
+elf.customStyles.define('ef-collapse', ':host [part=toggle]{transition:.2s;opacity:.5;margin-right:.5em;margin-left:.8em;flex-shrink:0}:host([expanded]) [part=toggle]{transform:rotate(90deg)}:host [part=header]{touch-action:manipulation}@-webkit-keyframes expand{from{height:0}to{height:var(--target-height)}}@keyframes expand{from{height:0}to{height:var(--target-height)}}@-webkit-keyframes collapse{from{height:var(--target-height)}to{height:0}}@keyframes collapse{from{height:var(--target-height)}to{height:0}}:host [part=content]{-webkit-animation-duration:.2s;animation-duration:.2s;-webkit-animation-timing-function:ease;animation-timing-function:ease}:host(:not([expanded])) [part=content]{height:0;-webkit-animation-name:collapse;animation-name:collapse}:host(:not([expanded])) [part=toggle]{transform:rotate(0)}:host([expanded]) [part=content]{-webkit-animation-name:expand;animation-name:expand}:host [part=content] ef-panel:not([spacing]){padding:var(--panel-padding)}');

package/lib/collapse/themes/halo/node_modules/@refinitiv-ui/elemental-theme/light/index.js

@@ -0,0 +1,5 @@
+import '@refinitiv-ui/elements/lib/panel/themes/halo/node_modules/@refinitiv-ui/elemental-theme/light';
+import '@refinitiv-ui/elements/lib/header/themes/halo/node_modules/@refinitiv-ui/elemental-theme/light';
+import '@refinitiv-ui/elements/lib/icon/themes/halo/node_modules/@refinitiv-ui/elemental-theme/light';
+
+elf.customStyles.define('ef-collapse', ':host [part=toggle]{transition:.2s;opacity:.5;margin-right:.5em;margin-left:.8em;flex-shrink:0}:host([expanded]) [part=toggle]{transform:rotate(90deg)}:host [part=header]{touch-action:manipulation}@-webkit-keyframes expand{from{height:0}to{height:var(--target-height)}}@keyframes expand{from{height:0}to{height:var(--target-height)}}@-webkit-keyframes collapse{from{height:var(--target-height)}to{height:0}}@keyframes collapse{from{height:var(--target-height)}to{height:0}}:host [part=content]{-webkit-animation-duration:.2s;animation-duration:.2s;-webkit-animation-timing-function:ease;animation-timing-function:ease}:host(:not([expanded])) [part=content]{height:0;-webkit-animation-name:collapse;animation-name:collapse}:host(:not([expanded])) [part=toggle]{transform:rotate(0)}:host([expanded]) [part=content]{-webkit-animation-name:expand;animation-name:expand}:host [part=content] ef-panel:not([spacing]){padding:var(--panel-padding)}');

package/lib/collapse/themes/solar/charcoal/index.js

@@ -0,0 +1,5 @@
+import '@refinitiv-ui/elements/lib/panel/themes/solar/charcoal';
+import '@refinitiv-ui/elements/lib/header/themes/solar/charcoal';
+import '@refinitiv-ui/elements/lib/icon/themes/solar/charcoal';
+
+elf.customStyles.define('ef-collapse', ':host [part=toggle]{transition:.2s;opacity:.5;flex-shrink:0;margin:0 7px 0 5px}:host([expanded]) [part=toggle]{transform:rotate(90deg)}:host [part=header]{touch-action:manipulation}@-webkit-keyframes expand{from{height:0}to{height:var(--target-height)}}@keyframes expand{from{height:0}to{height:var(--target-height)}}@-webkit-keyframes collapse{from{height:var(--target-height)}to{height:0}}@keyframes collapse{from{height:var(--target-height)}to{height:0}}:host [part=content]{-webkit-animation-duration:.2s;animation-duration:.2s;-webkit-animation-timing-function:ease;animation-timing-function:ease}:host(:not([expanded])) [part=content]{height:0;-webkit-animation-name:collapse;animation-name:collapse}:host(:not([expanded])) [part=toggle]{transform:rotate(0)}:host([expanded]) [part=content]{-webkit-animation-name:expand;animation-name:expand}:host [part=content] ef-panel:not([spacing]){padding:var(--panel-padding)}');

package/lib/collapse/themes/solar/node_modules/@refinitiv-ui/elemental-theme/dark/index.js

@@ -0,0 +1,5 @@
+import '@refinitiv-ui/elements/lib/panel/themes/solar/node_modules/@refinitiv-ui/elemental-theme/dark';
+import '@refinitiv-ui/elements/lib/header/themes/solar/node_modules/@refinitiv-ui/elemental-theme/dark';
+import '@refinitiv-ui/elements/lib/icon/themes/solar/node_modules/@refinitiv-ui/elemental-theme/dark';
+
+elf.customStyles.define('ef-collapse', ':host [part=toggle]{transition:.2s;opacity:.5;margin-right:.5em;margin-left:.8em;flex-shrink:0}:host([expanded]) [part=toggle]{transform:rotate(90deg)}:host [part=header]{touch-action:manipulation}@-webkit-keyframes expand{from{height:0}to{height:var(--target-height)}}@keyframes expand{from{height:0}to{height:var(--target-height)}}@-webkit-keyframes collapse{from{height:var(--target-height)}to{height:0}}@keyframes collapse{from{height:var(--target-height)}to{height:0}}:host [part=content]{-webkit-animation-duration:.2s;animation-duration:.2s;-webkit-animation-timing-function:ease;animation-timing-function:ease}:host(:not([expanded])) [part=content]{height:0;-webkit-animation-name:collapse;animation-name:collapse}:host(:not([expanded])) [part=toggle]{transform:rotate(0)}:host([expanded]) [part=content]{-webkit-animation-name:expand;animation-name:expand}:host [part=content] ef-panel:not([spacing]){padding:var(--panel-padding)}');

package/lib/collapse/themes/solar/node_modules/@refinitiv-ui/elemental-theme/light/index.js

@@ -0,0 +1,5 @@
+import '@refinitiv-ui/elements/lib/panel/themes/solar/node_modules/@refinitiv-ui/elemental-theme/light';
+import '@refinitiv-ui/elements/lib/header/themes/solar/node_modules/@refinitiv-ui/elemental-theme/light';
+import '@refinitiv-ui/elements/lib/icon/themes/solar/node_modules/@refinitiv-ui/elemental-theme/light';
+
+elf.customStyles.define('ef-collapse', ':host [part=toggle]{transition:.2s;opacity:.5;margin-right:.5em;margin-left:.8em;flex-shrink:0}:host([expanded]) [part=toggle]{transform:rotate(90deg)}:host [part=header]{touch-action:manipulation}@-webkit-keyframes expand{from{height:0}to{height:var(--target-height)}}@keyframes expand{from{height:0}to{height:var(--target-height)}}@-webkit-keyframes collapse{from{height:var(--target-height)}to{height:0}}@keyframes collapse{from{height:var(--target-height)}to{height:0}}:host [part=content]{-webkit-animation-duration:.2s;animation-duration:.2s;-webkit-animation-timing-function:ease;animation-timing-function:ease}:host(:not([expanded])) [part=content]{height:0;-webkit-animation-name:collapse;animation-name:collapse}:host(:not([expanded])) [part=toggle]{transform:rotate(0)}:host([expanded]) [part=content]{-webkit-animation-name:expand;animation-name:expand}:host [part=content] ef-panel:not([spacing]){padding:var(--panel-padding)}');

package/lib/collapse/themes/solar/pearl/index.js

@@ -0,0 +1,5 @@
+import '@refinitiv-ui/elements/lib/panel/themes/solar/pearl';
+import '@refinitiv-ui/elements/lib/header/themes/solar/pearl';
+import '@refinitiv-ui/elements/lib/icon/themes/solar/pearl';
+
+elf.customStyles.define('ef-collapse', ':host [part=toggle]{transition:.2s;opacity:.5;flex-shrink:0;margin:0 7px 0 5px}:host([expanded]) [part=toggle]{transform:rotate(90deg)}:host [part=header]{touch-action:manipulation}@-webkit-keyframes expand{from{height:0}to{height:var(--target-height)}}@keyframes expand{from{height:0}to{height:var(--target-height)}}@-webkit-keyframes collapse{from{height:var(--target-height)}to{height:0}}@keyframes collapse{from{height:var(--target-height)}to{height:0}}:host [part=content]{-webkit-animation-duration:.2s;animation-duration:.2s;-webkit-animation-timing-function:ease;animation-timing-function:ease}:host(:not([expanded])) [part=content]{height:0;-webkit-animation-name:collapse;animation-name:collapse}:host(:not([expanded])) [part=toggle]{transform:rotate(0)}:host([expanded]) [part=content]{-webkit-animation-name:expand;animation-name:expand}:host [part=content] ef-panel:not([spacing]){padding:var(--panel-padding)}');

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/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/decorators/custom-element.js';
+import { property } from '@refinitiv-ui/core/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 };