@refinitiv-ui/elements 5.6.0 → 5.7.0

package/lib/radio-button/custom-elements.json

@@ -14,25 +14,25 @@
           "name": "value",
           "description": "Value of the radio button",
           "type": "string",
-          "default": "\"\""
+          "default": "0"
         },
         {
           "name": "name",
           "description": "Group multiple radio buttons by assigning the same name",
           "type": "string",
-          "default": "\"\""
+          "default": "0"
         },
         {
           "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": [
@@ -47,28 +47,28 @@
           "attribute": "value",
           "description": "Value of the radio button",
           "type": "string",
-          "default": "\"\""
+          "default": "0"
         },
         {
           "name": "name",
           "attribute": "name",
           "description": "Group multiple radio buttons by assigning the same name",
           "type": "string",
-          "default": "\"\""
+          "default": "0"
         },
         {
           "name": "readonly",
           "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/radio-button/custom-elements.md

@@ -0,0 +1,19 @@
+# ef-radio-button
+
+Basic radio button
+
+## Properties
+
+| Property   | Attribute  | Type      | Default | Description                                      |
+|------------|------------|-----------|---------|--------------------------------------------------|
+| `checked`  | `checked`  | `boolean` |         | Radio button checked state                       |
+| `disabled` | `disabled` | `boolean` | false   | Set disabled state                               |
+| `name`     | `name`     | `string`  | 0       | Group multiple radio buttons by assigning the same name |
+| `readonly` | `readonly` | `boolean` | false   | Set readonly state                               |
+| `value`    | `value`    | `string`  | 0       | Value of the radio button                        |
+
+## Events
+
+| Event             | Description                                |
+|-------------------|--------------------------------------------|
+| `checked-changed` | Fired when the `checked` property changes. |

package/lib/rating/custom-elements.md

@@ -0,0 +1,17 @@
+# ef-rating
+
+Star visualisation component that is generally used for ranking
+
+## Properties
+
+| Property      | Attribute     | Type      | Default | Description                                      |
+|---------------|---------------|-----------|---------|--------------------------------------------------|
+| `interactive` | `interactive` | `boolean` | false   | Make it possible to interact with rating control and change the value |
+| `max`         | `max`         | `string`  | "5"     | Set number of total stars                        |
+| `value`       | `value`       | `string`  | "0"     | Set number of selected stars. Value can be any number between 0 and `max`.<br />Decimal values are calculated to empty star (0 - .25); half-star (.25 - .75) and full star (.75 - 1) |
+
+## Events
+
+| Event           | Description                     |
+|-----------------|---------------------------------|
+| `value-changed` | Fired when the `value` changes. |

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

@@ -55,19 +55,19 @@
           "name": "value",
           "description": "Input's value",
           "type": "string",
-          "default": "\"\""
+          "default": "0"
         },
         {
           "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": [
@@ -130,21 +130,21 @@
           "attribute": "value",
           "description": "Input's value",
           "type": "string",
-          "default": "\"\""
+          "default": "0"
         },
         {
           "name": "readonly",
           "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/search-field/custom-elements.md

@@ -0,0 +1,33 @@
+# ef-search-field
+
+Form control to get a search input from users.
+
+## Properties
+
+| Property        | Attribute         | Type             | Default | Description                                      |
+|-----------------|-------------------|------------------|---------|--------------------------------------------------|
+| `disabled`      | `disabled`        | `boolean`        | false   | Set disabled state                               |
+| `error`         | `error`           | `boolean`        | false   | Set state to error                               |
+| `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                               |
+| `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                             |
+
+## Methods
+
+| Method   | Type       | Description                  |
+|----------|------------|------------------------------|
+| `select` | `(): void` | Select the contents of input |
+
+## 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                    |

package/lib/select/custom-elements.json

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

package/lib/select/custom-elements.md

@@ -0,0 +1,24 @@
+# ef-select
+
+Expands upon the native select element,
+providing a fully themeable dropdown element.
+
+## Properties
+
+| Property      | Attribute     | Modifiers | Type                 | Default | Description                                      |
+|---------------|---------------|-----------|----------------------|---------|--------------------------------------------------|
+| `data`        |               |           | `SelectData \| null` |         | Construct the menu from data object. Cannot be used with slotted content |
+| `disabled`    | `disabled`    |           | `boolean`            | false   | Set disabled state                               |
+| `error`       | `error`       |           | `boolean`            | false   | Set state to error                               |
+| `label`       |               | readonly  | `string`             |         | Current text content of the selected value       |
+| `opened`      | `opened`      |           | `boolean`            | false   | Toggles the opened state of the list             |
+| `placeholder` | `placeholder` |           | `string`             | ""      | Placeholder to display when no value is set      |
+| `value`       |               |           | `string`             |         | Value of the element                             |
+| `warning`     | `warning`     |           | `boolean`            | false   | Set state to warning                             |
+
+## Events
+
+| Event            | Description                             |
+|------------------|-----------------------------------------|
+| `opened-changed` | Fired when the opened property changes. |
+| `value-changed`  | Fired when the value property changes.  |

package/lib/sidebar-layout/custom-elements.md

@@ -0,0 +1,22 @@
+# ef-sidebar-layout
+
+Provides an app layout with sidebar.
+There are 4 sections that can be slotted a component in.
+
+## Properties
+
+| Property          | Attribute          | Type                | Default | Description                                      |
+|-------------------|--------------------|---------------------|---------|--------------------------------------------------|
+| `collapsed`       | `collapsed`        | `boolean`           | false   | Set to hide sidebar                              |
+| `sidebar`         |                    |                     |         | Property to get sidebar                          |
+| `sidebarPosition` | `sidebar-position` | `"left" \| "right"` | "left"  | Set sidebar position to left or right            |
+| `sidebarWidth`    | `sidebar-width`    | `string`            |         | Set the width of the sidebar. The value could be in both px or %, e.g. 300px, 30% |
+
+## Slots
+
+| Name              | Description              |
+|-------------------|--------------------------|
+| `main-content`    | Content of main section. |
+| `main-header`     | Main header.             |
+| `sidebar-content` | Content of sidebar.      |
+| `sidebar-header`  | Sidebar header.          |

package/lib/slider/custom-elements.json

@@ -62,19 +62,19 @@
           "name": "value",
           "description": "Value of slider. Not applicable in range mode.",
           "type": "string",
-          "default": "\"0\""
+          "default": "0"
         },
         {
           "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": [
@@ -145,21 +145,21 @@
           "attribute": "value",
           "description": "Value of slider. Not applicable in range mode.",
           "type": "string",
-          "default": "\"0\""
+          "default": "0"
         },
         {
           "name": "readonly",
           "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/sparkline/custom-elements.md

@@ -0,0 +1,16 @@
+# ef-sparkline
+
+## Properties
+
+| 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.       |
+| `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/swing-gauge/custom-elements.md

@@ -0,0 +1,17 @@
+# ef-swing-gauge
+
+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            |

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

@@ -61,19 +61,19 @@
           "name": "value",
           "description": "Input's value",
           "type": "string",
-          "default": "\"\""
+          "default": "0"
         },
         {
           "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": [
@@ -153,21 +153,21 @@
           "attribute": "value",
           "description": "Input's value",
           "type": "string",
-          "default": "\"\""
+          "default": "0"
         },
         {
           "name": "readonly",
           "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/text-field/custom-elements.md

@@ -0,0 +1,37 @@
+# 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 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                             |
+
+## 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 |
+
+## 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                    |

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

@@ -42,13 +42,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": [
@@ -96,14 +96,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/time-picker/custom-elements.md

@@ -0,0 +1,28 @@
+# ef-time-picker
+
+Control the time input
+
+## Properties
+
+| Property      | Attribute      | Type             | Default | Description                                      |
+|---------------|----------------|------------------|---------|--------------------------------------------------|
+| `amPm`        | `am-pm`        | `boolean`        | false   | Toggles 12hr time display                        |
+| `disabled`    | `disabled`     | `boolean`        | false   | Set disabled state                               |
+| `hours`       | `hours`        | `number \| null` |         | Hours time segment in 24hr format                |
+| `minutes`     | `minutes`      | `number \| null` |         | Minutes time segment                             |
+| `readonly`    | `readonly`     | `boolean`        | false   | Set readonly state                               |
+| `seconds`     | `seconds`      | `number \| null` |         | Seconds time segment                             |
+| `showSeconds` | `show-seconds` | `boolean`        | false   | Flag to show seconds time segment in display.<br />Seconds are automatically shown when `hh:mm:ss` time format is provided as a value. |
+| `value`       | `value`        | `string`         | ""      | Value of the element                             |
+
+## Methods
+
+| Method   | Type       | Description             |
+|----------|------------|-------------------------|
+| `toggle` | `(): void` | Toggles the AM/PM state |
+
+## Events
+
+| Event           | Description                   |
+|-----------------|-------------------------------|
+| `value-changed` | Dispatched when value changes |

package/lib/toggle/custom-elements.json

@@ -26,13 +26,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": [
@@ -61,14 +61,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/toggle/custom-elements.md

@@ -0,0 +1,19 @@
+# ef-toggle
+
+Form control that can toggle between 2 states
+
+## Properties
+
+| Property       | Attribute       | Type      | Default | Description             |
+|----------------|-----------------|-----------|---------|-------------------------|
+| `checked`      | `checked`       | `boolean` |         | Value of toggle         |
+| `checkedLabel` | `checked-label` | `string`  | ""      | Label of toggle checked |
+| `disabled`     | `disabled`      | `boolean` | false   | Set disabled state      |
+| `label`        | `label`         | `string`  | ""      | Label of toggle         |
+| `readonly`     | `readonly`      | `boolean` | false   | Set readonly state      |
+
+## Events
+
+| Event             | Description                                |
+|-------------------|--------------------------------------------|
+| `checked-changed` | Fired when the `checked` property changes. |