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

package/CHANGELOG.md

@@ -3,6 +3,57 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [5.8.2-alpha.0](https://github.com/Refinitiv/refinitiv-ui/compare/@refinitiv-ui/elements@5.8.1...@refinitiv-ui/elements@5.8.2-alpha.0) (2021-12-13)
+
+**Note:** Version bump only for package @refinitiv-ui/elements
+
+
+
+
+
+## [5.8.1](https://github.com/Refinitiv/refinitiv-ui/compare/@refinitiv-ui/elements@5.8.0...@refinitiv-ui/elements@5.8.1) (2021-12-07)
+
+**Note:** Version bump only for package @refinitiv-ui/elements
+
+
+
+
+
+# [5.8.0](https://github.com/Refinitiv/refinitiv-ui/compare/@refinitiv-ui/elements@5.7.0...@refinitiv-ui/elements@5.8.0) (2021-12-03)
+
+
+### Bug Fixes
+
+* change default role to more generic type for better extendibility ([#100](https://github.com/Refinitiv/refinitiv-ui/issues/100)) ([fe999dc](https://github.com/Refinitiv/refinitiv-ui/commit/fe999dc66b5f42581a37329ced697ae6ac2dc929))
+* **combo-box:** fix arrow icon not show in Solar when disabled ([55c1008](https://github.com/Refinitiv/refinitiv-ui/commit/55c1008b7b63f915a7575059c6539e63a757e389))
+* **combo-box:** import counter instead of pill ([6410c03](https://github.com/Refinitiv/refinitiv-ui/commit/6410c03dd12077f25347dddb249b6a6700186abc))
+
+
+### Features
+
+* **list:** improve screen reader ([0bc3a8c](https://github.com/Refinitiv/refinitiv-ui/commit/0bc3a8c9c4051200cd1a5c8ed655d1d3ebbd9021))
+* **select:** improve screen reader support ([#80](https://github.com/Refinitiv/refinitiv-ui/issues/80)) ([a43fbcd](https://github.com/Refinitiv/refinitiv-ui/commit/a43fbcd4b23b2f508ddc94b8007913f66da1ae89))
+
+
+
+
+
+# [5.7.0](https://github.com/Refinitiv/refinitiv-ui/compare/@refinitiv-ui/elements@5.6.0...@refinitiv-ui/elements@5.7.0) (2021-11-22)
+
+
+### Bug Fixes
+
+* **tree:** correctly update dependant checked states ([#82](https://github.com/Refinitiv/refinitiv-ui/issues/82)) ([fdb7018](https://github.com/Refinitiv/refinitiv-ui/commit/fdb7018f9446f933f428448ada60f4a8cacc1acf))
+
+
+### Features
+
+* **item:** improve screen reader support ([#74](https://github.com/Refinitiv/refinitiv-ui/issues/74)) ([b14b950](https://github.com/Refinitiv/refinitiv-ui/commit/b14b950897cb96cdc957e12d93b510cc4361c4f3))
+
+
+
+
+
 # [5.6.0](https://github.com/Refinitiv/refinitiv-ui/compare/@refinitiv-ui/elements@5.5.0...@refinitiv-ui/elements@5.6.0) (2021-11-08)
 
 

package/lib/accordion/custom-elements.md

@@ -0,0 +1,18 @@
+# ef-accordion
+
+Used to display a group of `Collapse` control.
+Only one item will be able to expand by default but you can customize its behavior.
+
+## Properties
+
+| Property               | Attribute                | Type      | Default | Description                                      |
+|------------------------|--------------------------|-----------|---------|--------------------------------------------------|
+| `autoCollapseDisabled` | `auto-collapse-disabled` | `boolean` | false   | Allow multiple sections expand at the same time  |
+| `spacing`              | `spacing`                | `boolean` | false   | Add spacing to content section in all collapse items |
+
+## Slots
+
+| Name           | Description                                      |
+|----------------|--------------------------------------------------|
+| `header-left`  | Slot to add custom contents to the left side of header e.g. ef-icon, ef-checkbox |
+| `header-right` | Slot to add custom contents to the right side of header e.g. ef-icon, ef-checkbox |

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

@@ -0,0 +1,22 @@
+# ef-appstate-bar
+
+Used to display at the top of application to provide a status or information.
+
+## Properties
+
+| Property  | Attribute | Type                            | Default | Description                                      |
+|-----------|-----------|---------------------------------|---------|--------------------------------------------------|
+| `heading` | `heading` | `string`                        | ""      | Text to display in heading section.              |
+| `state`   | `state`   | `"info" \| "highlight" \| null` | null    | (optional) Type of state bar. Supported value are `info`, `highlight`. |
+
+## Events
+
+| Event   | Description                        |
+|---------|------------------------------------|
+| `clear` | fired when clear button is clicked |
+
+## Slots
+
+| Name    | Description                               |
+|---------|-------------------------------------------|
+| `right` | place custom content on the right of bar. |

package/lib/autosuggest/custom-elements.json

@@ -26,7 +26,7 @@
           "name": "more-search-text",
           "description": "Custom text for More Search",
           "type": "string",
-          "default": "\"defaultMoreSearchText\""
+          "default": "\"More results for {0}\""
         },
         {
           "name": "loading",
@@ -50,10 +50,20 @@
           "name": "opened",
           "description": "Auto suggest popup's open state",
           "type": "boolean",
-          "default": "\"false\""
+          "default": "false"
         }
       ],
       "properties": [
+        {
+          "name": "defaultDebounceRate (readonly)",
+          "type": "100",
+          "default": "100"
+        },
+        {
+          "name": "defaultMoreSearchText (readonly)",
+          "type": "\"More results for {0}\"",
+          "default": "\"More results for {0}\""
+        },
         {
           "name": "attach",
           "attribute": "attach",
@@ -79,7 +89,7 @@
           "attribute": "more-search-text",
           "description": "Custom text for More Search",
           "type": "string",
-          "default": "\"defaultMoreSearchText\""
+          "default": "\"More results for {0}\""
         },
         {
           "name": "loading",
@@ -130,7 +140,7 @@
           "attribute": "opened",
           "description": "Auto suggest popup's open state",
           "type": "boolean",
-          "default": "\"false\""
+          "default": "false"
         }
       ],
       "events": [
@@ -167,6 +177,16 @@
           "description": "Fired when suggestions changed"
         }
       ],
+      "slots": [
+        {
+          "name": "header",
+          "description": "Slot to add custom contents at the top of autosuggest popup"
+        },
+        {
+          "name": "footer",
+          "description": "Slot to add custom contents at the bottom of autosuggest popup"
+        }
+      ],
       "methods": [
         {
           "name": "onInputValueChange",

package/lib/autosuggest/custom-elements.md

@@ -0,0 +1,54 @@
+# ef-autosuggest
+
+Shows suggestions based on users' query.
+It can be used by attaching to text form control
+such as TextField, Multi Input, etc.
+Autosuggest supports various use cases such as
+custom rendering, pagination, asynchronous data request, etc.
+
+## Properties
+
+| Property         | Attribute          | Type                                         | Default                | Description                                      |
+|------------------|--------------------|----------------------------------------------|------------------------|--------------------------------------------------|
+| `attach`         | `attach`           | `AutosuggestTargetElement \| string \| null` | null                   | An HTML Element or CSS selector                  |
+| `debounceRate`   | `debounce-rate`    | `number`                                     | "100"                  | Debounce rate in ms of the filter as a number.<br />Used to throttle the filter rate so as not to trigger unneeded filtering |
+| `highlightable`  |                    | `AutosuggestHighlightable`                   | "itemHighlightable"    | A function that is applied to every suggestion during the render process<br />to say whether the item can be highlighted and selected. Only items that return true are considered.<br />By default the function checks for `item` `highlightable` property. |
+| `htmlRenderer`   | `html-renderer`    | `boolean`                                    | false                  | If set to true, the render function is not called. Instead the wrapper element<br />should populate and destroy suggestion elements. Rendering items manually<br />may have performance benefits in frameworks that use virtual DOM (such as `Vue`, `React`, `hyperHTML` and others) |
+| `loading`        | `loading`          | `boolean`                                    | false                  | If set to true show loading mask                 |
+| `moreResults`    | `more-results`     | `boolean`                                    | false                  | If set to true display 'Has more results' item   |
+| `moreSearchText` | `more-search-text` | `string`                                     | "More results for {0}" | Custom text for More Search                      |
+| `opened`         | `opened`           | `boolean`                                    | false                  | Auto suggest popup's open state                  |
+| `query`          |                    | `AutosuggestQuery \| null`                   | null                   | An object that represents a query from attach target |
+| `renderer`       |                    | `AutosuggestRenderer`                        | "itemRenderer"         | A renderer applied to suggestion.<br />By default a render maps data to item attributes |
+| `requestOnFocus` | `request-on-focus` | `boolean`                                    | false                  | Request suggestions when attach target is focused |
+| `suggestions`    |                    | `AutosuggestItem[]`                          | []                     | A list of suggestion items                       |
+
+## Methods
+
+| Method               | Type                 | Description                                      |
+|----------------------|----------------------|--------------------------------------------------|
+| `onInputBlur`        | `(event: any): void` | Run when input has lost focus<br /><br />**event**: by default `blur` event is listened |
+| `onInputFocus`       | `(event: any): void` | Run when input received focus<br /><br />**event**: by default `focus` event is listened |
+| `onInputKeyDown`     | `(event: any): void` | Run when input key down event has happened<br /><br />**event**: by default `keydown` event is listened |
+| `onInputValueChange` | `(event: any): void` | Run when attach target value changes.<br /><br />**event**: by default `value-changed` event is listened |
+| `refit`              | `(): void`           | Set the width                                    |
+
+## Events
+
+| Event                         | Description                                      |
+|-------------------------------|--------------------------------------------------|
+| `add-attach-target-events`    | Fired when attach has been set                   |
+| `item-highlight`              | Fired when an item gets highlighted or highlight is removed |
+| `item-select`                 | Fired when an item gets selected                 |
+| `remove-attach-target-events` | Fired when attach has been removed               |
+| `suggestions-changed`         | Fired when suggestions changed                   |
+| `suggestions-clear-requested` | Fired when auto suggest requests to clear the data. If used in reactive application, prevent default and set suggestions to [] |
+| `suggestions-fetch-requested` | Fired when auto suggest requests the data        |
+| `suggestions-query`           | Fired when input value has changed and the query must be set |
+
+## Slots
+
+| Name     | Description                                      |
+|----------|--------------------------------------------------|
+| `footer` | Slot to add custom contents at the bottom of autosuggest popup |
+| `header` | Slot to add custom contents at the top of autosuggest popup |

package/lib/autosuggest/index.d.ts

@@ -24,6 +24,9 @@ export { queryWordSelect, itemRenderer, escapeRegExp, itemHighlightable, updateE
  *
  * @attr {boolean} opened - Set to open auto suggest popup
  * @prop {boolean} [opened=false] -  Auto suggest popup's open state
+ *
+ * @slot header - Slot to add custom contents at the top of autosuggest popup
+ * @slot footer - Slot to add custom contents at the bottom of autosuggest popup
  */
 export declare class Autosuggest extends Overlay {
     /**
@@ -83,6 +86,7 @@ export declare class Autosuggest extends Overlay {
     moreResults: boolean;
     /**
      * Custom text for More Search
+     * @default More results for {0}
      */
     moreSearchText: string;
     /**

package/lib/autosuggest/index.js

@@ -31,6 +31,9 @@ export { queryWordSelect, itemRenderer, escapeRegExp, itemHighlightable, updateE
  *
  * @attr {boolean} opened - Set to open auto suggest popup
  * @prop {boolean} [opened=false] -  Auto suggest popup's open state
+ *
+ * @slot header - Slot to add custom contents at the top of autosuggest popup
+ * @slot footer - Slot to add custom contents at the bottom of autosuggest popup
  */
 let Autosuggest = Autosuggest_1 = class Autosuggest extends Overlay {
     /**
@@ -53,6 +56,7 @@ let Autosuggest = Autosuggest_1 = class Autosuggest extends Overlay {
         this.moreResults = false;
         /**
          * Custom text for More Search
+         * @default More results for {0}
          */
         this.moreSearchText = Autosuggest_1.defaultMoreSearchText;
         /**

package/lib/button/custom-elements.json

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

package/lib/button/custom-elements.md

@@ -0,0 +1,23 @@
+# ef-button
+
+Use button for actions in forms, dialogs,
+and more with support for different states and styles.
+
+## Properties
+
+| Property      | Attribute     | Type                  | Default | Description                                      |
+|---------------|---------------|-----------------------|---------|--------------------------------------------------|
+| `active`      | `active`      | `boolean`             | false   | An active or inactive state, can only be used with toggles property/attribute |
+| `cta`         | `cta`         | `boolean`             | false   | Set state to call-to-action                      |
+| `disabled`    | `disabled`    | `boolean`             | false   | Set state to disabled                            |
+| `hoverIcon`   | `hover-icon`  | `string \| null`      | null    | Specify icon to display when hovering. Value can be icon name |
+| `icon`        | `icon`        | `string \| null`      | null    | Specify icon to display in button. Value can be icon name |
+| `textpos`     | `textpos`     | `"before" \| "after"` | "after" | Customises text alignment when specified alongside `icon` property<br />Value can be `before` or `after` |
+| `toggles`     | `toggles`     | `boolean`             | false   | Enable or disable ability to be toggled          |
+| `transparent` | `transparent` | `boolean`             | false   | Removes background when specified alongside `icon` property |
+
+## Events
+
+| Event            | Description                                      |
+|------------------|--------------------------------------------------|
+| `active-changed` | Dispatched on changing `active` property state by taping on button when property `toggles` is true. |

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

@@ -0,0 +1,9 @@
+# ef-button-bar
+
+Used to display multiple buttons to create a list of commands bar.
+
+## Properties
+
+| Property  | Attribute | Type      | Default | Description                                      |
+|-----------|-----------|-----------|---------|--------------------------------------------------|
+| `managed` | `managed` | `boolean` | false   | Manages user interaction, only allowing one toggle button to be active at any one time. |

package/lib/calendar/custom-elements.json

@@ -61,7 +61,8 @@
         {
           "name": "values",
           "description": "Set multiple selected values",
-          "type": "string[]"
+          "type": "string[]",
+          "default": "[]"
         },
         {
           "name": "fill-cells",
@@ -73,13 +74,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": [
@@ -154,7 +155,8 @@
           "name": "values",
           "attribute": "values",
           "description": "Set multiple selected values",
-          "type": "string[]"
+          "type": "string[]",
+          "default": "[]"
         },
         {
           "name": "fillCells",
@@ -168,14 +170,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/calendar/custom-elements.md

@@ -0,0 +1,35 @@
+# ef-calendar
+
+Standard calendar element
+
+## Properties
+
+| Property         | Attribute           | Type                     | Default | Description                                      |
+|------------------|---------------------|--------------------------|---------|--------------------------------------------------|
+| `disabled`       | `disabled`          | `boolean`                | false   | Set disabled state                               |
+| `fillCells`      | `fill-cells`        | `boolean`                | false   | Fill head and tail cell dates                    |
+| `filter`         |                     | `CalendarFilter \| null` | null    | Custom filter, used for enabling/disabling certain dates |
+| `firstDayOfWeek` | `first-day-of-week` | `number \| null`         | null    | Set the first day of the week.<br />0 - for Sunday, 6 - for Saturday |
+| `max`            | `max`               | `string`                 | ""      | Set maximum date                                 |
+| `min`            | `min`               | `string`                 | ""      | Set minimum date                                 |
+| `multiple`       | `multiple`          | `boolean`                | false   | Set to switch to multiple select mode            |
+| `range`          | `range`             | `boolean`                | false   | Set to switch to range select mode               |
+| `readonly`       | `readonly`          | `boolean`                | false   | Set readonly state                               |
+| `value`          | `value`             | `string`                 | ""      | Current date time value                          |
+| `values`         | `values`            | `string[]`               | []      | Set multiple selected values                     |
+| `view`           | `view`              | `string`                 | ""      | Current calendar view date                       |
+| `weekdaysOnly`   | `weekdays-only`     | `boolean`                | false   | Only enable weekdays                             |
+| `weekendsOnly`   | `weekends-only`     | `boolean`                | false   | Only enable weekends                             |
+
+## Events
+
+| Event           | Description                     |
+|-----------------|---------------------------------|
+| `value-changed` | Fired when the `value` changes. |
+| `view-changed`  | Fired when the `view` changes.  |
+
+## Slots
+
+| Name     | Description                                      |
+|----------|--------------------------------------------------|
+| `footer` | Adds slotted content into the footer of the calendar control |

package/lib/calendar/index.d.ts

@@ -78,6 +78,7 @@ export declare class Calendar extends ControlElement implements MultiValue {
      * 0 - for Sunday, 6 - for Saturday
      * @param firstDayOfWeek The first day of the week
      * @type {number | null}
+     * @default null
      */
     set firstDayOfWeek(firstDayOfWeek: number);
     get firstDayOfWeek(): number;
@@ -101,6 +102,7 @@ export declare class Calendar extends ControlElement implements MultiValue {
      * Set multiple selected values
      * @param values Values to set
      * @type {string[]}
+     * @default []
      */
     set values(values: string[]);
     get values(): string[];

package/lib/calendar/index.js

@@ -199,6 +199,7 @@ let Calendar = class Calendar extends ControlElement {
      * 0 - for Sunday, 6 - for Saturday
      * @param firstDayOfWeek The first day of the week
      * @type {number | null}
+     * @default null
      */
     set firstDayOfWeek(firstDayOfWeek) {
         firstDayOfWeek %= 7;
@@ -226,6 +227,7 @@ let Calendar = class Calendar extends ControlElement {
      * Set multiple selected values
      * @param values Values to set
      * @type {string[]}
+     * @default []
      */
     set values(values) {
         const oldValues = this._values;

package/lib/canvas/custom-elements.json

@@ -8,7 +8,8 @@
         {
           "name": "autoloop",
           "description": "Starts an automatic animation loop.\nEnabling the frame event.",
-          "type": "boolean"
+          "type": "boolean",
+          "default": "false"
         }
       ],
       "properties": [
@@ -16,20 +17,21 @@
           "name": "autoloop",
           "attribute": "autoloop",
           "description": "Starts an automatic animation loop.\nEnabling the frame event.",
-          "type": "boolean"
+          "type": "boolean",
+          "default": "false"
         },
         {
-          "name": "canvas",
+          "name": "canvas (readonly)",
           "description": "Html canvas element",
           "type": "HTMLCanvasElement"
         },
         {
-          "name": "ctx",
+          "name": "ctx (readonly)",
           "description": "Alias of context",
           "type": "CanvasRenderingContext2D | null"
         },
         {
-          "name": "context",
+          "name": "context (readonly)",
           "description": "The 2 dimensional context of the canvas, used for drawing",
           "type": "CanvasRenderingContext2D | null"
         },

package/lib/canvas/custom-elements.md

@@ -0,0 +1,27 @@
+# ef-canvas
+
+A Component uses to draw graphics on a web page,
+it works similarly to the normal HTML5 Canvas element.
+
+## Properties
+
+| Property             | Attribute  | Type                               | Default | Description                                      |
+|----------------------|------------|------------------------------------|---------|--------------------------------------------------|
+| `autoloop`           | `autoloop` | `boolean`                          | false   | Starts an automatic animation loop.<br />Enabling the frame event. |
+| `canvas (readonly)`  |            | `HTMLCanvasElement`                |         | Html canvas element                              |
+| `context (readonly)` |            | `CanvasRenderingContext2D \| null` |         | The 2 dimensional context of the canvas, used for drawing |
+| `ctx (readonly)`     |            | `CanvasRenderingContext2D \| null` |         | Alias of context                                 |
+| `height`             |            | `number`                           | 0       | Height of canvas                                 |
+| `width`              |            | `number`                           | 0       | Width of canvas                                  |
+
+## Methods
+
+| Method       | Type                     | Description                                      |
+|--------------|--------------------------|--------------------------------------------------|
+| `getContext` | `(mode: string): string` | Return context of canvas,<br />support only 2D mode<br /><br />**mode**: mode of canvas's context |
+
+## Events
+
+| Event   | Description                                      |
+|---------|--------------------------------------------------|
+| `frame` | dispatched when next Frame event occurs when autoloop is set to true |

package/lib/canvas/index.d.ts

@@ -26,6 +26,7 @@ export declare class Canvas extends ResponsiveElement {
     /**
      * Starts an automatic animation loop.
      * Enabling the frame event.
+     * @default false
      */
     get autoloop(): boolean;
     set autoloop(val: boolean);

package/lib/canvas/index.js

@@ -48,6 +48,7 @@ let Canvas = class Canvas extends ResponsiveElement {
     /**
      * Starts an automatic animation loop.
      * Enabling the frame event.
+     * @default false
      */
     get autoloop() {
         return this._autoloop;

package/lib/card/custom-elements.json

@@ -35,7 +35,9 @@
         },
         {
           "name": "config",
-          "description": "Set card configurations"
+          "description": "Set card configurations",
+          "type": "CardConfig",
+          "default": "{}"
         }
       ],
       "events": [

package/lib/card/custom-elements.md

@@ -0,0 +1,24 @@
+# ef-card
+
+A card frame component.
+
+## Properties
+
+| Property | Attribute | Type         | Default | Description             |
+|----------|-----------|--------------|---------|-------------------------|
+| `config` |           | `CardConfig` | {}      | Set card configurations |
+| `footer` | `footer`  | `string`     | ""      | Set text on the footer  |
+| `header` | `header`  | `string`     | ""      | Set text on the header  |
+
+## Events
+
+| Event          | Description                       |
+|----------------|-----------------------------------|
+| `item-trigger` | Fired when card menu is selected. |
+
+## Slots
+
+| Name     | Description                                      |
+|----------|--------------------------------------------------|
+| `footer` | Adds slotted content into the footer of the card. |
+| `header` | Adds slotted content into the header of the card. |

package/lib/card/index.d.ts

@@ -37,6 +37,8 @@ export declare class Card extends BasicElement {
     footer: string;
     /**
      * Set card configurations
+     * @type {CardConfig}
+     * @default {}
      */
     get config(): CardConfig;
     set config(config: CardConfig);

package/lib/card/index.js

@@ -71,6 +71,8 @@ let Card = class Card extends BasicElement {
     }
     /**
      * Set card configurations
+     * @type {CardConfig}
+     * @default {}
      */
     get config() {
         return this._config;

package/lib/chart/custom-elements.json

@@ -19,7 +19,7 @@
           "type": "ChartConfig"
         },
         {
-          "name": "colors",
+          "name": "colors (readonly)",
           "description": "List of available chart colors",
           "type": "string[]"
         }

package/lib/chart/custom-elements.md

@@ -0,0 +1,16 @@
+# ef-chart
+
+Charting component that use ChartJS library
+
+## Properties
+
+| Property            | Attribute | Type          | Default | Description                                      |
+|---------------------|-----------|---------------|---------|--------------------------------------------------|
+| `colors (readonly)` |           | `string[]`    |         | List of available chart colors                   |
+| `config`            | `config`  | `ChartConfig` | null    | Chart configurations. Same configuration as ChartJS |
+
+## Methods
+
+| Method        | Type                                 | Description                                      |
+|---------------|--------------------------------------|--------------------------------------------------|
+| `updateChart` | `(config?: ChartUpdateProps=): void` | Update all data, title, scales, legends and re-render the chart based on its config<br /><br />**config**: Additional configuration for control an animation in the update process. |