@refinitiv-ui/elements 5.6.0 → 5.8.2-alpha.0

package/lib/interactive-chart/custom-elements.md

@@ -0,0 +1,31 @@
+# ef-interactive-chart
+
+A charting component that allows you to create several use cases of financial chart.
+By lightweight-charts library.
+
+## Properties
+
+| Property             | Attribute              | Type                         | Default    | Description                                     |
+|----------------------|------------------------|------------------------------|------------|-------------------------------------------------|
+| `config`             | `config`               | `InteractiveChartConfig`     | null       | Chart configurations for init chart             |
+| `disabledJumpButton` | `disabled-jump-button` | `boolean`                    | false      | Hide jump to latest data button                 |
+| `disabledLegend`     | `disabled-legend`      | `boolean`                    | false      | Hide legend                                     |
+| `legendStyle`        | `legend-style`         | `"vertical" \| "horizontal"` | "vertical" | Set legend style i.e. `horizontal`, `vertical`. |
+
+## Methods
+
+| Method   | Type         | Description                                    |
+|----------|--------------|------------------------------------------------|
+| `colors` | `(): object` | List of available chart colors from the theme. |
+
+## Events
+
+| Event         | Description                          |
+|---------------|--------------------------------------|
+| `initialized` | Dispatched when chart is initialized |
+
+## Slots
+
+| Name     | Description                                 |
+|----------|---------------------------------------------|
+| `legend` | Slot to use for implementing custom legend. |

package/lib/interactive-chart/index.d.ts

@@ -43,9 +43,9 @@ export declare class InteractiveChart extends ResponsiveElement {
     deprecatedLegendStyle: LegendStyle | undefined;
     /**
      * Set legend style i.e. `horizontal`, `vertical`.
-     * Default is `vertical`.
      * @param {LegendStyle} value legend style value
      * @type {"vertical" | "horizontal"} type of legend style
+     * @default vertical
      **/
     set legendStyle(value: LegendStyle);
     get legendStyle(): LegendStyle;
@@ -54,7 +54,10 @@ export declare class InteractiveChart extends ResponsiveElement {
      * when deprecated features are used.
     */
     private deprecationNotice;
-    /** Array of series instances in chart */
+    /**
+     * @ignore
+     * Array of series instances in chart
+     */
     seriesList: SeriesList[];
     private jumpButtonInitialized;
     private legendInitialized;

package/lib/interactive-chart/index.js

@@ -39,7 +39,10 @@ let InteractiveChart = InteractiveChart_1 = class InteractiveChart extends Respo
          * when deprecated features are used.
         */
         this.deprecationNotice = new DeprecationNotice('`legendstyle` attribute and property are deprecated. Use `legend-style` for attribute and `legendStyle` property instead.');
-        /** Array of series instances in chart */
+        /**
+         * @ignore
+         * Array of series instances in chart
+         */
         this.seriesList = [];
         this.jumpButtonInitialized = false;
         this.legendInitialized = false;
@@ -116,9 +119,9 @@ let InteractiveChart = InteractiveChart_1 = class InteractiveChart extends Respo
     }
     /**
      * Set legend style i.e. `horizontal`, `vertical`.
-     * Default is `vertical`.
      * @param {LegendStyle} value legend style value
      * @type {"vertical" | "horizontal"} type of legend style
+     * @default vertical
      **/
     set legendStyle(value) {
         const oldValue = this.legendStyle;

package/lib/item/custom-elements.json

@@ -58,7 +58,7 @@
           "name": "disabled",
           "description": "Set disabled state.",
           "type": "boolean",
-          "default": "\"false\""
+          "default": "false"
         }
       ],
       "properties": [
@@ -114,12 +114,12 @@
           "type": "string | null"
         },
         {
-          "name": "highlightable",
+          "name": "highlightable (readonly)",
           "description": "Return true if the item can be highlighted. True if not disabled and type is Text",
           "type": "boolean"
         },
         {
-          "name": "isTruncated",
+          "name": "isTruncated (readonly)",
           "description": "Getter returning if the label is truncated",
           "type": "boolean"
         },
@@ -135,7 +135,7 @@
           "attribute": "disabled",
           "description": "Set disabled state.",
           "type": "boolean",
-          "default": "\"false\""
+          "default": "false"
         }
       ],
       "slots": [

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     | 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`          | false   | 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`           | ""      | 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/index.d.ts

@@ -10,7 +10,7 @@ export * from './helpers/types';
  * 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.
+ * @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.
@@ -44,10 +44,19 @@ export declare class Item extends ControlElement {
      * Set the icon name from the ef-icon list
      */
     icon: string | null;
+    private _selected;
     /**
      * Indicates that the item is selected
+     * @param value selected value
+     * @default false
      */
-    selected: boolean;
+    set selected(value: boolean);
+    get selected(): boolean;
+    /**
+     * Aria indicating current select state
+     * @ignore
+     */
+    ariaSelected: string;
     /**
      * Is the item part of a multiple selection
      */

package/lib/item/index.js

@@ -18,7 +18,7 @@ const isAllWhitespaceTextNode = (node) => {
  * 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.
+ * @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.
@@ -43,10 +43,12 @@ let Item = class Item extends ControlElement {
          * Set the icon name from the ef-icon list
          */
         this.icon = null;
+        this._selected = false;
         /**
-         * Indicates that the item is selected
+         * Aria indicating current select state
+         * @ignore
          */
-        this.selected = false;
+        this.ariaSelected = 'false';
         /**
          * Is the item part of a multiple selection
          */
@@ -112,6 +114,22 @@ let Item = class Item extends ControlElement {
       }
     `;
     }
+    /**
+     * Indicates that the item is selected
+     * @param value selected value
+     * @default false
+     */
+    set selected(value) {
+        const oldValue = this._selected;
+        if (oldValue !== value) {
+            this._selected = value;
+            this.ariaSelected = String(value);
+            void this.requestUpdate('selected', oldValue);
+        }
+    }
+    get selected() {
+        return this._selected;
+    }
     /**
      * @param node that should be checked
      * @returns whether node can be ignored.
@@ -227,7 +245,10 @@ __decorate([
 ], Item.prototype, "icon", void 0);
 __decorate([
     property({ type: Boolean, reflect: true })
-], Item.prototype, "selected", void 0);
+], Item.prototype, "selected", null);
+__decorate([
+    property({ type: String, reflect: true, attribute: 'aria-selected' })
+], Item.prototype, "ariaSelected", void 0);
 __decorate([
     property({ type: Boolean, reflect: true })
 ], Item.prototype, "multiple", void 0);

package/lib/label/custom-elements.md

@@ -0,0 +1,11 @@
+# ef-label
+
+Displays a text with alternative truncation
+
+## Properties
+
+| Property    | Attribute    | Type      | Default | Description                                 |
+|-------------|--------------|-----------|---------|---------------------------------------------|
+| `error`     | `error`      | `boolean` | false   | Set state to error                          |
+| `lineClamp` | `line-clamp` | `number`  | 0       | Limit the number of lines before truncating |
+| `warning`   | `warning`    | `boolean` | false   | Set state to warning                        |

package/lib/layout/custom-elements.md

@@ -0,0 +1,26 @@
+# ef-layout
+
+Layout component for creating responsive applications and components
+
+## Properties
+
+| Property     | Attribute    | Type             | Default | Description                                      |
+|--------------|--------------|------------------|---------|--------------------------------------------------|
+| `basis`      | `basis`      | `string \| null` | null    | Sets the rough size of the element based on other siblings and content.<br />Value could be pixel, percents or auto. |
+| `container`  | `container`  | `boolean`        | false   | Tells the element to display as a container,<br />displaying children in a vertical nowrap layout. |
+| `debug`      | `debug`      | `boolean`        | false   | Displays debug lines.                            |
+| `flex`       | `flex`       | `boolean`        | false   | Tells the element to display flex,<br />displaying children in a row wrap layout. |
+| `maxHeight`  | `max-height` | `string \| null` | null    | Prevents the height from expanding past a certain point.<br />Value could be pixel, percents or _empty_. |
+| `maxWidth`   | `max-width`  | `string \| null` | null    | Prevents the width from expanding past a certain point.<br />Value could be pixel, percents or _empty_. |
+| `minHeight`  | `min-height` | `string \| null` | null    | Allows the height to shrink below its contents.<br />Also prevents the height from shrinking past a certain point.<br />Value could be pixel, percents or _empty_. |
+| `minWidth`   | `min-width`  | `string \| null` | null    | Allows the width to shrink below its contents.<br />Also prevents the width from shrinking past a certain point.<br />Value could be pixel, percents or _empty_. |
+| `noflex`     | `noflex`     | `boolean`        | false   | Prevents the element from being flexible,<br />when inside of another flex layout. |
+| `nowrap`     | `nowrap`     | `boolean`        | false   | Prevents wrapping flex items,<br />when the parent isn't a container. |
+| `scrollable` | `scrollable` | `boolean`        | false   | Makes the element a scrollable viewport.         |
+| `size`       | `size`       | `string \| null` | null    | Sets the fixed size of the element.<br />Value could be pixel, percents or auto. |
+
+## Events
+
+| Event    | Description                            |
+|----------|----------------------------------------|
+| `resize` | Fired when the element's size changes. |

package/lib/led-gauge/custom-elements.json

@@ -18,7 +18,7 @@
         {
           "name": "range",
           "description": "Value of range. eg [-20, 70]",
-          "type": "object",
+          "type": "number[]",
           "default": "[]"
         },
         {
@@ -43,7 +43,7 @@
           "name": "neutral-color",
           "description": "Turn off background color and use grey",
           "type": "boolean",
-          "default": "\"false\""
+          "default": "false"
         },
         {
           "name": "zero",
@@ -69,7 +69,7 @@
           "name": "range",
           "attribute": "range",
           "description": "Value of range. eg [-20, 70]",
-          "type": "object",
+          "type": "number[]",
           "default": "[]"
         },
         {
@@ -98,7 +98,7 @@
           "attribute": "neutral-color",
           "description": "Turn off background color and use grey",
           "type": "boolean",
-          "default": "\"false\""
+          "default": "false"
         },
         {
           "name": "zero",

package/lib/led-gauge/custom-elements.md

@@ -0,0 +1,17 @@
+# ef-led-gauge
+
+A component used to show data in a LED-like
+horizontal bar visualization.
+
+## Properties
+
+| Property       | Attribute       | Type             | Default  | Description                                      |
+|----------------|-----------------|------------------|----------|--------------------------------------------------|
+| `bottomLabel`  | `bottom-label`  | `string`         | ""       | Label to be displayed in the bottom legend       |
+| `bottomValue`  | `bottom-value`  | `number \| null` | null     | Value of bar for bottom legend position<br />Value can be -100 to 100 |
+| `neutralColor` | `neutral-color` | `boolean`        | false    | Turn off background color and use grey           |
+| `range`        | `range`         | `number[]`       | []       | Value of range. eg [-20, 70]                     |
+| `rangeLabel`   | `range-label`   | `string`         | ""       | Label to be displayed in the bottom legend<br />when a range is displayed<br />and no bottom text is already set. |
+| `topLabel`     | `top-label`     | `string`         | ""       | Label to be displayed in the top legend          |
+| `topValue`     | `top-value`     | `number \| null` | null     | Value of bar for top legend position<br />Value can be -100 to 100 |
+| `zero`         | `zero`          | `string`         | "center" | Sets the zero scale position. [center, left, right] |

package/lib/led-gauge/index.d.ts

@@ -32,6 +32,7 @@ export declare class LedGauge extends BasicElement {
     bottomValue: number | null;
     /**
      * Value of range. eg [-20, 70]
+     * @type {number[]}
      */
     range: number[];
     /**

package/lib/led-gauge/index.js

@@ -30,6 +30,7 @@ let LedGauge = class LedGauge extends BasicElement {
         this.bottomValue = null;
         /**
          * Value of range. eg [-20, 70]
+         * @type {number[]}
          */
         this.range = [];
         /**

package/lib/list/custom-elements.json

@@ -20,12 +20,13 @@
         {
           "name": "value",
           "description": "Returns the first selected item value.\nUse `values` when multiple selection mode is enabled.",
-          "type": "string"
+          "type": "string",
+          "default": "\"\""
         }
       ],
       "properties": [
         {
-          "name": "delegatesFocus",
+          "name": "delegatesFocus (readonly)",
           "description": "Element focus delegation.\nSet to `false` and relies on native focusing.",
           "type": "false",
           "default": "false"
@@ -59,12 +60,14 @@
           "name": "value",
           "attribute": "value",
           "description": "Returns the first selected item value.\nUse `values` when multiple selection mode is enabled.",
-          "type": "string"
+          "type": "string",
+          "default": "\"\""
         },
         {
           "name": "values",
           "description": "Returns a values collection of the currently\nselected item values",
-          "type": "object"
+          "type": "string[]",
+          "default": "[]"
         }
       ],
       "events": [
@@ -91,7 +94,17 @@
         },
         {
           "name": "down",
-          "description": "Navigate up through the list items",
+          "description": "Navigate down through the list items",
+          "params": []
+        },
+        {
+          "name": "first",
+          "description": "Navigate to first focusable item of the list",
+          "params": []
+        },
+        {
+          "name": "last",
+          "description": "Navigate to first focusable item of the list",
           "params": []
         },
         {

package/lib/list/custom-elements.md

@@ -0,0 +1,32 @@
+# ef-list
+
+Provides listing and immutable selection
+
+## Properties
+
+| Property                    | Attribute   | Type           | Default                  | Description                                      |
+|-----------------------------|-------------|----------------|--------------------------|--------------------------------------------------|
+| `data`                      |             | `ListData`     | null                     | The data object, used to render the list.        |
+| `delegatesFocus (readonly)` |             | `false`        | false                    | Element focus delegation.<br />Set to `false` and relies on native focusing. |
+| `multiple`                  | `multiple`  | `boolean`      | false                    | Allow multiple selections                        |
+| `renderer`                  |             | `ListRenderer` | "new ListRenderer(this)" | Renderer used to render list item elements       |
+| `stateless`                 | `stateless` | `boolean`      | false                    | Disable selections                               |
+| `value`                     | `value`     | `string`       | ""                       | Returns the first selected item value.<br />Use `values` when multiple selection mode is enabled. |
+| `values`                    |             | `string[]`     | []                       | Returns a values collection of the currently<br />selected item values |
+
+## Methods
+
+| Method         | Type                    | Description                                      |
+|----------------|-------------------------|--------------------------------------------------|
+| `down`         | `(): void`              | Navigate down through the list items             |
+| `first`        | `(): void`              | Navigate to first focusable item of the list     |
+| `last`         | `(): void`              | Navigate to first focusable item of the list     |
+| `scrollToItem` | `(item: T): void`       | Scroll to list item element<br /><br />**item**: Data item to scroll to |
+| `selectItem`   | `(item?: any): boolean` | Selects an item in the list<br /><br />**item**: Data Item or Item Element |
+| `up`           | `(): void`              | Navigate up through the list items               |
+
+## Events
+
+| Event           | Description                   |
+|-----------------|-------------------------------|
+| `value-changed` | Dispatched when value changes |

package/lib/list/helpers/list-renderer.js

@@ -28,6 +28,8 @@ export class ListRenderer extends Renderer {
             el.hidden = composer.getItemPropertyValue(item, 'hidden') === true;
             el.type = composer.getItemPropertyValue(item, 'type');
             el.multiple = !!context && context.multiple === true;
+            const itemRole = el.type === 'text' || !el.type ? 'option' : 'presentation';
+            el.setAttribute('role', itemRole);
             tooltip ? el.setAttribute('title', tooltip) : el.removeAttribute('title');
             return el;
         });

package/lib/list/index.d.ts

@@ -5,7 +5,8 @@ import type { ItemData } from '../item';
 import type { ListData } from './helpers/types';
 import { ListRenderer } from './helpers/list-renderer.js';
 import '../item/index.js';
-export { ListData, ListRenderer };
+export type { ListData };
+export { ListRenderer };
 /**
  * Key direction
  */
@@ -23,6 +24,7 @@ export declare class List<T extends DataItem = ItemData> extends ControlElement
      * @returns version number
      */
     static get version(): string;
+    protected readonly defaultRole: string | null;
     /**
      * Used to timestamp renders.
      * This enables diff checking against item updates,
@@ -71,6 +73,7 @@ export declare class List<T extends DataItem = ItemData> extends ControlElement
     /**
      * The data object, used to render the list.
      * @type {ListData}
+     * @default null
      */
     get data(): ListData<T>;
     set data(value: ListData<T>);
@@ -78,12 +81,15 @@ export declare class List<T extends DataItem = ItemData> extends ControlElement
     /**
      * Returns the first selected item value.
      * Use `values` when multiple selection mode is enabled.
+     * @default -
      */
     get value(): string;
     set value(value: string);
     /**
      * Returns a values collection of the currently
      * selected item values
+     * @type {string[]}
+     * @default []
      * @readonly
      */
     get values(): string[];
@@ -100,10 +106,20 @@ export declare class List<T extends DataItem = ItemData> extends ControlElement
      */
     up(): void;
     /**
-     * Navigate up through the list items
+     * Navigate down through the list items
      * @returns {void}
      */
     down(): void;
+    /**
+     * Navigate to first focusable item of the list
+     * @returns {void}
+     */
+    first(): void;
+    /**
+     * Navigate to first focusable item of the list
+     * @returns {void}
+     */
+    last(): void;
     /**
      * Proxy for querying the composer
      * @param engine composer querying engine
@@ -262,6 +278,7 @@ export declare class List<T extends DataItem = ItemData> extends ControlElement
     protected renderLightDOM(): void;
     protected firstUpdated(changeProperties: PropertyValues): void;
     protected update(changeProperties: PropertyValues): void;
+    protected updated(changedProperties: PropertyValues): void;
     /**
      * A `CSSResultGroup` that will be used
      * to style the host, slotted children

package/lib/list/index.js

@@ -23,6 +23,7 @@ const valueFormatWarning = new WarningNotice('The specified \'values\' format do
 let List = class List extends ControlElement {
     constructor() {
         super(...arguments);
+        this.defaultRole = 'listbox';
         /**
          * Used to timestamp renders.
          * This enables diff checking against item updates,
@@ -82,6 +83,7 @@ let List = class List extends ControlElement {
     /**
      * The data object, used to render the list.
      * @type {ListData}
+     * @default null
      */
     get data() {
         return this._data;
@@ -110,6 +112,7 @@ let List = class List extends ControlElement {
     /**
      * Returns the first selected item value.
      * Use `values` when multiple selection mode is enabled.
+     * @default -
      */
     get value() {
         return this.values[0] || '';
@@ -128,6 +131,8 @@ let List = class List extends ControlElement {
     /**
      * Returns a values collection of the currently
      * selected item values
+     * @type {string[]}
+     * @default []
      * @readonly
      */
     get values() {
@@ -189,12 +194,28 @@ let List = class List extends ControlElement {
         this.highlightItem(this.getNextHighlightItem(Direction.UP), true);
     }
     /**
-     * Navigate up through the list items
+     * Navigate down through the list items
      * @returns {void}
      */
     down() {
         this.highlightItem(this.getNextHighlightItem(Direction.DOWN), true);
     }
+    /**
+     * Navigate to first focusable item of the list
+     * @returns {void}
+     */
+    first() {
+        const firstItem = this.itemMap.get(this.tabbableElements[0]);
+        this.highlightItem(firstItem, true);
+    }
+    /**
+     * Navigate to first focusable item of the list
+     * @returns {void}
+     */
+    last() {
+        const lastItem = this.itemMap.get(this.tabbableElements[this.tabbableElements.length - 1]);
+        this.highlightItem(lastItem, true);
+    }
     /**
      * Proxy for querying the composer
      * @param engine composer querying engine
@@ -352,6 +373,12 @@ let List = class List extends ControlElement {
             case 'ArrowDown':
                 this.down();
                 break;
+            case 'Home':
+                this.first();
+                break;
+            case 'End':
+                this.last();
+                break;
             default:
                 return;
         }
@@ -548,6 +575,12 @@ let List = class List extends ControlElement {
         }
         return super.update(changeProperties);
     }
+    updated(changedProperties) {
+        super.updated(changedProperties);
+        if (changedProperties.has('multiple')) {
+            this.setAttribute('aria-multiselectable', this.multiple ? 'true' : 'false');
+        }
+    }
     /**
      * A `CSSResultGroup` that will be used
      * to style the host, slotted children

package/lib/loader/custom-elements.md

@@ -0,0 +1,5 @@
+# ef-loader
+
+An animated graphical component,
+used to show that an app is performing an action
+in the background such as downloading content.

package/lib/multi-input/custom-elements.json

@@ -49,13 +49,13 @@
           "name": "readonly",
           "description": "Hides text field and clear icon from all pills",
           "type": "boolean",
-          "default": "\"false\""
+          "default": "false"
         },
         {
           "name": "disabled",
           "description": "Set disabled state",
           "type": "boolean",
-          "default": "\"false\""
+          "default": "false"
         },
         {
           "name": "value",
@@ -66,9 +66,10 @@
       ],
       "properties": [
         {
-          "name": "values",
+          "name": "values (readonly)",
           "description": "Array of item's values ( readonly )",
-          "type": "string[]"
+          "type": "string[]",
+          "default": "[]"
         },
         {
           "name": "pillsOnly",
@@ -137,14 +138,14 @@
           "attribute": "readonly",
           "description": "Hides text field and clear icon from all pills",
           "type": "boolean",
-          "default": "\"false\""
+          "default": "false"
         },
         {
           "name": "disabled",
           "attribute": "disabled",
           "description": "Set disabled state",
           "type": "boolean",
-          "default": "\"false\""
+          "default": "false"
         },
         {
           "name": "value",