@refinitiv-ui/elements 5.7.0 → 5.8.0

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

@@ -9,8 +9,8 @@ horizontal bar visualization.
 |----------------|-----------------|------------------|----------|--------------------------------------------------|
 | `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`         | `object`         | []       | Value of range. eg [-20, 70]                     |
+| `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 |

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

@@ -4,21 +4,23 @@ Provides listing and immutable selection
 
 ## Properties
 
-| Property         | Attribute   | Modifiers | Type           | Default                  | Description                                      |
-|------------------|-------------|-----------|----------------|--------------------------|--------------------------------------------------|
-| `data`           |             |           | `ListData`     |                          | 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`         |             |           | `object`       |                          | Returns a values collection of the currently<br />selected item values |
+| 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 up through the list items               |
+| `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               |

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/multi-input/custom-elements.json

@@ -66,9 +66,10 @@
       ],
       "properties": [
         {
-          "name": "values",
+          "name": "values (readonly)",
           "description": "Array of item's values ( readonly )",
-          "type": "string[]"
+          "type": "string[]",
+          "default": "[]"
         },
         {
           "name": "pillsOnly",

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

@@ -4,22 +4,22 @@ An input control component to display a selection of pills
 
 ## Properties
 
-| Property         | Attribute     | Modifiers | Type                     | Default | Description                                    |
-|------------------|---------------|-----------|--------------------------|---------|------------------------------------------------|
-| `data`           |               |           | `MultiInputData \| null` |         | The data object, used to render the list.      |
-| `disabled`       | `disabled`    |           | `boolean`                | false   | Set disabled state                             |
-| `error`          | `error`       |           | `boolean`                | false   | Set state to error                             |
-| `icon`           | `icon`        |           | `string`                 | ""      | Specify icon to display inside input box       |
-| `maxLength`      | `maxlength`   |           | `number \| null`         | null    | Set character max limit                        |
-| `minLength`      | `minlength`   |           | `number \| null`         | null    | Set character min limit                        |
-| `pillsOnly`      | `pills-only`  |           | `boolean`                | false   | Hide text input box                            |
-| `placeholder`    | `placeholder` |           | `string`                 | ""      | Placeholder text to display in input box       |
-| `readonly`       | `readonly`    |           | `boolean`                | false   | Hides text field and clear icon from all pills |
-| `selectionEnd`   |               |           | `number \| null`         |         | Selection end index                            |
-| `selectionStart` |               |           | `number \| null`         |         | Selection start index                          |
-| `value`          | `value`       |           | `string`                 | ""      | Current value of text field                    |
-| `values`         |               | readonly  | `string[]`               |         | Array of item's values ( readonly )            |
-| `warning`        | `warning`     |           | `boolean`                | false   | Set state to warning                           |
+| Property            | Attribute     | Type                     | Default | Description                                    |
+|---------------------|---------------|--------------------------|---------|------------------------------------------------|
+| `data`              |               | `MultiInputData \| null` | null    | The data object, used to render the list.      |
+| `disabled`          | `disabled`    | `boolean`                | false   | Set disabled state                             |
+| `error`             | `error`       | `boolean`                | false   | Set state to error                             |
+| `icon`              | `icon`        | `string`                 | ""      | Specify icon to display inside input box       |
+| `maxLength`         | `maxlength`   | `number \| null`         | null    | Set character max limit                        |
+| `minLength`         | `minlength`   | `number \| null`         | null    | Set character min limit                        |
+| `pillsOnly`         | `pills-only`  | `boolean`                | false   | Hide text input box                            |
+| `placeholder`       | `placeholder` | `string`                 | ""      | Placeholder text to display in input box       |
+| `readonly`          | `readonly`    | `boolean`                | false   | Hides text field and clear icon from all pills |
+| `selectionEnd`      |               | `number \| null`         | null    | Selection end index                            |
+| `selectionStart`    |               | `number \| null`         | null    | Selection start index                          |
+| `value`             | `value`       | `string`                 | ""      | Current value of text field                    |
+| `values (readonly)` |               | `string[]`               | []      | Array of item's values ( readonly )            |
+| `warning`           | `warning`     | `boolean`                | false   | Set state to warning                           |
 
 ## Methods
 

package/lib/multi-input/index.d.ts

@@ -52,6 +52,7 @@ export declare class MultiInput extends ControlElement implements MultiValue {
      * Array of item's values ( readonly )
      * @readonly
      * @type {string[]}
+     * @default []
      */
     get values(): string[];
     /**
@@ -84,17 +85,20 @@ export declare class MultiInput extends ControlElement implements MultiValue {
     minLength: number | null;
     /**
      * Selection start index
+     * @default null
      */
     get selectionStart(): number | null;
     set selectionStart(index: SelectionIndex);
     /**
      * Selection end index
+     * @default null
      */
     get selectionEnd(): number | null;
     set selectionEnd(index: SelectionIndex);
     /**
      * The data object, used to render the list.
      * @type {MultiInputData | null}
+     * @default null
      */
     get data(): MultiInputData | null;
     set data(value: MultiInputData | null);

package/lib/multi-input/index.js

@@ -145,12 +145,14 @@ let MultiInput = class MultiInput extends ControlElement {
      * Array of item's values ( readonly )
      * @readonly
      * @type {string[]}
+     * @default []
      */
     get values() {
         return this.composer.queryItems(() => true).map(({ value }) => value);
     }
     /**
      * Selection start index
+     * @default null
      */
     get selectionStart() {
         if (this.search) {
@@ -165,6 +167,7 @@ let MultiInput = class MultiInput extends ControlElement {
     }
     /**
      * Selection end index
+     * @default null
      */
     get selectionEnd() {
         if (this.search) {
@@ -180,6 +183,7 @@ let MultiInput = class MultiInput extends ControlElement {
     /**
      * The data object, used to render the list.
      * @type {MultiInputData | null}
+     * @default null
      */
     get data() {
         return this._data;

package/lib/number-field/custom-elements.json

@@ -3,13 +3,8 @@
   "tags": [
     {
       "name": "ef-number-field",
-      "description": "Form control element for numbers",
+      "description": "Form control element for numbers.",
       "attributes": [
-        {
-          "name": "placeholder",
-          "description": "Set placeholder text",
-          "type": "string | null"
-        },
         {
           "name": "no-spinner",
           "description": "Set spinner's visibility",
@@ -32,28 +27,22 @@
           "type": "string | null"
         },
         {
-          "name": "transparent",
-          "description": "Set state to transparent",
+          "name": "disabled",
+          "description": "Set disabled state",
           "type": "boolean",
           "default": "false"
         },
         {
           "name": "error",
-          "description": "Set state to error",
-          "type": "boolean",
-          "default": "false"
-        },
-        {
-          "name": "warning",
-          "description": "Set state to warning",
+          "description": "Set error state",
           "type": "boolean",
           "default": "false"
         },
         {
-          "name": "value",
-          "description": "The value of the number entered into the input.",
+          "name": "placeholder",
+          "description": "Set placeholder text",
           "type": "string",
-          "default": "0"
+          "default": "\"\""
         },
         {
           "name": "readonly",
@@ -62,19 +51,25 @@
           "default": "false"
         },
         {
-          "name": "disabled",
-          "description": "Set disabled state",
+          "name": "transparent",
+          "description": "Disables all other states and border/background styles.",
           "type": "boolean",
           "default": "false"
+        },
+        {
+          "name": "warning",
+          "description": "Set warning state",
+          "type": "boolean",
+          "default": "false"
+        },
+        {
+          "name": "value",
+          "description": "The value of the number entered into the input.",
+          "type": "string",
+          "default": "\"\""
         }
       ],
       "properties": [
-        {
-          "name": "placeholder",
-          "attribute": "placeholder",
-          "description": "Set placeholder text",
-          "type": "string | null"
-        },
         {
           "name": "noSpinner",
           "attribute": "no-spinner",
@@ -101,37 +96,42 @@
           "type": "string | null"
         },
         {
-          "name": "transparent",
-          "attribute": "transparent",
-          "description": "Set state to transparent",
-          "type": "boolean",
-          "default": "false"
+          "name": "valueAsNumber (readonly)",
+          "description": "Returns the value of the element, interpreted as double number",
+          "type": "number"
         },
         {
-          "name": "error",
-          "attribute": "error",
-          "description": "Set state to error",
-          "type": "boolean",
-          "default": "false"
+          "name": "selectionStart",
+          "type": "number | null"
         },
         {
-          "name": "warning",
-          "attribute": "warning",
-          "description": "Set state to warning",
+          "name": "selectionEnd",
+          "type": "number | null"
+        },
+        {
+          "name": "selectionDirection",
+          "type": "\"forward\" | \"backward\" | \"none\" | null"
+        },
+        {
+          "name": "disabled",
+          "attribute": "disabled",
+          "description": "Set disabled state",
           "type": "boolean",
           "default": "false"
         },
         {
-          "name": "valueAsNumber",
-          "description": "Returns the value of the element, interpreted as double number",
-          "type": "number"
+          "name": "error",
+          "attribute": "error",
+          "description": "Set error state",
+          "type": "boolean",
+          "default": "false"
         },
         {
-          "name": "value",
-          "attribute": "value",
-          "description": "The value of the number entered into the input.",
+          "name": "placeholder",
+          "attribute": "placeholder",
+          "description": "Set placeholder text",
           "type": "string",
-          "default": "0"
+          "default": "\"\""
         },
         {
           "name": "readonly",
@@ -141,11 +141,25 @@
           "default": "false"
         },
         {
-          "name": "disabled",
-          "attribute": "disabled",
-          "description": "Set disabled state",
+          "name": "transparent",
+          "attribute": "transparent",
+          "description": "Disables all other states and border/background styles.",
+          "type": "boolean",
+          "default": "false"
+        },
+        {
+          "name": "warning",
+          "attribute": "warning",
+          "description": "Set warning state",
           "type": "boolean",
           "default": "false"
+        },
+        {
+          "name": "value",
+          "attribute": "value",
+          "description": "The value of the number entered into the input.",
+          "type": "string",
+          "default": "\"\""
         }
       ],
       "events": [
@@ -159,6 +173,26 @@
         }
       ],
       "methods": [
+        {
+          "name": "onInputInput",
+          "description": "",
+          "params": [
+            {
+              "name": "event",
+              "type": "InputEvent"
+            }
+          ]
+        },
+        {
+          "name": "onInputChange",
+          "description": "",
+          "params": [
+            {
+              "name": "event",
+              "type": "InputEvent"
+            }
+          ]
+        },
         {
           "name": "stepUp",
           "description": "Increases the input value by amount of step",
@@ -190,9 +224,20 @@
           "params": []
         },
         {
-          "name": "select",
-          "description": "Select the contents of input",
-          "params": []
+          "name": "setSelectionRange",
+          "description": "",
+          "params": [
+            {
+              "name": "startSelection"
+            },
+            {
+              "name": "endSelection"
+            },
+            {
+              "name": "selectionDirection",
+              "type": "SelectionDirection"
+            }
+          ]
         }
       ]
     }