@refinitiv-ui/elements 5.3.3 → 5.3.4

package/lib/interactive-chart/themes/halo/dark/index.js

@@ -0,0 +1,3 @@
+import '@refinitiv-ui/elements/lib/tooltip/themes/halo/dark';
+
+elf.customStyles.define('ef-interactive-chart', ':host{--chart-color-1:#6678FF;--chart-color-2:#FFFFFF;--chart-color-3:#FFC800;--chart-color-4:#9064CD;--chart-color-5:#00D0D4;--chart-color-6:#FF5000;--chart-color-7:#00C389;--chart-color-8:#EA2E6C;--chart-color-9:#999999;--chart-color-10:#3BBAFF;--line-width:2;--fill-opacity:0.4;--text-color:rgba(204, 204, 204, 0.8);--background-color:#1A1A1A;--chart-up-color:#39C46E;--chart-down-color:#F5475B;--cross-hair-color:#CCCCCC;--grid-vert-line-color:rgba(51, 51, 51, 0.5);--grid-horz-line-color:rgba(51, 51, 51, 0.5);--scale-price-border-color:rgba(51, 51, 51, 0.5);--scale-times-border-color:rgba(51, 51, 51, 0.5)}:host [part=legend]{position:absolute;left:15px;top:15px;z-index:1000;color:var(--text-color);font-size:90%}:host [part=legend] .row{margin:1px 5px}:host [part=legend] .price{margin-right:5px}:host [part=legend] .ohlc{margin-right:2px}:host [part=legend].yaxis-left{left:70px}:host [part=legend].yaxis-right{left:15px}:host [part=legend].horizontal{display:flex;max-width:calc(100% - 75px);flex-wrap:wrap}:host [part=jump-button-container]{display:none;position:absolute;transition:background-color .1s;width:23px;height:23px;color:#ccc;border:1px solid #0d0d0d;box-shadow:0 0 0 0 rgba(0,0,0,.5);border-radius:100%;z-index:1000;cursor:pointer;background-color:#1a1a1a}:host [part=jump-button-container]:hover{color:#fff;border-color:#334bff;box-shadow:0 0 0 0 rgba(0,0,0,.8);background-color:#343434}:host [part=jump-button-container]:active{color:#fff;box-shadow:0 0 0 0 rgba(0,0,0,.5);background-color:#1a1a1a}:host [part=jump-button]{position:relative;display:inline-block;width:5px;height:5px;border-top:2px solid #ccc;border-right:2px solid #ccc;transform:rotate(45deg) skew(0);margin-top:8px;margin-left:7px}:host [part=branding-container]{position:absolute;opacity:.6;bottom:3px;z-index:1000}:host [part=branding-container].left{left:10px}:host [part=branding-container].right{right:10px}:host [part=branding-container].none{top:13px;right:13px}:host [part=branding]{height:22px;width:22px;fill:rgba(204,204,204,.8)}:host [part=jump-button-container],:host [part=jump-button-container]:hover,:host [part=jump-button]{border-color:grey}');

package/lib/interactive-chart/themes/halo/light/index.js

@@ -0,0 +1,3 @@
+import '@refinitiv-ui/elements/lib/tooltip/themes/halo/light';
+
+elf.customStyles.define('ef-interactive-chart', ':host{--chart-color-1:#334BFF;--chart-color-2:#000000;--chart-color-3:#7F6400;--chart-color-4:#71549F;--chart-color-5:#007678;--chart-color-6:#CC4000;--chart-color-7:#007653;--chart-color-8:#D22962;--chart-color-9:#595959;--chart-color-10:#236F99;--line-width:2;--fill-opacity:0.4;--text-color:rgba(13, 13, 13, 0.8);--background-color:#FAFAFA;--chart-up-color:#246B3E;--chart-down-color:#B63243;--cross-hair-color:#404040;--grid-vert-line-color:rgba(224, 224, 224, 0.5);--grid-horz-line-color:rgba(224, 224, 224, 0.5);--scale-price-border-color:rgba(224, 224, 224, 0.5);--scale-times-border-color:rgba(224, 224, 224, 0.5)}:host [part=legend]{position:absolute;left:15px;top:15px;z-index:1000;color:var(--text-color);font-size:90%}:host [part=legend] .row{margin:1px 5px}:host [part=legend] .price{margin-right:5px}:host [part=legend] .ohlc{margin-right:2px}:host [part=legend].yaxis-left{left:70px}:host [part=legend].yaxis-right{left:15px}:host [part=legend].horizontal{display:flex;max-width:calc(100% - 75px);flex-wrap:wrap}:host [part=jump-button-container]{display:none;position:absolute;transition:background-color .1s;width:23px;height:23px;color:#0d0d0d;border:1px solid #ccc;box-shadow:0 0 0 0 rgba(0,0,0,.25);border-radius:100%;z-index:1000;cursor:pointer;background-color:#fafafa}:host [part=jump-button-container]:hover{color:#fff;border-color:#334bff;box-shadow:0 0 0 0 rgba(0,0,0,.55);background-color:#fff}:host [part=jump-button-container]:active{color:#fff;box-shadow:0 0 0 0 rgba(0,0,0,.25);background-color:#fafafa}:host [part=jump-button]{position:relative;display:inline-block;width:5px;height:5px;border-top:2px solid #0d0d0d;border-right:2px solid #0d0d0d;transform:rotate(45deg) skew(0);margin-top:8px;margin-left:7px}:host [part=branding-container]{position:absolute;opacity:.6;bottom:3px;z-index:1000}:host [part=branding-container].left{left:10px}:host [part=branding-container].right{right:10px}:host [part=branding-container].none{top:13px;right:13px}:host [part=branding]{height:22px;width:22px;fill:rgba(13,13,13,.8)}:host [part=jump-button-container],:host [part=jump-button-container]:hover,:host [part=jump-button]{border-color:#8d8d8d}');

package/lib/interactive-chart/themes/solar/charcoal/index.js

@@ -0,0 +1,3 @@
+import '@refinitiv-ui/elements/lib/tooltip/themes/solar/charcoal';
+
+elf.customStyles.define('ef-interactive-chart', ':host{--chart-color-1:#FF9933;--chart-color-2:#B10CF2;--chart-color-3:#7DE442;--chart-color-4:#3780BF;--chart-color-5:#FA4C11;--chart-color-6:#FFE433;--chart-color-7:#8C8C8C;--chart-color-8:#5A54FF;--chart-color-9:#E53766;--chart-color-10:#648608;--line-width:2;--fill-opacity:0.4;--text-color:rgba(194, 194, 194, 0.8);--background-color:#1A1A1C;--chart-up-color:#39C46E;--chart-down-color:#F5475B;--cross-hair-color:#E2E2E2;--grid-vert-line-color:rgba(10, 10, 10, 0.5);--grid-horz-line-color:rgba(10, 10, 10, 0.5);--scale-price-border-color:rgba(10, 10, 10, 0.5);--scale-times-border-color:rgba(10, 10, 10, 0.5);--chart-color-1:#FF9933;--chart-color-2:#B10CF2;--chart-color-3:#7DE442;--chart-color-4:#3780BF;--chart-color-5:#FA4C11;--chart-color-6:#FFE433;--chart-color-7:#8C8C8C;--chart-color-8:#5A54FF;--chart-color-9:#E53766;--chart-color-10:#648608;--chart-color-11:#48CBF7;--chart-color-12:#F3478E;--chart-color-13:#508BF7;--chart-color-14:#EFF748;--chart-color-15:#FF4043;--chart-color-16:#A7DB0B;--chart-color-17:#C2C2C2;--chart-color-18:#1578AD;--chart-color-19:#F2B530;--chart-color-20:#297835;--chart-color-21:#7045FF;--chart-color-22:#DD48F7;--chart-color-23:#09A8C0;--chart-color-24:#60E65C;--chart-color-25:#2960A3;--grid-vert-line-color:rgba(194, 194, 194, 0.1);--grid-horz-line-color:rgba(194, 194, 194, 0.1);--scale-price-border-color:rgba(194, 194, 194, 0.1);--scale-times-border-color:rgba(194, 194, 194, 0.1)}:host [part=legend]{position:absolute;left:15px;top:15px;z-index:1000;color:var(--text-color);font-size:90%}:host [part=legend] .row{margin:1px 5px}:host [part=legend] .price{margin-right:5px}:host [part=legend] .ohlc{margin-right:2px}:host [part=legend].yaxis-left{left:70px}:host [part=legend].yaxis-right{left:15px}:host [part=legend].horizontal{display:flex;max-width:calc(100% - 75px);flex-wrap:wrap}:host [part=jump-button-container]{display:none;position:absolute;transition:background-color .1s;width:23px;height:23px;color:#c2c2c2;background-color:#3c3c42;border:1px solid #000;box-shadow:0 0 0 0 rgba(0,0,0,.6);border-radius:100%;z-index:1000;cursor:pointer;background-image:linear-gradient(rgba(255,255,255,.1) 10%,rgba(255,255,255,0) 100%)}:host [part=jump-button-container]:hover{color:#e2e2e2;background-color:#4d4d55;border-color:#000;box-shadow:0 0 0 0 rgba(0,0,0,.9)}:host [part=jump-button-container]:active{background-color:#38383d;color:#c2c2c2;box-shadow:0 0 0 0 rgba(0,0,0,.6);background-image:linear-gradient(rgba(255,255,255,.1) 10%,rgba(255,255,255,0) 100%)}:host [part=jump-button]{position:relative;display:inline-block;width:5px;height:5px;border-top:2px solid #c2c2c2;border-right:2px solid #c2c2c2;transform:rotate(45deg) skew(0);margin-top:8px;margin-left:7px}:host [part=branding-container]{position:absolute;opacity:.6;bottom:3px;z-index:1000}:host [part=branding-container].left{left:10px}:host [part=branding-container].right{right:10px}:host [part=branding-container].none{top:13px;right:13px}:host [part=branding]{height:22px;width:22px;fill:rgba(194,194,194,.8)}:host [part=jump-button-container]:hover [part=jump-button]{border-color:#e2e2e2}');

package/lib/interactive-chart/themes/solar/pearl/index.js

@@ -0,0 +1,3 @@
+import '@refinitiv-ui/elements/lib/tooltip/themes/solar/pearl';
+
+elf.customStyles.define('ef-interactive-chart', ':host{--chart-color-1:#EE7600;--chart-color-2:#B10CF2;--chart-color-3:#309054;--chart-color-4:#3780BF;--chart-color-5:#FA4C11;--chart-color-6:#D9B500;--chart-color-7:#8C8C8C;--chart-color-8:#5A54FF;--chart-color-9:#E53766;--chart-color-10:#648608;--line-width:2;--fill-opacity:0.4;--text-color:rgba(72, 72, 72, 0.8);--background-color:#FFFFFF;--chart-up-color:#309054;--chart-down-color:#D94255;--cross-hair-color:#ACAFB5;--grid-vert-line-color:rgba(213, 216, 219, 0.5);--grid-horz-line-color:rgba(213, 216, 219, 0.5);--scale-price-border-color:rgba(213, 216, 219, 0.5);--scale-times-border-color:rgba(213, 216, 219, 0.5);--chart-color-1:#EE7600;--chart-color-2:#B10CF2;--chart-color-3:#309054;--chart-color-4:#3780BF;--chart-color-5:#FA4C11;--chart-color-6:#D9B500;--chart-color-7:#8C8C8C;--chart-color-8:#5A54FF;--chart-color-9:#E53766;--chart-color-10:#648608;--chart-color-11:#40B6DE;--chart-color-12:#F3478E;--chart-color-13:#508BF7;--chart-color-14:#AAB218;--chart-color-15:#FF4043;--chart-color-16:#80A808;--chart-color-17:#707070;--chart-color-18:#1578AC;--chart-color-19:#D9A22B;--chart-color-20:#297835;--chart-color-21:#7045FF;--chart-color-22:#DD48F7;--chart-color-23:#09A8C0;--chart-color-24:#4BB347;--chart-color-25:#2960A3;--grid-vert-line-color:rgba(72, 72, 72, 0.1);--grid-horz-line-color:rgba(72, 72, 72, 0.1);--scale-price-border-color:rgba(72, 72, 72, 0.1);--scale-times-border-color:rgba(72, 72, 72, 0.1)}:host [part=legend]{position:absolute;left:15px;top:15px;z-index:1000;color:var(--text-color);font-size:90%}:host [part=legend] .row{margin:1px 5px}:host [part=legend] .price{margin-right:5px}:host [part=legend] .ohlc{margin-right:2px}:host [part=legend].yaxis-left{left:70px}:host [part=legend].yaxis-right{left:15px}:host [part=legend].horizontal{display:flex;max-width:calc(100% - 75px);flex-wrap:wrap}:host [part=jump-button-container]{display:none;position:absolute;transition:background-color .1s;width:23px;height:23px;color:#505050;background-color:#fafbfc;border:1px solid #a9afba;box-shadow:0 0 0 0 rgba(0,0,0,.3);border-radius:100%;z-index:1000;cursor:pointer;background-image:linear-gradient(rgba(0,0,0,0) 0,rgba(0,0,0,.1) 100%)}:host [part=jump-button-container]:hover{color:#1d1d1d;background-color:#fff;border-color:#a9afba;box-shadow:0 0 0 0 rgba(0,0,0,.6)}:host [part=jump-button-container]:active{background-color:#fff;color:#1d1d1d;box-shadow:0 0 0 0 rgba(0,0,0,.3);background-image:none}:host [part=jump-button]{position:relative;display:inline-block;width:5px;height:5px;border-top:2px solid #505050;border-right:2px solid #505050;transform:rotate(45deg) skew(0);margin-top:8px;margin-left:7px}:host [part=branding-container]{position:absolute;opacity:.6;bottom:3px;z-index:1000}:host [part=branding-container].left{left:10px}:host [part=branding-container].right{right:10px}:host [part=branding-container].none{top:13px;right:13px}:host [part=branding]{height:22px;width:22px;fill:rgba(72,72,72,.8)}:host [part=jump-button-container]:hover [part=jump-button]{border-color:#1d1d1d}');

package/lib/item/custom-elements.json

@@ -0,0 +1,153 @@
+{
+  "version": "experimental",
+  "tags": [
+    {
+      "name": "ef-item",
+      "description": "Used as a basic building block to compose complex custom elements,\nadditionally it can be used by applications\nto create simple menus or navigation panels.",
+      "attributes": [
+        {
+          "name": "label",
+          "description": "The text for the label indicating the meaning of the item.\nBy having both `label` and content, `label` always takes priority",
+          "type": "string | null"
+        },
+        {
+          "name": "type",
+          "description": "If defined value can be `text`, `header` or `divider`",
+          "type": "ItemType | null"
+        },
+        {
+          "name": "icon",
+          "description": "Set the icon name from the ef-icon list",
+          "type": "string | null"
+        },
+        {
+          "name": "selected",
+          "description": "Indicates that the item is selected",
+          "type": "boolean",
+          "default": "false"
+        },
+        {
+          "name": "multiple",
+          "description": "Is the item part of a multiple selection",
+          "type": "boolean",
+          "default": "false"
+        },
+        {
+          "name": "highlighted",
+          "description": "Highlight the item",
+          "type": "boolean",
+          "default": "false"
+        },
+        {
+          "name": "sub-label",
+          "description": "The`subLabel` property represents the text beneath the label.",
+          "type": "string | null"
+        },
+        {
+          "name": "for",
+          "description": "Specifies which element an item is bound to",
+          "type": "string | null"
+        },
+        {
+          "name": "value",
+          "description": "The content of this attribute represents the value of the item.",
+          "type": "string",
+          "default": "\"\""
+        },
+        {
+          "name": "disabled",
+          "description": "Set disabled state.",
+          "type": "boolean",
+          "default": "\"false\""
+        }
+      ],
+      "properties": [
+        {
+          "name": "label",
+          "attribute": "label",
+          "description": "The text for the label indicating the meaning of the item.\nBy having both `label` and content, `label` always takes priority",
+          "type": "string | null"
+        },
+        {
+          "name": "type",
+          "attribute": "type",
+          "description": "If defined value can be `text`, `header` or `divider`",
+          "type": "ItemType | null"
+        },
+        {
+          "name": "icon",
+          "attribute": "icon",
+          "description": "Set the icon name from the ef-icon list",
+          "type": "string | null"
+        },
+        {
+          "name": "selected",
+          "attribute": "selected",
+          "description": "Indicates that the item is selected",
+          "type": "boolean",
+          "default": "false"
+        },
+        {
+          "name": "multiple",
+          "attribute": "multiple",
+          "description": "Is the item part of a multiple selection",
+          "type": "boolean",
+          "default": "false"
+        },
+        {
+          "name": "highlighted",
+          "attribute": "highlighted",
+          "description": "Highlight the item",
+          "type": "boolean",
+          "default": "false"
+        },
+        {
+          "name": "subLabel",
+          "attribute": "sub-label",
+          "description": "The`subLabel` property represents the text beneath the label.",
+          "type": "string | null"
+        },
+        {
+          "name": "for",
+          "attribute": "for",
+          "description": "Specifies which element an item is bound to",
+          "type": "string | null"
+        },
+        {
+          "name": "highlightable",
+          "description": "Return true if the item can be highlighted. True if not disabled and type is Text",
+          "type": "boolean"
+        },
+        {
+          "name": "isTruncated",
+          "description": "Getter returning if the label is truncated",
+          "type": "boolean"
+        },
+        {
+          "name": "value",
+          "attribute": "value",
+          "description": "The content of this attribute represents the value of the item.",
+          "type": "string",
+          "default": "\"\""
+        },
+        {
+          "name": "disabled",
+          "attribute": "disabled",
+          "description": "Set disabled state.",
+          "type": "boolean",
+          "default": "\"false\""
+        }
+      ],
+      "slots": [
+        {
+          "name": "left",
+          "description": "Used to render the content on the left of the label."
+        },
+        {
+          "name": "right",
+          "description": "Used to render the content on the right of the label."
+        }
+      ]
+    }
+  ]
+}

package/lib/item/helpers/types.d.ts

@@ -0,0 +1,57 @@
+import { DataItem } from '@refinitiv-ui/utils';
+export declare type ItemType = 'text' | 'header' | 'divider';
+interface CommonItem extends DataItem {
+    /**
+     * Type of item. Value can be `text`, `header`, `divider`
+     */
+    type?: ItemType;
+}
+interface CommonLabelItem extends CommonItem {
+    /**
+     * The text for the label indicating the meaning of the item.
+     */
+    label: string;
+    /**
+     * Set the icon name from the ef-icon list
+     */
+    icon?: string;
+    /**
+     * Set the tooltip text
+    */
+    tooltip?: string;
+}
+/**
+ * Maps to a text/generic type ef-item
+ */
+export interface ItemText extends CommonLabelItem {
+    type?: 'text';
+    /**
+     * Value of the item
+     */
+    value: string;
+    /**
+     * The`subLabel` property represents the text beneath the label
+     */
+    subLabel?: string;
+    /**
+     * Specifies which element an item is bound to
+     */
+    for?: string;
+}
+/**
+ * Maps to `ef-item[type=header]`
+ */
+export interface ItemHeader extends CommonLabelItem {
+    type: 'header';
+}
+/**
+ * Maps to `ef-item[type=divider]`
+ */
+export interface ItemDivider extends CommonItem {
+    type: 'divider';
+}
+/**
+ * Used to construct a collection of items
+ */
+export declare type ItemData = ItemText | ItemHeader | ItemDivider;
+export {};

package/lib/item/helpers/types.js

@@ -0,0 +1 @@
+export {};

package/lib/item/index.d.ts

@@ -0,0 +1,149 @@
+import { JSXInterface } from '../jsx';
+import { ControlElement, CSSResult, PropertyValues, TemplateResult } from '@refinitiv-ui/core';
+import '../icon';
+import '../checkbox';
+import { ItemType } from './helpers/types';
+export * from './helpers/types';
+/**
+ * Used as a basic building block to compose complex custom elements,
+ * additionally it can be used by applications
+ * to create simple menus or navigation panels.
+ *
+ * @attr {string} value - The content of this attribute represents the value of the item.
+ * @prop {string} [value=] - The content of this attribute represents the value of the item.
+ *
+ * @attr {boolean} disabled - Set disabled state.
+ * @prop {boolean} [disabled=false] - Set disabled state.
+ *
+ * @slot left - Used to render the content on the left of the label.
+ * @slot right - Used to render the content on the right of the label.
+ */
+export declare class Item extends ControlElement {
+    /**
+     * Element version number
+     * @returns version number
+     */
+    static get version(): string;
+    /**
+     * @returns `CSSResult` that will be used to style the host,
+     * slotted children and the internal template of the element.
+     */
+    static get styles(): CSSResult | CSSResult[];
+    /**
+     * The text for the label indicating the meaning of the item.
+     * By having both `label` and content, `label` always takes priority
+     */
+    label: string | null;
+    /**
+     * If defined value can be `text`, `header` or `divider`
+     * @type {ItemType | null}
+     */
+    type: ItemType | null;
+    /**
+     * Set the icon name from the ef-icon list
+     */
+    icon: string | null;
+    /**
+     * Indicates that the item is selected
+     */
+    selected: boolean;
+    /**
+     * Is the item part of a multiple selection
+     */
+    multiple: boolean;
+    /**
+     * Highlight the item
+     */
+    highlighted: boolean;
+    /**
+     * The`subLabel` property represents the text beneath the label.
+     */
+    subLabel: string | null;
+    /**
+     * Specifies which element an item is bound to
+     */
+    for: string | null;
+    /**
+     * Cache label element
+     */
+    private labelEl?;
+    /**
+     * True, if there is no slotted content
+     */
+    private isSlotEmpty;
+    /**
+     * @param node that should be checked
+     * @returns whether node can be ignored.
+     */
+    private isIgnorable;
+    /**
+     * Checks slotted children nodes and updates component to refresh label and sub-label templates.
+     * @param event slotchange
+     * @returns {void}
+     */
+    private checkSlotChildren;
+    /**
+     * @override
+     * @returns {void}
+     */
+    protected update(changedProperties: PropertyValues): void;
+    /**
+     * Get icon template if icon attribute is defined
+     */
+    private get iconTemplate();
+    /**
+     * Get subLabel template if it is defined and no slot content present
+     */
+    private get subLabelTemplate();
+    /**
+     * Get label template if it is defined and no slot content present
+     */
+    private get labelTemplate();
+    /**
+     * Get template for `for` attribute.
+     * This is usually used with menus when an item needs to reference an element
+     */
+    private get forTemplate();
+    /**
+     * Get template for `multiple` attribute.
+     * This is usually used with lists, when an item can be part of a multiple selection
+     */
+    private get multipleTemplate();
+    /**
+     * Return true if the item can be highlighted. True if not disabled and type is Text
+     * @prop {boolean} highlightable
+     * @returns whether element is highlightable
+     */
+    get highlightable(): boolean;
+    /**
+     * Getter returning if the label is truncated
+     * @prop {boolean} isTruncated
+     * @returns whether element is truncated or not
+     */
+    get isTruncated(): boolean;
+    /**
+     * Control State behaviour will update tabindex based on the property
+     * @returns {void}
+     */
+    private typeChanged;
+    /**
+     * A `TemplateResult` that will be used
+     * to render the updated internal template.
+     * @returns Render template
+     */
+    protected render(): TemplateResult;
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'ef-item': Item;
+  }
+
+  namespace JSX {
+    interface IntrinsicElements {
+      'ef-item': Partial<Item> | JSXInterface.ControlHTMLAttributes<Item>;
+    }
+  }
+}
+
+export {};

package/lib/item/index.js

@@ -0,0 +1,252 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { ControlElement, css, customElement, html, property, query } from '@refinitiv-ui/core';
+import '../icon';
+import '../checkbox';
+import { VERSION } from '../';
+export * from './helpers/types';
+const isAllWhitespaceTextNode = (node) => {
+    var _a;
+    return node.nodeType === document.TEXT_NODE
+        && !((_a = node.textContent) === null || _a === void 0 ? void 0 : _a.trim());
+};
+/**
+ * Used as a basic building block to compose complex custom elements,
+ * additionally it can be used by applications
+ * to create simple menus or navigation panels.
+ *
+ * @attr {string} value - The content of this attribute represents the value of the item.
+ * @prop {string} [value=] - The content of this attribute represents the value of the item.
+ *
+ * @attr {boolean} disabled - Set disabled state.
+ * @prop {boolean} [disabled=false] - Set disabled state.
+ *
+ * @slot left - Used to render the content on the left of the label.
+ * @slot right - Used to render the content on the right of the label.
+ */
+let Item = class Item extends ControlElement {
+    constructor() {
+        super(...arguments);
+        /**
+         * The text for the label indicating the meaning of the item.
+         * By having both `label` and content, `label` always takes priority
+         */
+        this.label = null;
+        /**
+         * If defined value can be `text`, `header` or `divider`
+         * @type {ItemType | null}
+         */
+        this.type = null;
+        /**
+         * Set the icon name from the ef-icon list
+         */
+        this.icon = null;
+        /**
+         * Indicates that the item is selected
+         */
+        this.selected = false;
+        /**
+         * Is the item part of a multiple selection
+         */
+        this.multiple = false;
+        /**
+         * Highlight the item
+         */
+        this.highlighted = false;
+        /**
+         * The`subLabel` property represents the text beneath the label.
+         */
+        this.subLabel = null;
+        /**
+         * Specifies which element an item is bound to
+         */
+        this.for = null;
+        /**
+         * True, if there is no slotted content
+         */
+        this.isSlotEmpty = true;
+        /**
+         * Checks slotted children nodes and updates component to refresh label and sub-label templates.
+         * @param event slotchange
+         * @returns {void}
+         */
+        this.checkSlotChildren = (event) => {
+            const slot = event.target;
+            this.isSlotEmpty = !slot.assignedNodes().filter(node => !this.isIgnorable(node)).length;
+            void this.requestUpdate();
+        };
+    }
+    /**
+     * Element version number
+     * @returns version number
+     */
+    static get version() {
+        return VERSION;
+    }
+    /**
+     * @returns `CSSResult` that will be used to style the host,
+     * slotted children and the internal template of the element.
+     */
+    static get styles() {
+        return css `
+      :host {
+        display: flex;
+        align-items: center;
+      }
+      [part=checkbox] {
+        pointer-events: none;
+      }
+      [part=left],
+      [part=right] {
+        display: flex;
+        align-items: center;
+      }
+      [part=center] {
+        flex: 1;
+      }
+      :host([type=divider]) > * {
+        display: none;
+      }
+    `;
+    }
+    /**
+     * @param node that should be checked
+     * @returns whether node can be ignored.
+     */
+    isIgnorable(node) {
+        return node.nodeType === document.COMMENT_NODE
+            || isAllWhitespaceTextNode(node);
+    }
+    /**
+     * @override
+     * @returns {void}
+     */
+    update(changedProperties) {
+        if (changedProperties.has('type')) {
+            this.typeChanged();
+        }
+        super.update(changedProperties);
+    }
+    /**
+     * Get icon template if icon attribute is defined
+     */
+    get iconTemplate() {
+        return this.icon !== null && this.icon !== undefined ? html `<ef-icon part="icon" .icon="${this.icon}"></ef-icon>` : undefined;
+    }
+    /**
+     * Get subLabel template if it is defined and no slot content present
+     */
+    get subLabelTemplate() {
+        return this.subLabel && this.isSlotEmpty ? html `<div part="sub-label">${this.subLabel}</div>` : undefined;
+    }
+    /**
+     * Get label template if it is defined and no slot content present
+     */
+    get labelTemplate() {
+        return this.label && this.isSlotEmpty ? html `${this.label}` : undefined;
+    }
+    /**
+     * Get template for `for` attribute.
+     * This is usually used with menus when an item needs to reference an element
+     */
+    get forTemplate() {
+        return this.for ? html `<ef-icon icon="right"></ef-icon>` : undefined;
+    }
+    /**
+     * Get template for `multiple` attribute.
+     * This is usually used with lists, when an item can be part of a multiple selection
+     */
+    get multipleTemplate() {
+        const multiple = this.multiple && (!this.type || this.type === 'text');
+        return multiple ? html `<ef-checkbox part="checkbox" .checked="${this.selected}" tabindex="-1"></ef-checkbox>` : undefined;
+    }
+    /**
+     * Return true if the item can be highlighted. True if not disabled and type is Text
+     * @prop {boolean} highlightable
+     * @returns whether element is highlightable
+     */
+    get highlightable() {
+        return !this.disabled && this.type !== 'header' && this.type !== 'divider';
+    }
+    /**
+     * Getter returning if the label is truncated
+     * @prop {boolean} isTruncated
+     * @returns whether element is truncated or not
+     */
+    get isTruncated() {
+        return !!(this.labelEl && (this.labelEl.offsetWidth < this.labelEl.scrollWidth));
+    }
+    /**
+     * Control State behaviour will update tabindex based on the property
+     * @returns {void}
+     */
+    typeChanged() {
+        const noInteraction = this.type === 'header' || this.type === 'divider' || this.disabled;
+        if (noInteraction) {
+            this.disableFocus();
+        }
+        else if (!this.disabled) {
+            this.enableFocus();
+        }
+    }
+    /**
+     * A `TemplateResult` that will be used
+     * to render the updated internal template.
+     * @returns Render template
+     */
+    render() {
+        return html `
+      <div part="left">
+        ${this.iconTemplate}
+        ${this.multipleTemplate}
+        <slot name="left"></slot>
+      </div>
+      <div part="center" id="label">
+        ${this.labelTemplate}
+        <slot @slotchange="${this.checkSlotChildren}"></slot>
+        ${this.subLabelTemplate}
+      </div>
+      <div part="right">
+        <slot name="right"></slot>
+        ${this.forTemplate}
+      </div>
+    `;
+    }
+};
+__decorate([
+    property({ type: String })
+], Item.prototype, "label", void 0);
+__decorate([
+    property({ type: String, reflect: true })
+], Item.prototype, "type", void 0);
+__decorate([
+    property({ type: String, reflect: true })
+], Item.prototype, "icon", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], Item.prototype, "selected", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], Item.prototype, "multiple", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], Item.prototype, "highlighted", void 0);
+__decorate([
+    property({ type: String, reflect: true, attribute: 'sub-label' })
+], Item.prototype, "subLabel", void 0);
+__decorate([
+    property({ type: String, reflect: true })
+], Item.prototype, "for", void 0);
+__decorate([
+    query('#label')
+], Item.prototype, "labelEl", void 0);
+Item = __decorate([
+    customElement('ef-item', {
+        alias: 'coral-item'
+    })
+], Item);
+export { Item };

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

@@ -0,0 +1,4 @@
+import '@refinitiv-ui/elements/lib/icon/themes/halo/dark';
+import '@refinitiv-ui/elements/lib/checkbox/themes/halo/dark';
+
+elf.customStyles.define('ef-item', ':host{outline:0;cursor:pointer;padding:0 8px;min-height:24px;box-sizing:border-box;touch-action:manipulation}@media all and (-ms-high-contrast:none),(-ms-high-contrast:active){:host(:after){content:\'\';min-height:inherit;font-size:0}}:host([selected]){color:#fff;font-weight:500}:host([readonly]){cursor:default}:host([focused]),:host([highlighted]){background-color:#334bff;color:#fff}:host([focused]:not([selected])),:host([highlighted]:not([selected])){color:#fff}:host [part=center],:host [part=sub-label]{text-overflow:ellipsis;overflow:hidden;white-space:nowrap}:host([disabled]){color:rgba(204,204,204,.5)}:host([type=divider]),:host([type=header]){pointer-events:none;min-height:auto}:host([type=divider]) [part=sub-label],:host([type=header]) [part=sub-label]{display:none}:host([type=header]){color:#999;background-color:transparent;font-size:83%;font-weight:500;border:none;height:24px;align-items:flex-end;margin:0;min-height:0;text-transform:uppercase;align-items:center}:host([type=divider]){border:none;padding:0;margin:0;height:5px;background:linear-gradient(#404040,#404040) 0 center/calc(100% - (0px * 2)) 1px no-repeat}:host [part=checkbox],:host [part=icon],:host [part=left] ::slotted(*){margin:0 .5em 0 0}:host [part=right] ::slotted(*){margin-left:.5em}:host [part=checkbox]{margin-right:8px}:host [part=sub-label]{font-size:90%}:host([sub-label]){padding:4px 8px}:host([selected]:not([highlighted]):not([focused])){background-color:#333}:host([selected]:not([multiple])){background-image:linear-gradient(#334bff,#334bff);background-size:4px 100%;background-position:left top;background-repeat:no-repeat}:host([selected][focused]),:host([selected][highlighted]){color:#fff}');

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

@@ -0,0 +1,4 @@
+import '@refinitiv-ui/elements/lib/icon/themes/halo/light';
+import '@refinitiv-ui/elements/lib/checkbox/themes/halo/light';
+
+elf.customStyles.define('ef-item', ':host{outline:0;cursor:pointer;padding:0 8px;min-height:24px;box-sizing:border-box;touch-action:manipulation}@media all and (-ms-high-contrast:none),(-ms-high-contrast:active){:host(:after){content:\'\';min-height:inherit;font-size:0}}:host([selected]){color:#0d0d0d;font-weight:500}:host([readonly]){cursor:default}:host([focused]),:host([highlighted]){background-color:#334bff;color:#fff}:host([focused]:not([selected])),:host([highlighted]:not([selected])){color:#fff}:host [part=center],:host [part=sub-label]{text-overflow:ellipsis;overflow:hidden;white-space:nowrap}:host([disabled]){color:rgba(64,64,64,.5)}:host([type=divider]),:host([type=header]){pointer-events:none;min-height:auto}:host([type=divider]) [part=sub-label],:host([type=header]) [part=sub-label]{display:none}:host([type=header]){color:#737373;background-color:transparent;font-size:83%;font-weight:500;border:none;height:24px;align-items:flex-end;margin:0;min-height:0;text-transform:uppercase;align-items:center}:host([type=divider]){border:none;padding:0;margin:0;height:5px;background:linear-gradient(#d9d9d9,#d9d9d9) 0 center/calc(100% - (0px * 2)) 1px no-repeat}:host [part=checkbox],:host [part=icon],:host [part=left] ::slotted(*){margin:0 .5em 0 0}:host [part=right] ::slotted(*){margin-left:.5em}:host [part=checkbox]{margin-right:8px}:host [part=sub-label]{font-size:90%}:host([sub-label]){padding:4px 8px}:host([selected]:not([highlighted]):not([focused])){background-color:#e6e6e6}:host([selected]:not([multiple])){background-image:linear-gradient(#334bff,#334bff);background-size:4px 100%;background-position:left top;background-repeat:no-repeat}:host([selected][focused]),:host([selected][highlighted]){color:#fff}');

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

@@ -0,0 +1,4 @@
+import '@refinitiv-ui/elements/lib/icon/themes/solar/charcoal';
+import '@refinitiv-ui/elements/lib/checkbox/themes/solar/charcoal';
+
+elf.customStyles.define('ef-item', ':host{outline:0;cursor:pointer;padding:0 7px;min-height:22px;box-sizing:border-box;touch-action:manipulation}@media all and (-ms-high-contrast:none),(-ms-high-contrast:active){:host(:after){content:\'\';min-height:inherit;font-size:0}}:host([selected]){color:#f93}:host([readonly]){cursor:default}:host([focused]),:host([highlighted]){background-color:rgba(255,255,255,.1)}:host([focused]:not([selected])),:host([highlighted]:not([selected])){color:#fff}:host [part=center],:host [part=sub-label]{text-overflow:ellipsis;overflow:hidden;white-space:nowrap}:host([disabled]){color:rgba(194,194,194,.5)}:host([type=divider]),:host([type=header]){pointer-events:none;min-height:auto}:host([type=divider]) [part=sub-label],:host([type=header]) [part=sub-label]{display:none}:host([type=header]){color:#c2c2c2;background-color:#4a4a52;font-size:100%;font-weight:400;border:1px solid #0a0a0a;height:22px;align-items:flex-end;margin:0;min-height:0;text-transform:uppercase;border:none;border-top:1px solid #0a0a0a;border-bottom:1px solid transparent;text-transform:none;align-items:center}:host([type=divider]){border:none;padding:0;margin:0;height:5px;background:linear-gradient(#2e2e33,#2e2e33) 0 center/calc(100% - (0px * 2)) 1px no-repeat}:host [part=checkbox],:host [part=icon],:host [part=left] ::slotted(*){margin:0 .5em 0 0}:host [part=sub-label]{font-size:80%}:host [part=icon],:host [part=left] ::slotted(*){margin-right:.33em}:host [part=right] ::slotted(*){margin-left:.33em}');