@refinitiv-ui/elements 5.3.3 → 5.7.0

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,151 @@
+{
+  "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"
+        },
+        {
+          "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": "0"
+        },
+        {
+          "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"
+        },
+        {
+          "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": "0"
+        },
+        {
+          "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/custom-elements.md

@@ -0,0 +1,29 @@
+# ef-item
+
+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.
+
+## Properties
+
+| Property        | Attribute     | Modifiers | Type               | Default | Description                                      |
+|-----------------|---------------|-----------|--------------------|---------|--------------------------------------------------|
+| `disabled`      | `disabled`    |           | `boolean`          | false   | Set disabled state.                              |
+| `for`           | `for`         |           | `string \| null`   | null    | Specifies which element an item is bound to      |
+| `highlightable` |               | readonly  | `boolean`          |         | Return true if the item can be highlighted. True if not disabled and type is Text |
+| `highlighted`   | `highlighted` |           | `boolean`          | false   | Highlight the item                               |
+| `icon`          | `icon`        |           | `string \| null`   | null    | Set the icon name from the ef-icon list          |
+| `isTruncated`   |               | readonly  | `boolean`          |         | Getter returning if the label is truncated       |
+| `label`         | `label`       |           | `string \| null`   | null    | The text for the label indicating the meaning of the item.<br />By having both `label` and content, `label` always takes priority |
+| `multiple`      | `multiple`    |           | `boolean`          | false   | Is the item part of a multiple selection         |
+| `selected`      | `selected`    |           | `boolean`          |         | Indicates that the item is selected              |
+| `subLabel`      | `sub-label`   |           | `string \| null`   | null    | The`subLabel` property represents the text beneath the label. |
+| `type`          | `type`        |           | `ItemType \| null` | null    | If defined value can be `text`, `header` or `divider` |
+| `value`         | `value`       |           | `string`           | 0       | The content of this attribute represents the value of the item. |
+
+## Slots
+
+| Name    | Description                                      |
+|---------|--------------------------------------------------|
+| `left`  | Used to render the content on the left of the label. |
+| `right` | Used to render the content on the right of the label. |

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

@@ -0,0 +1,57 @@
+import type { DataItem } from '@refinitiv-ui/utils/lib/collection.js';
+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,158 @@
+import { JSXInterface } from '../jsx';
+import { ControlElement, CSSResultGroup, PropertyValues, TemplateResult } from '@refinitiv-ui/core';
+import type { ItemType } from './helpers/types';
+import '../icon/index.js';
+import '../checkbox/index.js';
+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;
+    /**
+     * `CSSResultGroup` that will be used to style the host,
+     * slotted children and the internal template of the element.
+     * @returns CSS template
+     */
+    static get styles(): CSSResultGroup;
+    /**
+     * 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;
+    private _selected;
+    /**
+     * Indicates that the item is selected
+     * @param value selected value
+     */
+    set selected(value: boolean);
+    get selected(): boolean;
+    /**
+     * Aria indicating current select state
+     * @ignore
+     */
+    ariaSelected: string;
+    /**
+     * 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 {};