@refinitiv-ui/elements 5.3.4 → 5.8.0

package/lib/led-gauge/index.js

@@ -1,12 +1,9 @@
-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 { BasicElement, html, css, customElement, property } from '@refinitiv-ui/core';
-import { VERSION } from '../';
-import '../canvas';
+import { __decorate } from "tslib";
+import { BasicElement, html, css } from '@refinitiv-ui/core';
+import { customElement } from '@refinitiv-ui/core/lib/decorators/custom-element.js';
+import { property } from '@refinitiv-ui/core/lib/decorators/property.js';
+import { VERSION } from '../version.js';
+import '../canvas/index.js';
 const ZERO_MAP = {
     LEFT: 'left',
     CENTER: 'center',
@@ -33,6 +30,7 @@ let LedGauge = class LedGauge extends BasicElement {
         this.bottomValue = null;
         /**
          * Value of range. eg [-20, 70]
+         * @type {number[]}
          */
         this.range = [];
         /**
@@ -64,7 +62,7 @@ let LedGauge = class LedGauge extends BasicElement {
         return VERSION;
     }
     /**
-     * A `CSSResult` that will be used
+     * A `CSSResultGroup` that will be used
      * to style the host, slotted children
      * and the internal template of the element.
      * @return CSS template
@@ -139,7 +137,7 @@ let LedGauge = class LedGauge extends BasicElement {
         else {
             this._zero = ZERO_MAP.CENTER;
         }
-        void this.requestUpdate('zero', oldValue);
+        this.requestUpdate('zero', oldValue);
     }
     get _shadowRoot() {
         if (!this.shadowRoot) {

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.d.ts

@@ -1,5 +1,5 @@
-import '../../item';
-import { Renderer } from '../renderer';
+import '../../item/index.js';
+import { Renderer } from '../renderer.js';
 /**
  * Renders list items as `ef-item` elements.
  * This is the default renderer for lists.

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

@@ -1,5 +1,5 @@
-import '../../item';
-import { Renderer } from '../renderer';
+import '../../item/index.js';
+import { Renderer } from '../renderer.js';
 /**
  * Renders list items as `ef-item` elements.
  * This is the default renderer for lists.
@@ -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/helpers/types.d.ts

@@ -1,3 +1,3 @@
-import { CollectionComposer, DataItem } from '@refinitiv-ui/utils';
-import { ItemData } from '../../item';
+import type { CollectionComposer, DataItem } from '@refinitiv-ui/utils/lib/collection.js';
+import type { ItemData } from '../../item';
 export declare type ListData<T extends DataItem = ItemData> = T[] | CollectionComposer<T> | null;

package/lib/list/index.d.ts

@@ -1,11 +1,12 @@
 import { JSXInterface } from '../jsx';
-import { ControlElement, CSSResult, PropertyValues, TapEvent, TemplateResult } from '@refinitiv-ui/core';
-import { CollectionComposer, DataItem } from '@refinitiv-ui/utils';
-import '../item';
-import { ItemData } from '../item';
-import { ListData } from './helpers/types';
-import { ListRenderer } from './helpers/list-renderer';
-export { ListData, ListRenderer };
+import { ControlElement, CSSResultGroup, PropertyValues, TapEvent, TemplateResult } from '@refinitiv-ui/core';
+import { CollectionComposer, DataItem } from '@refinitiv-ui/utils/lib/collection.js';
+import type { ItemData } from '../item';
+import type { ListData } from './helpers/types';
+import { ListRenderer } from './helpers/list-renderer.js';
+import '../item/index.js';
+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,13 +278,14 @@ 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 `CSSResult` that will be used
+     * A `CSSResultGroup` that will be used
      * to style the host, slotted children
      * and the internal template of the element.
      * @return CSS template
      */
-    static get styles(): CSSResult | CSSResult[];
+    static get styles(): CSSResultGroup;
     /**
      * A `TemplateResult` that will be used
      * to render the updated internal template.

package/lib/list/index.js

@@ -1,14 +1,11 @@
-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, WarningNotice } from '@refinitiv-ui/core';
-import { CollectionComposer } from '@refinitiv-ui/utils';
-import '../item';
-import { ListRenderer } from './helpers/list-renderer';
-import { VERSION } from '../';
+import { __decorate } from "tslib";
+import { ControlElement, css, html, WarningNotice } from '@refinitiv-ui/core';
+import { customElement } from '@refinitiv-ui/core/lib/decorators/custom-element.js';
+import { property } from '@refinitiv-ui/core/lib/decorators/property.js';
+import { VERSION } from '../version.js';
+import { CollectionComposer } from '@refinitiv-ui/utils/lib/collection.js';
+import { ListRenderer } from './helpers/list-renderer.js';
+import '../item/index.js';
 export { ListRenderer };
 /**
  * Key direction
@@ -26,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,
@@ -37,7 +35,7 @@ let List = class List extends ControlElement {
          * @returns Update promise.
          */
         this.modificationUpdate = () => {
-            void this.requestUpdate();
+            this.requestUpdate();
         };
         /**
          * Item map; used to link element nodes to data items.
@@ -85,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;
@@ -108,11 +107,12 @@ let List = class List extends ControlElement {
         );
         this.clearMaps();
         this._data = value;
-        void this.requestUpdate('data', oldValue);
+        this.requestUpdate('data', oldValue);
     }
     /**
      * Returns the first selected item value.
      * Use `values` when multiple selection mode is enabled.
+     * @default -
      */
     get value() {
         return this.values[0] || '';
@@ -125,12 +125,14 @@ let List = class List extends ControlElement {
             if (item) {
                 this.composer.setItemPropertyValue(item, 'selected', true);
             }
-            void this.requestUpdate('value', oldValue);
+            this.requestUpdate('value', oldValue);
         }
     }
     /**
      * Returns a values collection of the currently
      * selected item values
+     * @type {string[]}
+     * @default []
      * @readonly
      */
     get values() {
@@ -157,7 +159,7 @@ let List = class List extends ControlElement {
                     matches.forEach((match) => this.composer.setItemPropertyValue(match, 'selected', true));
                     return !this.multiple; // Only set the fist value if multiple is not enabled
                 });
-                void this.requestUpdate('values', oldValue);
+                this.requestUpdate('values', oldValue);
             }
         }
     }
@@ -192,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
@@ -355,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;
         }
@@ -439,7 +463,7 @@ let List = class List extends ControlElement {
     clearSelection() {
         this.queryItemsByPropertyValue('selected', true)
             .forEach((item) => this.composer.setItemPropertyValue(item, 'selected', false));
-        void this.requestUpdate();
+        this.requestUpdate();
     }
     /**
      * Queries and returns all renderable items.
@@ -525,15 +549,14 @@ let List = class List extends ControlElement {
         const currentChildren = Array.from(this.children);
         const recyclableElements = this.calculateRecyclableElements(renderItems);
         const renderChildren = renderItems.map((item) => this.createListItem(item, recyclableElements));
-        const deletions = currentChildren.filter(item => !renderChildren.includes(item));
-        deletions.forEach(item => this.removeChild(item));
-        renderChildren.forEach(item => {
-            const index = renderChildren.indexOf(item);
+        const deletions = currentChildren.filter(element => !renderChildren.includes(element));
+        deletions.forEach(element => this.removeChild(element));
+        renderChildren.forEach((element, index) => {
             if (this.children.length === index) {
-                this.appendChild(item);
+                this.appendChild(element);
             }
-            else {
-                this.insertBefore(item, this.children[index]);
+            else if (element !== this.children[index]) {
+                this.insertBefore(element, this.children[index]);
             }
         });
     }
@@ -552,8 +575,14 @@ 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 `CSSResult` that will be used
+     * A `CSSResultGroup` that will be used
      * to style the host, slotted children
      * and the internal template of the element.
      * @return CSS template

package/lib/list/renderer.d.ts

@@ -1,5 +1,5 @@
-import { ExtensibleFunction } from './extensible-function';
-import { DataItem, CollectionComposer } from '@refinitiv-ui/utils';
+import { ExtensibleFunction } from './extensible-function.js';
+import type { DataItem, CollectionComposer } from '@refinitiv-ui/utils/lib/collection.js';
 /**
  * Render function interface
  * TODO: Move this to @refinitiv-ui/utils

package/lib/list/renderer.js

@@ -1,4 +1,4 @@
-import { ExtensibleFunction } from './extensible-function';
+import { ExtensibleFunction } from './extensible-function.js';
 /**
  * Renderer base class.
  * Used for creating renderers to render data items.

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/loader/index.js

@@ -1,11 +1,7 @@
-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 { BasicElement, customElement, html } from '@refinitiv-ui/core';
-import { VERSION } from '../';
+import { __decorate } from "tslib";
+import { BasicElement, html } from '@refinitiv-ui/core';
+import { customElement } from '@refinitiv-ui/core/lib/decorators/custom-element.js';
+import { VERSION } from '../version.js';
 /**
  * Global cache for loader template parts
  */

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",

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

@@ -0,0 +1,43 @@
+# ef-multi-input
+
+An input control component to display a selection of pills
+
+## Properties
+
+| 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
+
+| Method              | Type                                             | Description                                      |
+|---------------------|--------------------------------------------------|--------------------------------------------------|
+| `add`               | `(item: any): MultiInputDataItem \| null`        | Add a new item to the input. Return newly added object or null if added invalid object.<br /><br />**item**: to add. Object must have at least value and label |
+| `removeByIndex`     | `(index: number): MultiInputDataItem \| null`    | Removes pill by index. Returns item that removed or null if list was empty<br /><br />**index**: of pill to be removed |
+| `removeByValue`     | `(value: string): string`                        | Removes the item by the value and returns array of removed items<br /><br />**value**: Value of item to remove |
+| `removeLastItem`    | `(): MultiInputDataItem \| null`                 | Removes last item. Returns item that removed or null if list was empty |
+| `select`            | `(): void`                                       | Select the contents of input                     |
+| `setSelectionRange` | `(startSelection: number, endSelection: number): void` | Set the selection range<br /><br />**startSelection**: Start of selection<br />**endSelection**: End of the selection |
+
+## Events
+
+| Event           | Description                                      |
+|-----------------|--------------------------------------------------|
+| `error-changed` | Dispatched when error state changes.<br />Property `detail.error` is error from validation. |
+| `item-added`    | Fired when new pill is added.<br />Property `detail.item` is new added pill.<br />Property `detail.items` is new list of all pills. |
+| `item-error`    | Fired when item that attempt to add is invalid.<br />Property `detail.item` is item with an error.<br />Property `detail.items` a current list of pills. |
+| `item-removed`  | Fired when item is removed.<br />Property `detail.item` is pill that removed.<br />Property `detail.items` is new list of all pills. |
+| `value-changed` | Fired when new value of text field is changed.<br />Property `detail.value` will be the new value. |

package/lib/multi-input/helpers/types.d.ts

@@ -1,4 +1,4 @@
-import { CollectionItem } from '@refinitiv-ui/utils';
+import type { CollectionItem } from '@refinitiv-ui/utils/lib/collection.js';
 export declare type SelectionIndex = number | null;
 export declare type MultiInputEvents = 'item-added' | 'item-removed' | 'item-error';
 export declare type MultiInputData = MultiInputDataItem[];

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

@@ -1,9 +1,9 @@
 import { JSXInterface } from '../jsx';
-import { ControlElement, CSSResult, MultiValue, TemplateResult, PropertyValues } from '@refinitiv-ui/core';
-import '../pill';
-import '../text-field';
-import { MultiInputData, MultiInputDataItem, SelectionIndex } from './helpers/types';
-export { MultiInputData, MultiInputDataItem };
+import { ControlElement, CSSResultGroup, MultiValue, TemplateResult, PropertyValues } from '@refinitiv-ui/core';
+import type { MultiInputData, MultiInputDataItem, SelectionIndex } from './helpers/types';
+import '../pill/index.js';
+import '../text-field/index.js';
+export type { MultiInputData, MultiInputDataItem };
 /**
  * An input control component to display a selection of pills
  *
@@ -42,16 +42,17 @@ export declare class MultiInput extends ControlElement implements MultiValue {
      */
     static get version(): string;
     /**
-     * A `CSSResult` that will be used
+     * A `CSSResultGroup` that will be used
      * to style the host, slotted children
      * and the internal template of the element.
      * @return CSS template
      */
-    static get styles(): CSSResult | CSSResult[];
+    static get styles(): CSSResultGroup;
     /**
      * 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);