@refinitiv-ui/elements 5.0.0-beta.3 → 5.0.0-dev.204

package/lib/layout/index.js

@@ -1,10 +1,8 @@
-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 { ResponsiveElement, html, css, customElement, property } from '@refinitiv-ui/core';
+import { __decorate } from "tslib";
+import { ResponsiveElement, 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';
 /**
  * Layout component for creating responsive applications and components
  * @fires resize - Fired when the element's size changes.
@@ -75,7 +73,14 @@ let Layout = class Layout extends ResponsiveElement {
         this.maxHeight = null;
     }
     /**
-   * A `CSSResult` that will be used
+     * Element version number
+     * @returns version number
+     */
+    static get version() {
+        return VERSION;
+    }
+    /**
+   * A `CSSResultGroup` that will be used
    * to style the host, slotted children
    * and the internal template of the element.
    * @return CSS template
@@ -205,4 +210,3 @@ Layout = __decorate([
     })
 ], Layout);
 export { Layout };
-//# sourceMappingURL=index.js.map

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

@@ -1,20 +1,25 @@
 import { JSXInterface } from '../jsx';
-import { BasicElement, TemplateResult, CSSResult, PropertyValues } from '@refinitiv-ui/core';
-import '../canvas';
+import { BasicElement, TemplateResult, CSSResultGroup, PropertyValues } from '@refinitiv-ui/core';
+import '../canvas/index.js';
 /**
  * A component used to show data in a LED-like
  * horizontal bar visualization.
  */
 export declare class LedGauge extends BasicElement {
+    /**
+     * Element version number
+     * @returns version number
+     */
+    static get version(): string;
     private _zero;
     constructor();
     /**
-     * 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;
+    static get styles(): CSSResultGroup;
     /**
      * Value of bar for top legend position
      * Value can be -100 to 100
@@ -27,6 +32,7 @@ export declare class LedGauge extends BasicElement {
     bottomValue: number | null;
     /**
      * Value of range. eg [-20, 70]
+     * @type {number[]}
      */
     range: number[];
     /**
@@ -133,4 +139,6 @@ declare global {
       'ef-led-gauge': Partial<LedGauge> | JSXInterface.HTMLAttributes<LedGauge>;
     }
   }
-}
+}
+
+export {};

package/lib/led-gauge/index.js

@@ -1,11 +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 '../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',
@@ -32,6 +30,7 @@ let LedGauge = class LedGauge extends BasicElement {
         this.bottomValue = null;
         /**
          * Value of range. eg [-20, 70]
+         * @type {number[]}
          */
         this.range = [];
         /**
@@ -56,7 +55,14 @@ let LedGauge = class LedGauge extends BasicElement {
         this._zero = ZERO_MAP.CENTER;
     }
     /**
-     * A `CSSResult` that will be used
+     * Element version number
+     * @returns version number
+     */
+    static get version() {
+        return VERSION;
+    }
+    /**
+     * A `CSSResultGroup` that will be used
      * to style the host, slotted children
      * and the internal template of the element.
      * @return CSS template
@@ -131,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) {
@@ -430,4 +436,3 @@ LedGauge = __decorate([
     })
 ], LedGauge);
 export { LedGauge };
-//# sourceMappingURL=index.js.map

package/lib/list/custom-elements.json

@@ -11,6 +11,12 @@
           "type": "boolean",
           "default": "false"
         },
+        {
+          "name": "aria-multiselectable",
+          "description": "Aria indicating that list supports multiple selection",
+          "type": "string",
+          "default": "false"
+        },
         {
           "name": "multiple",
           "description": "Allow multiple selections",
@@ -20,12 +26,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"
@@ -43,6 +50,13 @@
           "type": "boolean",
           "default": "false"
         },
+        {
+          "name": "ariaMultiselectable",
+          "attribute": "aria-multiselectable",
+          "description": "Aria indicating that list supports multiple selection",
+          "type": "string",
+          "default": "false"
+        },
         {
           "name": "multiple",
           "attribute": "multiple",
@@ -59,12 +73,20 @@
           "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": [
+        {
+          "name": "value-changed",
+          "description": "Dispatched when value changes"
         }
       ],
       "methods": [
@@ -85,7 +107,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,33 @@
+# ef-list
+
+Provides listing and immutable selection
+
+## Properties
+
+| Property                    | Attribute              | Type           | Default                  | Description                                      |
+|-----------------------------|------------------------|----------------|--------------------------|--------------------------------------------------|
+| `ariaMultiselectable`       | `aria-multiselectable` | `string`       | false                    | Aria indicating that list supports multiple selection |
+| `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/extensible-function.js

@@ -4,9 +4,10 @@
  * ! Do not import this module !
  */
 export class ExtensibleFunction extends Function {
+    // eslint-disable-next-line @typescript-eslint/ban-types
     constructor(fn) {
         super();
+        // eslint-disable-next-line @typescript-eslint/no-unsafe-return
         return Object.setPrototypeOf(fn, new.target.prototype);
     }
 }
-//# sourceMappingURL=extensible-function.js.map

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,9 +28,10 @@ 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;
         });
     }
 }
-//# sourceMappingURL=list-renderer.js.map

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/helpers/types.js

@@ -1,2 +1 @@
 export {};
-//# sourceMappingURL=types.js.map

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
  */
@@ -15,8 +16,15 @@ declare enum Direction {
 }
 /**
  * Provides listing and immutable selection
+ * @fires value-changed - Dispatched when value changes
  */
 export declare class List<T extends DataItem = ItemData> extends ControlElement {
+    /**
+     * Element version number
+     * @returns version number
+     */
+    static get version(): string;
+    protected readonly defaultRole: string | null;
     /**
      * Used to timestamp renders.
      * This enables diff checking against item updates,
@@ -58,6 +66,10 @@ export declare class List<T extends DataItem = ItemData> extends ControlElement
      * Disable selections
      */
     stateless: boolean;
+    /**
+     * Aria indicating that list supports multiple selection
+     */
+    ariaMultiselectable: string;
     /**
      * Allow multiple selections
      */
@@ -65,6 +77,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>);
@@ -72,12 +85,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[];
@@ -94,10 +110,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
@@ -229,7 +255,7 @@ export declare class List<T extends DataItem = ItemData> extends ControlElement
      * Allows for a mapping to be created between
      * Data Item and Item Element.
      * @param item Data item context
-     * @param reusableElement Child element available for reuse
+     * @param recyclableElements Child elements available for reuse
      * @returns List item element
      */
     private createListItem;
@@ -243,6 +269,12 @@ export declare class List<T extends DataItem = ItemData> extends ControlElement
      * @returns {void}
      */
     private fireSelectionUpdate;
+    /**
+     * Calculates what elements can be recycled safely
+     * @param renderItems Current items to render
+     * @returns Collection of elements to be recycled
+     */
+    private calculateRecyclableElements;
     /**
      * Renders updates to light DOM
      * @returns {void}
@@ -250,13 +282,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.
@@ -275,4 +308,6 @@ declare global {
       'ef-list': Partial<List> | JSXInterface.HTMLAttributes<List>;
     }
   }
-}
+}
+
+export {};