@refinitiv-ui/elements 5.7.0 → 5.8.0

package/lib/slider/custom-elements.md

@@ -17,7 +17,7 @@ Allows users to make selections from a range of values
 | `showSteps`      | `show-steps`       | `boolean`                  | false   | Show steps marker on slider.                     |
 | `step`           | `step`             | `string`                   | "1"     | Specified size of increment or decrement jump between value. |
 | `to`             | `to`               | `string`                   | "100"   | Uses with `range`. High value of slider in range mode |
-| `value`          | `value`            | `string`                   | 0       | Value of slider. Not applicable in range mode.   |
+| `value`          | `value`            | `string`                   | "0"     | Value of slider. Not applicable in range mode.   |
 
 ## Events
 

package/lib/slider/index.d.ts

@@ -5,7 +5,7 @@ import '../number-field/index.js';
  * Allows users to make selections from a range of values
  *
  * @attr {string} value - Value of slider. Not applicable in range mode.
- * @prop {string} [value=0] - Value of slider. Not applicable in range mode.
+ * @prop {string} [value="0"] - Value of slider. Not applicable in range mode.
  *
  * @attr {boolean} readonly - Set readonly state
  * @prop {boolean} [readonly=false] - Set readonly state

package/lib/slider/index.js

@@ -49,7 +49,7 @@ const clamp = function (value, min, max) {
  * Allows users to make selections from a range of values
  *
  * @attr {string} value - Value of slider. Not applicable in range mode.
- * @prop {string} [value=0] - Value of slider. Not applicable in range mode.
+ * @prop {string} [value="0"] - Value of slider. Not applicable in range mode.
  *
  * @attr {boolean} readonly - Set readonly state
  * @prop {boolean} [readonly=false] - Set readonly state

package/lib/sparkline/custom-elements.json

@@ -7,13 +7,13 @@
         {
           "name": "data",
           "description": "Chart data as an array of number.",
-          "type": "object",
+          "type": "number[]",
           "default": "[]"
         },
         {
           "name": "previous-data",
           "description": "Chart previous data as an array of number.",
-          "type": "object",
+          "type": "number[]",
           "default": "[]"
         },
         {
@@ -27,14 +27,14 @@
           "name": "data",
           "attribute": "data",
           "description": "Chart data as an array of number.",
-          "type": "object",
+          "type": "number[]",
           "default": "[]"
         },
         {
           "name": "previousData",
           "attribute": "previous-data",
           "description": "Chart previous data as an array of number.",
-          "type": "object",
+          "type": "number[]",
           "default": "[]"
         },
         {

package/lib/sparkline/custom-elements.md

@@ -4,8 +4,8 @@
 
 | Property         | Attribute         | Type                  | Default | Description                                      |
 |------------------|-------------------|-----------------------|---------|--------------------------------------------------|
-| `data`           | `data`            | `object`              | []      | Chart data as an array of number.                |
-| `previousData`   | `previous-data`   | `object`              | []      | Chart previous data as an array of number.       |
+| `data`           | `data`            | `number[]`            | []      | Chart data as an array of number.                |
+| `previousData`   | `previous-data`   | `number[]`            | []      | Chart previous data as an array of number.       |
 | `referenceValue` | `reference-value` | `number \| undefined` |         | Baseline value to show horizontal line (optional) |
 
 ## Events

package/lib/sparkline/index.d.ts

@@ -11,12 +11,14 @@ export declare class Sparkline extends ResponsiveElement {
     static get version(): string;
     /**
      * Chart data as an array of number.
+     * @type {number[]}
      */
     data: number[];
     /**
      * Chart previous data as an array of number.
+     * @type {number[]}
      */
-    previousData: never[];
+    previousData: number[];
     /**
      * Baseline value to show horizontal line (optional)
      */

package/lib/sparkline/index.js

@@ -11,10 +11,12 @@ let Sparkline = class Sparkline extends ResponsiveElement {
         super(...arguments);
         /**
          * Chart data as an array of number.
+         * @type {number[]}
          */
         this.data = [];
         /**
          * Chart previous data as an array of number.
+         * @type {number[]}
          */
         this.previousData = [];
         /**

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

@@ -96,12 +96,14 @@
         },
         {
           "name": "valueFormatter",
-          "description": "Custome value formatter",
+          "description": "Custom value formatter",
+          "type": "SwingGaugeValueFormatter",
           "default": "\"defaultValueFormatter\""
         },
         {
-          "name": "canvasSize",
-          "description": "Getter size of component"
+          "name": "canvasSize (readonly)",
+          "description": "Getter size of component",
+          "type": "SwingGaugeCanvasSize"
         }
       ]
     }

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

@@ -4,14 +4,14 @@ Data visualisation showing the percentage between two values
 
 ## Properties
 
-| Property          | Attribute          | Modifiers | Type     | Default                 | Description                        |
-|-------------------|--------------------|-----------|----------|-------------------------|------------------------------------|
-| `canvasSize`      |                    | readonly  |          |                         | Getter size of component           |
-| `duration`        | `duration`         |           | `number` | 1000                    | Animation duration in milliseconds |
-| `primaryLabel`    | `primary-label`    |           | `string` | ""                      | Primary label                      |
-| `primaryLegend`   | `primary-legend`   |           | `string` | ""                      | Primary value legend               |
-| `primaryValue`    | `primary-value`    |           | `number` |                         | Primary value                      |
-| `secondaryLabel`  | `secondary-label`  |           | `string` | ""                      | Secondary label                    |
-| `secondaryLegend` | `secondary-legend` |           | `string` | ""                      | Secondary value legend             |
-| `secondaryValue`  | `secondary-value`  |           | `number` |                         | Secondary value                    |
-| `valueFormatter`  |                    |           |          | "defaultValueFormatter" | Custome value formatter            |
+| Property                | Attribute          | Type                       | Default                 | Description                        |
+|-------------------------|--------------------|----------------------------|-------------------------|------------------------------------|
+| `canvasSize (readonly)` |                    | `SwingGaugeCanvasSize`     |                         | Getter size of component           |
+| `duration`              | `duration`         | `number`                   | 1000                    | Animation duration in milliseconds |
+| `primaryLabel`          | `primary-label`    | `string`                   | ""                      | Primary label                      |
+| `primaryLegend`         | `primary-legend`   | `string`                   | ""                      | Primary value legend               |
+| `primaryValue`          | `primary-value`    | `number`                   |                         | Primary value                      |
+| `secondaryLabel`        | `secondary-label`  | `string`                   | ""                      | Secondary label                    |
+| `secondaryLegend`       | `secondary-legend` | `string`                   | ""                      | Secondary value legend             |
+| `secondaryValue`        | `secondary-value`  | `number`                   |                         | Secondary value                    |
+| `valueFormatter`        |                    | `SwingGaugeValueFormatter` | "defaultValueFormatter" | Custom value formatter             |

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

@@ -55,7 +55,8 @@ export declare class SwingGauge extends ResponsiveElement {
     */
     secondaryLegend: string;
     /**
-     * Custome value formatter
+     * Custom value formatter
+     * @type {SwingGaugeValueFormatter}
      */
     valueFormatter: SwingGaugeValueFormatter;
     /**
@@ -149,6 +150,7 @@ export declare class SwingGauge extends ResponsiveElement {
     private canvas;
     /**
      * Getter size of component
+     * @type {SwingGaugeCanvasSize}
      * @returns return size of canvas
      */
     get canvasSize(): SwingGaugeCanvasSize;

package/lib/swing-gauge/index.js

@@ -61,7 +61,8 @@ let SwingGauge = class SwingGauge extends ResponsiveElement {
         */
         this.secondaryLegend = '';
         /**
-         * Custome value formatter
+         * Custom value formatter
+         * @type {SwingGaugeValueFormatter}
          */
         this.valueFormatter = this.defaultValueFormatter;
         /**
@@ -242,6 +243,7 @@ let SwingGauge = class SwingGauge extends ResponsiveElement {
     }
     /**
      * Getter size of component
+     * @type {SwingGaugeCanvasSize}
      * @returns return size of canvas
      */
     get canvasSize() {

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

@@ -3,7 +3,7 @@
   "tags": [
     {
       "name": "ef-text-field",
-      "description": "Form control element for text",
+      "description": "Form control element for text.",
       "attributes": [
         {
           "name": "pattern",
@@ -11,29 +11,10 @@
           "type": "string",
           "default": "\"\""
         },
-        {
-          "name": "placeholder",
-          "description": "Set place holder text",
-          "type": "string",
-          "default": "\"\""
-        },
-        {
-          "name": "error",
-          "description": "Set state to error",
-          "type": "boolean",
-          "default": "false"
-        },
-        {
-          "name": "warning",
-          "description": "Set state to warning",
-          "type": "boolean",
-          "default": "false"
-        },
         {
           "name": "icon",
           "description": "Specify icon to display in input. Value can be icon name",
-          "type": "string",
-          "default": "\"\""
+          "type": "string | null"
         },
         {
           "name": "icon-has-action",
@@ -41,12 +22,6 @@
           "type": "boolean",
           "default": "false"
         },
-        {
-          "name": "transparent",
-          "description": "Disables all other states and border/background styles.\nUse with advanced composite elements requiring e.g. multi selection in\ncombo-box when parent container handles element states.",
-          "type": "boolean",
-          "default": "false"
-        },
         {
           "name": "maxlength",
           "description": "Set character max limit",
@@ -58,59 +33,61 @@
           "type": "number | null"
         },
         {
-          "name": "value",
-          "description": "Input's value",
-          "type": "string",
-          "default": "0"
-        },
-        {
-          "name": "readonly",
-          "description": "Set readonly state",
+          "name": "disabled",
+          "description": "Set disabled state",
           "type": "boolean",
           "default": "false"
         },
         {
-          "name": "disabled",
-          "description": "Set disabled state",
+          "name": "error",
+          "description": "Set error state",
           "type": "boolean",
           "default": "false"
-        }
-      ],
-      "properties": [
-        {
-          "name": "pattern",
-          "attribute": "pattern",
-          "description": "Set regular expression for input validation",
-          "type": "string",
-          "default": "\"\""
         },
         {
           "name": "placeholder",
-          "attribute": "placeholder",
-          "description": "Set place holder text",
+          "description": "Set placeholder text",
           "type": "string",
           "default": "\"\""
         },
         {
-          "name": "error",
-          "attribute": "error",
-          "description": "Set state to error",
+          "name": "readonly",
+          "description": "Set readonly state",
+          "type": "boolean",
+          "default": "false"
+        },
+        {
+          "name": "transparent",
+          "description": "Disables all other states and border/background styles.",
           "type": "boolean",
           "default": "false"
         },
         {
           "name": "warning",
-          "attribute": "warning",
-          "description": "Set state to warning",
+          "description": "Set warning state",
           "type": "boolean",
           "default": "false"
         },
+        {
+          "name": "value",
+          "description": "Input's value",
+          "type": "string",
+          "default": "\"\""
+        }
+      ],
+      "properties": [
+        {
+          "name": "pattern",
+          "attribute": "pattern",
+          "description": "Set regular expression for input validation",
+          "type": "string",
+          "default": "\"\""
+        },
         {
           "name": "icon",
           "attribute": "icon",
           "description": "Specify icon to display in input. Value can be icon name",
-          "type": "string",
-          "default": "\"\""
+          "type": "string | null"
         },
         {
           "name": "iconHasAction",
@@ -119,13 +96,6 @@
           "type": "boolean",
           "default": "false"
         },
-        {
-          "name": "transparent",
-          "attribute": "transparent",
-          "description": "Disables all other states and border/background styles.\nUse with advanced composite elements requiring e.g. multi selection in\ncombo-box when parent container handles element states.",
-          "type": "boolean",
-          "default": "false"
-        },
         {
           "name": "maxLength",
           "attribute": "maxlength",
@@ -139,21 +109,25 @@
           "type": "number | null"
         },
         {
-          "name": "selectionStart",
-          "description": "Selection start index",
-          "type": "number | null"
+          "name": "disabled",
+          "attribute": "disabled",
+          "description": "Set disabled state",
+          "type": "boolean",
+          "default": "false"
         },
         {
-          "name": "selectionEnd",
-          "description": "Selection end index",
-          "type": "number | null"
+          "name": "error",
+          "attribute": "error",
+          "description": "Set error state",
+          "type": "boolean",
+          "default": "false"
         },
         {
-          "name": "value",
-          "attribute": "value",
-          "description": "Input's value",
+          "name": "placeholder",
+          "attribute": "placeholder",
+          "description": "Set placeholder text",
           "type": "string",
-          "default": "0"
+          "default": "\"\""
         },
         {
           "name": "readonly",
@@ -163,11 +137,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": "Input's value",
+          "type": "string",
+          "default": "\"\""
         }
       ],
       "events": [
@@ -181,26 +169,27 @@
         },
         {
           "name": "icon-click",
-          "description": "Dispatched only when element has icon-has-action attribute and icon is clicked"
+          "description": "Dispatched when icon is clicked"
         }
       ],
       "methods": [
         {
-          "name": "select",
-          "description": "Select the contents of input",
-          "params": []
+          "name": "onInputInput",
+          "description": "",
+          "params": [
+            {
+              "name": "event",
+              "type": "InputEvent"
+            }
+          ]
         },
         {
-          "name": "setSelectionRange",
-          "description": "Set the selection range",
+          "name": "onInputChange",
+          "description": "",
           "params": [
             {
-              "name": "startSelection",
-              "description": "Start of selection"
-            },
-            {
-              "name": "endSelection",
-              "description": "End of the selection"
+              "name": "event",
+              "type": "InputEvent"
             }
           ]
         }

package/lib/text-field/custom-elements.md

@@ -1,37 +1,35 @@
 # ef-text-field
 
-Form control element for text
+Form control element for text.
 
 ## Properties
 
-| Property         | Attribute         | Type             | Default | Description                                      |
-|------------------|-------------------|------------------|---------|--------------------------------------------------|
-| `disabled`       | `disabled`        | `boolean`        | false   | Set disabled state                               |
-| `error`          | `error`           | `boolean`        | false   | Set state to error                               |
-| `icon`           | `icon`            | `string`         | ""      | Specify icon to display in input. Value can be icon name |
-| `iconHasAction`  | `icon-has-action` | `boolean`        | false   | Specify when icon need to be clickable           |
-| `maxLength`      | `maxlength`       | `number \| null` | null    | Set character max limit                          |
-| `minLength`      | `minlength`       | `number \| null` | null    | Set character min limit                          |
-| `pattern`        | `pattern`         | `string`         | ""      | Set regular expression for input validation      |
-| `placeholder`    | `placeholder`     | `string`         | ""      | Set place holder text                            |
-| `readonly`       | `readonly`        | `boolean`        | false   | Set readonly state                               |
-| `selectionEnd`   |                   | `number \| null` |         | Selection end index                              |
-| `selectionStart` |                   | `number \| null` |         | Selection start index                            |
-| `transparent`    | `transparent`     | `boolean`        | false   | Disables all other states and border/background styles.<br />Use with advanced composite elements requiring e.g. multi selection in<br />combo-box when parent container handles element states. |
-| `value`          | `value`           | `string`         | 0       | Input's value                                    |
-| `warning`        | `warning`         | `boolean`        | false   | Set state to warning                             |
+| Property        | Attribute         | Type             | Default | Description                                      |
+|-----------------|-------------------|------------------|---------|--------------------------------------------------|
+| `disabled`      | `disabled`        | `boolean`        | false   | Set disabled state                               |
+| `error`         | `error`           | `boolean`        | false   | Set error state                                  |
+| `icon`          | `icon`            | `string \| null` | null    | Specify icon to display in input. Value can be icon name |
+| `iconHasAction` | `icon-has-action` | `boolean`        | false   | Specify when icon need to be clickable           |
+| `maxLength`     | `maxlength`       | `number \| null` | null    | Set character max limit                          |
+| `minLength`     | `minlength`       | `number \| null` | null    | Set character min limit                          |
+| `pattern`       | `pattern`         | `string`         | ""      | Set regular expression for input validation      |
+| `placeholder`   | `placeholder`     | `string`         | ""      | Set placeholder text                             |
+| `readonly`      | `readonly`        | `boolean`        | false   | Set readonly state                               |
+| `transparent`   | `transparent`     | `boolean`        | false   | Disables all other states and border/background styles. |
+| `value`         | `value`           | `string`         | ""      | Input's value                                    |
+| `warning`       | `warning`         | `boolean`        | false   | Set warning state                                |
 
 ## Methods
 
-| Method              | Type                                             | Description                                      |
-|---------------------|--------------------------------------------------|--------------------------------------------------|
-| `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 |
+| Method          | Type                 |
+|-----------------|----------------------|
+| `onInputChange` | `(event: any): void` |
+| `onInputInput`  | `(event: any): void` |
 
 ## Events
 
-| Event           | Description                                      |
-|-----------------|--------------------------------------------------|
-| `error-changed` | Dispatched when error state changes              |
-| `icon-click`    | Dispatched only when element has icon-has-action attribute and icon is clicked |
-| `value-changed` | Dispatched when value changes                    |
+| Event           | Description                         |
+|-----------------|-------------------------------------|
+| `error-changed` | Dispatched when error state changes |
+| `icon-click`    | Dispatched when icon is clicked     |
+| `value-changed` | Dispatched when value changes       |