@refinitiv-ui/elements 7.6.1 → 7.7.0

package/lib/counter/index.d.ts

@@ -2,7 +2,7 @@ import { JSXInterface } from '../jsx';
 import { BasicElement, CSSResultGroup, TemplateResult } from '@refinitiv-ui/core';
 /**
  * Counter is an item count badge,
- * support maximun display number and notation of large numbers.
+ * support maximum display number and notation of large numbers.
  */
 export declare class Counter extends BasicElement {
     /**

package/lib/counter/index.js

@@ -6,7 +6,7 @@ import { VERSION } from '../version.js';
 import { convertToCompactNotation, truncateDecimal } from './utils.js';
 /**
  * Counter is an item count badge,
- * support maximun display number and notation of large numbers.
+ * support maximum display number and notation of large numbers.
  */
 let Counter = class Counter extends BasicElement {
     constructor() {

package/lib/datetime-picker/custom-elements.json

@@ -78,13 +78,13 @@
         },
         {
           "name": "error",
-          "description": "Set state to error",
+          "description": "Set error state",
           "type": "boolean",
           "default": "false"
         },
         {
           "name": "warning",
-          "description": "Set state to warning",
+          "description": "Set warning state",
           "type": "boolean",
           "default": "false"
         },
@@ -234,14 +234,14 @@
         {
           "name": "error",
           "attribute": "error",
-          "description": "Set state to error",
+          "description": "Set error state",
           "type": "boolean",
           "default": "false"
         },
         {
           "name": "warning",
           "attribute": "warning",
-          "description": "Set state to warning",
+          "description": "Set warning state",
           "type": "boolean",
           "default": "false"
         },
@@ -329,7 +329,7 @@
         },
         {
           "name": "view-changed",
-          "description": "Fired when the user changes view in calendar e.g. change to next month view."
+          "description": "Fired when the user changes view in calendar e.g. change to next month view. The event is not triggered if `view` property is changed programmatically."
         }
       ],
       "slots": [

package/lib/datetime-picker/custom-elements.md

@@ -9,7 +9,7 @@ Control to pick date and time
 | `amPm`                 | `am-pm`                  | `boolean`                        | false   | Toggles 12hr time display                        |
 | `disabled`             | `disabled`               | `boolean`                        | false   | Set disabled state                               |
 | `duplex`               | `duplex`                 | `"" \| "consecutive" \| "split"` | null    | Display two calendar pickers.                    |
-| `error`                | `error`                  | `boolean`                        | false   | Set state to error                               |
+| `error`                | `error`                  | `boolean`                        | false   | Set error state                                  |
 | `filter`               |                          | `DatetimePickerFilter \| null`   | null    | Custom filter, used for enabling/disabling certain dates |
 | `firstDayOfWeek`       | `first-day-of-week`      | `number \| undefined`            |         | Set the first day of the week.<br />0 - for Sunday, 6 - for Saturday |
 | `format`               | `format`                 | `string`                         | ""      | Set the datetime format<br />Based on dane-fns datetime formats |
@@ -28,7 +28,7 @@ Control to pick date and time
 | `values`               | `values`                 | `string[]`                       | []      | Set multiple selected values                     |
 | `view`                 | `view`                   | `string`                         | ""      | Set the current calendar view.<br />Accepted format: 'yyyy-MM' |
 | `views`                |                          | `string[]`                       | []      | Set the current calendar views for duplex mode<br />Accepted format: 'yyyy-MM' |
-| `warning`              | `warning`                | `boolean`                        | false   | Set state to warning                             |
+| `warning`              | `warning`                | `boolean`                        | false   | Set warning state                                |
 | `weekdaysOnly`         | `weekdays-only`          | `boolean`                        | false   | Only enable weekdays                             |
 | `weekendsOnly`         | `weekends-only`          | `boolean`                        | false   | Only enable weekends                             |
 
@@ -45,7 +45,7 @@ Control to pick date and time
 | `error-changed`  | Fired when the user inputs invalid value. The event is not triggered if `error` property is changed programmatically. |
 | `opened-changed` | Fired when the user opens or closes control's popup. The event is not triggered if `opened` property is changed programmatically. |
 | `value-changed`  | Fired when the user commits a value change. The event is not triggered if `value` property is changed programmatically. |
-| `view-changed`   | Fired when the user changes view in calendar e.g. change to next month view. |
+| `view-changed`   | Fired when the user changes view in calendar e.g. change to next month view. The event is not triggered if `view` property is changed programmatically. |
 
 ## Slots
 

package/lib/datetime-picker/index.d.ts

@@ -14,7 +14,7 @@ export type { DatetimePickerFilter, DatetimePickerDuplex };
  * @fires opened-changed - Fired when the user opens or closes control's popup. The event is not triggered if `opened` property is changed programmatically.
  * @fires value-changed - Fired when the user commits a value change. The event is not triggered if `value` property is changed programmatically.
  * @fires error-changed - Fired when the user inputs invalid value. The event is not triggered if `error` property is changed programmatically.
- * @fires view-changed - Fired when the user changes view in calendar e.g. change to next month view.
+ * @fires view-changed - Fired when the user changes view in calendar e.g. change to next month view. The event is not triggered if `view` property is changed programmatically.
  *
  * @attr {boolean} readonly - Set readonly state
  * @prop {boolean} [readonly=false] - Set readonly state
@@ -135,11 +135,11 @@ export declare class DatetimePicker extends ControlElement implements MultiValue
      */
     opened: boolean;
     /**
-     * Set state to error
+     * Set error state
      */
     error: boolean;
     /**
-     * Set state to warning
+     * Set warning state
      */
     warning: boolean;
     /**

package/lib/datetime-picker/index.js

@@ -30,7 +30,7 @@ const INPUT_FORMAT = {
  * @fires opened-changed - Fired when the user opens or closes control's popup. The event is not triggered if `opened` property is changed programmatically.
  * @fires value-changed - Fired when the user commits a value change. The event is not triggered if `value` property is changed programmatically.
  * @fires error-changed - Fired when the user inputs invalid value. The event is not triggered if `error` property is changed programmatically.
- * @fires view-changed - Fired when the user changes view in calendar e.g. change to next month view.
+ * @fires view-changed - Fired when the user changes view in calendar e.g. change to next month view. The event is not triggered if `view` property is changed programmatically.
  *
  * @attr {boolean} readonly - Set readonly state
  * @prop {boolean} [readonly=false] - Set readonly state
@@ -89,11 +89,11 @@ let DatetimePicker = class DatetimePicker extends ControlElement {
          */
         this.opened = false;
         /**
-         * Set state to error
+         * Set error state
          */
         this.error = false;
         /**
-         * Set state to warning
+         * Set warning state
          */
         this.warning = false;
         /**

package/lib/header/custom-elements.json

@@ -24,11 +24,11 @@
       "slots": [
         {
           "name": "left",
-          "description": "Slot to add custom contents to the left side of header e.g. ef-icon, ef-checkbox"
+          "description": "Slot to add custom contents to the left side of header"
         },
         {
           "name": "right",
-          "description": "Slot to add custom contents to the right side of header e.g. ef-icon, ef-checkbox"
+          "description": "Slot to add custom contents to the right side of header"
         }
       ]
     }

package/lib/header/custom-elements.md

@@ -14,5 +14,5 @@ a sensible hierarchy and improve the user experience.
 
 | Name    | Description                                      |
 |---------|--------------------------------------------------|
-| `left`  | Slot to add custom contents to the left side of header e.g. ef-icon, ef-checkbox |
-| `right` | Slot to add custom contents to the right side of header e.g. ef-icon, ef-checkbox |
+| `left`  | Slot to add custom contents to the left side of header |
+| `right` | Slot to add custom contents to the right side of header |

package/lib/header/index.d.ts

@@ -5,8 +5,8 @@ import { BasicElement, CSSResultGroup, TemplateResult } from '@refinitiv-ui/core
  * Headers helps to organize the page layout content into
  * a sensible hierarchy and improve the user experience.
  *
- * @slot left - Slot to add custom contents to the left side of header e.g. ef-icon, ef-checkbox
- * @slot right - Slot to add custom contents to the right side of header e.g. ef-icon, ef-checkbox
+ * @slot left - Slot to add custom contents to the left side of header
+ * @slot right - Slot to add custom contents to the right side of header
  */
 export declare class Header extends BasicElement {
     /**

package/lib/header/index.js

@@ -8,8 +8,8 @@ import { VERSION } from '../version.js';
  * Headers helps to organize the page layout content into
  * a sensible hierarchy and improve the user experience.
  *
- * @slot left - Slot to add custom contents to the left side of header e.g. ef-icon, ef-checkbox
- * @slot right - Slot to add custom contents to the right side of header e.g. ef-icon, ef-checkbox
+ * @slot left - Slot to add custom contents to the left side of header
+ * @slot right - Slot to add custom contents to the right side of header
  */
 let Header = class Header extends BasicElement {
     constructor() {

package/lib/heatmap/custom-elements.json

@@ -140,7 +140,7 @@
           "params": [
             {
               "name": "event",
-              "description": "an event that occur while the user interacting with element",
+              "description": "A MouseEvent that occurs when Heatmap is being interacted",
               "type": "MouseEvent"
             }
           ]

package/lib/heatmap/custom-elements.md

@@ -21,6 +21,6 @@ values contained in a matrix are represented as colors
 
 ## Methods
 
-| Method               | Type                | Description                                      |
-|----------------------|---------------------|--------------------------------------------------|
-| `getCellDataAtEvent` | `(event: any): any` | Returns data of interactive cell<br /><br />**event**: an event that occur while the user interacting with element |
+| Method               | Type                                       | Description                                      |
+|----------------------|--------------------------------------------|--------------------------------------------------|
+| `getCellDataAtEvent` | `(event: MouseEvent): HeatmapCell \| null` | Returns data of interactive cell<br /><br />**event**: A MouseEvent that occurs when Heatmap is being interacted |

package/lib/heatmap/index.d.ts

@@ -67,8 +67,8 @@ export declare class Heatmap extends ResponsiveElement {
     saturation: number;
     /**
      * Returns data of interactive cell
-     * @param event an event that occur while the user interacting with element
-     * @returns data of cell
+     * @param {MouseEvent} event A MouseEvent that occurs when Heatmap is being interacted
+     * @returns {HeatmapCell | null} Heatmap cell data, if event happens on a cell
      */
     getCellDataAtEvent(event: MouseEvent): HeatmapCell | null;
     /**

package/lib/heatmap/index.js

@@ -92,8 +92,8 @@ let Heatmap = class Heatmap extends ResponsiveElement {
     }
     /**
      * Returns data of interactive cell
-     * @param event an event that occur while the user interacting with element
-     * @returns data of cell
+     * @param {MouseEvent} event A MouseEvent that occurs when Heatmap is being interacted
+     * @returns {HeatmapCell | null} Heatmap cell data, if event happens on a cell
      */
     /* c8 ignore start */
     getCellDataAtEvent(event) {

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

@@ -15,9 +15,9 @@ By lightweight-charts library.
 
 ## Methods
 
-| Method   | Type         | Description                                    |
-|----------|--------------|------------------------------------------------|
-| `colors` | `(): object` | List of available chart colors from the theme. |
+| Method   | Type           | Description                                    |
+|----------|----------------|------------------------------------------------|
+| `colors` | `(): string[]` | List of available chart colors from the theme. |
 
 ## Events
 

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

@@ -334,7 +334,7 @@ export declare class InteractiveChart extends ResponsiveElement {
     private cssVarAsNumber;
     /**
      * List of available chart colors from the theme.
-     * @returns list of available chart colors from the theme.
+     * @returns {string[]} List of available chart colors from the theme.
      */
     colors(): string[];
     /**

package/lib/interactive-chart/index.js

@@ -978,7 +978,7 @@ let InteractiveChart = InteractiveChart_1 = class InteractiveChart extends Respo
     }
     /**
      * List of available chart colors from the theme.
-     * @returns list of available chart colors from the theme.
+     * @returns {string[]} List of available chart colors from the theme.
      */
     colors() {
         let color;

package/lib/item/custom-elements.json

@@ -116,7 +116,8 @@
         {
           "name": "highlightable (readonly)",
           "description": "Return true if the item can be highlighted. True if not disabled and type is Text",
-          "type": "boolean"
+          "type": "boolean",
+          "default": "true"
         },
         {
           "name": "value",

package/lib/item/custom-elements.md

@@ -10,7 +10,7 @@ to create simple menus or navigation panels.
 |----------------------------|---------------|--------------------|---------|--------------------------------------------------|
 | `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 |
+| `highlightable (readonly)` |               | `boolean`          | true    | 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          |
 | `label`                    | `label`       | `string \| null`   | null    | The text for the label indicating the meaning of the item.<br />By having both `label` and content, content always takes priority |

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

@@ -5,6 +5,10 @@ interface CommonItem extends DataItem {
      * Type of item. Value can be `text`, `header`, `divider`
      */
     type?: ItemType;
+    /**
+     * Used for nested ItemData.
+     */
+    items?: ItemData[];
 }
 interface CommonLabelItem extends CommonItem {
     /**

package/lib/item/index.d.ts

@@ -164,6 +164,7 @@ export declare class Item extends ControlElement {
     /**
      * Return true if the item can be highlighted. True if not disabled and type is Text
      * @prop {boolean} highlightable
+     * @default true
      * @returns whether element is highlightable
      */
     get highlightable(): boolean;

package/lib/item/index.js

@@ -266,6 +266,7 @@ let Item = class Item extends ControlElement {
     /**
      * Return true if the item can be highlighted. True if not disabled and type is Text
      * @prop {boolean} highlightable
+     * @default true
      * @returns whether element is highlightable
      */
     get highlightable() {

package/lib/label/custom-elements.json

@@ -13,13 +13,13 @@
         },
         {
           "name": "error",
-          "description": "Set state to error",
+          "description": "Set error state",
           "type": "boolean",
           "default": "false"
         },
         {
           "name": "warning",
-          "description": "Set state to warning",
+          "description": "Set warning state",
           "type": "boolean",
           "default": "false"
         }
@@ -35,14 +35,14 @@
         {
           "name": "error",
           "attribute": "error",
-          "description": "Set state to error",
+          "description": "Set error state",
           "type": "boolean",
           "default": "false"
         },
         {
           "name": "warning",
           "attribute": "warning",
-          "description": "Set state to warning",
+          "description": "Set warning state",
           "type": "boolean",
           "default": "false"
         }

package/lib/label/custom-elements.md

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

package/lib/label/index.d.ts

@@ -21,11 +21,11 @@ export declare class Label extends BasicElement {
      */
     lineClamp: number;
     /**
-     * Set state to error
+     * Set error state
      */
     error: boolean;
     /**
-     * Set state to warning
+     * Set warning state
      */
     warning: boolean;
     /**

package/lib/label/index.js

@@ -29,11 +29,11 @@ let Label = class Label extends BasicElement {
          */
         this.lineClamp = 0;
         /**
-         * Set state to error
+         * Set error state
          */
         this.error = false;
         /**
-         * Set state to warning
+         * Set warning state
          */
         this.warning = false;
         /**

package/lib/list/custom-elements.md

@@ -16,14 +16,14 @@ Provides listing and immutable selection
 
 ## 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               |
+| 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?: T \| HTMLElement): boolean` | Selects an item in the list<br /><br />**item**: Data Item or Item Element |
+| `up`           | `(): void`                           | Navigate up through the list items               |
 
 ## Events
 

package/lib/list/elements/list.d.ts

@@ -90,7 +90,7 @@ export declare class List<T extends DataItem = ItemData> extends ControlElement
     set values(values: string[]);
     /**
      * Selects an item in the list
-     * @param item Data Item or Item Element
+     * @param {T | HTMLElement} item Data Item or Item Element
      * @returns If a selection has been made or not
      */
     selectItem(item?: T | HTMLElement): boolean;

package/lib/list/elements/list.js

@@ -160,7 +160,7 @@ let List = class List extends ControlElement {
     }
     /**
      * Selects an item in the list
-     * @param item Data Item or Item Element
+     * @param {T | HTMLElement} item Data Item or Item Element
      * @returns If a selection has been made or not
      */
     selectItem(item) {

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

@@ -25,13 +25,13 @@
         },
         {
           "name": "error",
-          "description": "Set state to error",
+          "description": "Set error state",
           "type": "boolean",
           "default": "false"
         },
         {
           "name": "warning",
-          "description": "Set state to warning",
+          "description": "Set warning state",
           "type": "boolean",
           "default": "false"
         },
@@ -95,14 +95,14 @@
         {
           "name": "error",
           "attribute": "error",
-          "description": "Set state to error",
+          "description": "Set error state",
           "type": "boolean",
           "default": "false"
         },
         {
           "name": "warning",
           "attribute": "warning",
-          "description": "Set state to warning",
+          "description": "Set warning state",
           "type": "boolean",
           "default": "false"
         },

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

@@ -8,7 +8,7 @@ An input control component to display a selection of pills
 |---------------------|---------------|--------------------------|---------|------------------------------------------------|
 | `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                             |
+| `error`             | `error`       | `boolean`                | false   | Set error state                                |
 | `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                        |
@@ -19,7 +19,7 @@ An input control component to display a selection of pills
 | `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                           |
+| `warning`           | `warning`     | `boolean`                | false   | Set warning state                              |
 
 ## Methods
 

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

@@ -56,11 +56,11 @@ export declare class MultiInput extends ControlElement implements MultiValue {
      */
     placeholder: string;
     /**
-     * Set state to error
+     * Set error state
      */
     error: boolean;
     /**
-     * Set state to warning
+     * Set warning state
      */
     warning: boolean;
     /**

package/lib/multi-input/index.js

@@ -43,11 +43,11 @@ let MultiInput = class MultiInput extends ControlElement {
          */
         this.placeholder = '';
         /**
-         * Set state to error
+         * Set error state
          */
         this.error = false;
         /**
-         * Set state to warning
+         * Set warning state
          */
         this.warning = false;
         /**

package/lib/number-field/index.d.ts

@@ -49,6 +49,14 @@ export declare class NumberField extends FormFieldElement {
      * @return CSS template
      */
     static get styles(): CSSResultGroup;
+    /**
+     * Time period (ms) before press repetition starts
+     */
+    private repeatDelay;
+    /**
+     * Time period (ms) between each repeat
+     */
+    private repeatRate;
     /**
      * Set spinner's visibility
      */
@@ -87,6 +95,20 @@ export declare class NumberField extends FormFieldElement {
      * Get spinner down element
      */
     private spinnerDownEl?;
+    /**
+     * An object's returned from setTimeout to use with repeat delay.
+     */
+    private repeatDelayTimer;
+    /**
+     * An object's returned from setInterval to use with repeat rate.
+     */
+    private repeatRateTimer;
+    /**
+     * Called after the component is first rendered
+     * @param changedProperties Properties which have changed
+     * @returns {void}
+     */
+    protected firstUpdated(changedProperties: PropertyValues): void;
     /**
      * Updates the element
      * @param changedProperties Properties that has changed
@@ -164,6 +186,11 @@ export declare class NumberField extends FormFieldElement {
      * @returns {void}
      */
     protected onSpinnerTap(event: TapEvent): void;
+    /**
+     * Clear repeatDelayTimer and repeatRateTimer if exist
+     * @returns {void}
+     */
+    protected clearTimer: () => void;
     /**
      * Step down or up and notify value change
      * @param direction Up or Down