@refinitiv-ui/elements 5.6.0 → 5.8.2-alpha.0

package/lib/slider/custom-elements.json

@@ -68,13 +68,13 @@
           "name": "readonly",
           "description": "Set readonly state",
           "type": "boolean",
-          "default": "\"false\""
+          "default": "false"
         },
         {
           "name": "disabled",
           "description": "Set disabled state",
           "type": "boolean",
-          "default": "\"false\""
+          "default": "false"
         }
       ],
       "properties": [
@@ -152,14 +152,14 @@
           "attribute": "readonly",
           "description": "Set readonly state",
           "type": "boolean",
-          "default": "\"false\""
+          "default": "false"
         },
         {
           "name": "disabled",
           "attribute": "disabled",
           "description": "Set disabled state",
           "type": "boolean",
-          "default": "\"false\""
+          "default": "false"
         }
       ],
       "events": [

package/lib/slider/custom-elements.md

@@ -0,0 +1,28 @@
+# ef-slider
+
+Allows users to make selections from a range of values
+
+## Properties
+
+| Property         | Attribute          | Type                       | Default | Description                                      |
+|------------------|--------------------|----------------------------|---------|--------------------------------------------------|
+| `disabled`       | `disabled`         | `boolean`                  | false   | Set disabled state                               |
+| `from`           | `from`             | `string`                   | "0"     | Uses with `range`. Low value of slider in range mode. |
+| `max`            | `max`              | `string`                   | "100"   | Slider maximum value of slider.                  |
+| `min`            | `min`              | `string`                   | "0"     | Set minimum value of slider.                     |
+| `minRange`       | `min-range`        | `string`                   | "0"     | Uses with `range`. Set minimum allowance value (distance) between `from` and `to`. |
+| `range`          | `range`            | `boolean`                  | false   | Set slider to range mode. Instead of a single value, slider will provide `from` and `to`. |
+| `readonly`       | `readonly`         | `boolean`                  | false   | Set readonly state                               |
+| `showInputField` | `show-input-field` | `"" \| "readonly" \| null` | null    | Show input number field.                         |
+| `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.   |
+
+## Events
+
+| Event           | Description                     |
+|-----------------|---------------------------------|
+| `from-changed`  | Fired when the `from` changes.  |
+| `to-changed`    | Fired when the `to` changes.    |
+| `value-changed` | Fired when the `value` changes. |

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

@@ -0,0 +1,16 @@
+# ef-sparkline
+
+## Properties
+
+| Property         | Attribute         | Type                  | Default | Description                                      |
+|------------------|-------------------|-----------------------|---------|--------------------------------------------------|
+| `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
+
+| Event          | Description                                      |
+|----------------|--------------------------------------------------|
+| `data-changed` | Fired when data is changed                       |
+| `data-error`   | Fired when data has error and chart cannot be updated |

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

@@ -0,0 +1,17 @@
+# ef-swing-gauge
+
+Data visualisation showing the percentage between two values
+
+## Properties
+
+| 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/tab/custom-elements.json

@@ -51,7 +51,7 @@
           "name": "disabled",
           "description": "Set disabled state",
           "type": "boolean",
-          "default": "\"false\""
+          "default": "false"
         }
       ],
       "properties": [
@@ -109,7 +109,7 @@
           "attribute": "disabled",
           "description": "Set disabled state",
           "type": "boolean",
-          "default": "\"false\""
+          "default": "false"
         }
       ],
       "events": [

package/lib/tab/custom-elements.md

@@ -0,0 +1,22 @@
+# ef-tab
+
+A building block for individual tab
+
+## Properties
+
+| Property        | Attribute         | Type      | Default | Description                                 |
+|-----------------|-------------------|-----------|---------|---------------------------------------------|
+| `active`        | `active`          | `boolean` | false   | Specify tab's active status                 |
+| `clears`        | `clears`          | `boolean` | false   | Set tab to clearable                        |
+| `clearsOnHover` | `clears-on-hover` | `boolean` | false   | Set tab to clearable on hover               |
+| `disabled`      | `disabled`        | `boolean` | false   | Set disabled state                          |
+| `icon`          | `icon`            | `string`  | ""      | Specify icon name to display in tab         |
+| `label`         | `label`           | `string`  | ""      | Specify tab's label text                    |
+| `lineClamp`     | `line-clamp`      | `number`  | 1       | Limit the number of lines before truncating |
+| `subLabel`      | `sub-label`       | `string`  | ""      | Specify tab's sub-label text                |
+
+## Events
+
+| Event   | Description                                  |
+|---------|----------------------------------------------|
+| `clear` | Dispatched when click on cross button occurs |

package/lib/tab-bar/custom-elements.md

@@ -0,0 +1,11 @@
+# ef-tab-bar
+
+Container for tabs
+
+## Properties
+
+| Property    | Attribute   | Type                            | Default | Description                                      |
+|-------------|-------------|---------------------------------|---------|--------------------------------------------------|
+| `alignment` | `alignment` | `"left" \| "center" \| "right"` | "left"  | Specify tab's horizontal alignment               |
+| `level`     | `level`     | `"1" \| "2" \| "3"`             | "1"     | Use level styling from theme                     |
+| `vertical`  | `vertical`  | `boolean`                       | false   | Use to switch from horizontal to vertical layout. |

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,8 +33,20 @@
           "type": "number | null"
         },
         {
-          "name": "value",
-          "description": "Input's value",
+          "name": "disabled",
+          "description": "Set disabled state",
+          "type": "boolean",
+          "default": "false"
+        },
+        {
+          "name": "error",
+          "description": "Set error state",
+          "type": "boolean",
+          "default": "false"
+        },
+        {
+          "name": "placeholder",
+          "description": "Set placeholder text",
           "type": "string",
           "default": "\"\""
         },
@@ -67,13 +54,25 @@
           "name": "readonly",
           "description": "Set readonly state",
           "type": "boolean",
-          "default": "\"false\""
+          "default": "false"
         },
         {
-          "name": "disabled",
-          "description": "Set disabled state",
+          "name": "transparent",
+          "description": "Disables all other states and border/background styles.",
+          "type": "boolean",
+          "default": "false"
+        },
+        {
+          "name": "warning",
+          "description": "Set warning state",
           "type": "boolean",
-          "default": "\"false\""
+          "default": "false"
+        },
+        {
+          "name": "value",
+          "description": "Input's value",
+          "type": "string",
+          "default": "\"\""
         }
       ],
       "properties": [
@@ -84,33 +83,11 @@
           "type": "string",
           "default": "\"\""
         },
-        {
-          "name": "placeholder",
-          "attribute": "placeholder",
-          "description": "Set place holder text",
-          "type": "string",
-          "default": "\"\""
-        },
-        {
-          "name": "error",
-          "attribute": "error",
-          "description": "Set state to error",
-          "type": "boolean",
-          "default": "false"
-        },
-        {
-          "name": "warning",
-          "attribute": "warning",
-          "description": "Set state to warning",
-          "type": "boolean",
-          "default": "false"
-        },
         {
           "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,19 +109,23 @@
           "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": "\"\""
         },
@@ -160,14 +134,28 @@
           "attribute": "readonly",
           "description": "Set readonly state",
           "type": "boolean",
-          "default": "\"false\""
+          "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\""
+          "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

@@ -0,0 +1,35 @@
+# ef-text-field
+
+Form control element for text.
+
+## Properties
+
+| 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                 |
+|-----------------|----------------------|
+| `onInputChange` | `(event: any): void` |
+| `onInputInput`  | `(event: any): void` |
+
+## Events
+
+| Event           | Description                         |
+|-----------------|-------------------------------------|
+| `error-changed` | Dispatched when error state changes |
+| `icon-click`    | Dispatched when icon is clicked     |
+| `value-changed` | Dispatched when value changes       |