@refinitiv-ui/elements 5.6.0 → 5.7.0

package/lib/tooltip/custom-elements.md

@@ -0,0 +1,14 @@
+# ef-tooltip
+
+Tooltip displays extra information when the
+user hovers the pointer over an item.
+
+## Properties
+
+| Property          | Attribute          | Type                                             | Default | Description                                      |
+|-------------------|--------------------|--------------------------------------------------|---------|--------------------------------------------------|
+| `condition`       |                    | `TooltipCondition`                               |         | Provide a function to test against the target.<br />Return `true` if the target matches |
+| `position`        | `position`         | `"auto" \| "above" \| "right" \| "below" \| "left"` | "auto"  | The position of the tooltip. Use the following values:<br />`auto` (default) - display based on mouse enter coordinates<br />`above` - display above the element<br />`right` - display to the right of the element<br />`below` - display beneath the element<br />`left` - display to the left of the element |
+| `renderer`        |                    | `TooltipRenderer`                                |         | A renderer to define tooltip internal content.<br />Return undefined, `String`, `HTMLElement` or `DocumentFragment`.<br />If the content is not present, tooltip will not be displayed |
+| `selector`        | `selector`         | `string`                                         | ""      | CSS selector to match the tooltip                |
+| `transitionStyle` | `transition-style` | `TooltipTransitionStyle`                         | "fade"  | Set the transition style.<br />Value can be `fade`, `zoom`, `slide-down`, `slide-up`, `slide-right`,<br />`slide-left`, `slide-right-down`, `slide-right-up`, `slide-left-down`, `slide-left-up`, or null in case of no transition |

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

@@ -0,0 +1,18 @@
+# ef-tornado-chart
+
+A data visualization that helps to
+show the differences or similarities between values
+
+## Properties
+
+| Property    | Attribute   | Type             | Default | Description                     |
+|-------------|-------------|------------------|---------|---------------------------------|
+| `primary`   | `primary`   | `string \| null` | null    | Primary bar chart legend text   |
+| `secondary` | `secondary` | `string \| null` | null    | Secondary bar chart legend text |
+
+## Slots
+
+| Name     | Description                                      |
+|----------|--------------------------------------------------|
+| `footer` | Any HTML contents to display at chart footer section |
+| `header` | Any HTML contents to display at chart header section |

package/lib/tree/custom-elements.json

@@ -27,7 +27,7 @@
           "name": "stateless",
           "description": "Disable selections",
           "type": "boolean",
-          "default": "\"false\""
+          "default": "false"
         }
       ],
       "properties": [
@@ -73,7 +73,7 @@
           "attribute": "stateless",
           "description": "Disable selections",
           "type": "boolean",
-          "default": "\"false\""
+          "default": "false"
         }
       ],
       "events": [

package/lib/tree/custom-elements.md

@@ -0,0 +1,32 @@
+# ef-tree
+
+Displays a tree structure
+to be used for menus and group selections
+
+## Properties
+
+| Property     | Attribute     | Type           | Default                  | Description                                      |
+|--------------|---------------|----------------|--------------------------|--------------------------------------------------|
+| `data`       |               | `TreeData<T>`  |                          | Data object to be used for creating tree         |
+| `multiple`   | `multiple`    | `boolean`      | false                    | Allows multiple items to be selected             |
+| `noRelation` | `no-relation` | `boolean`      | false                    | Breaks the relationship when multiple<br />selection mode is enabled |
+| `query`      | `query`       | `string`       | ""                       | Query string applied to tree                     |
+| `renderer`   |               | `TreeRenderer` | "new TreeRenderer(this)" | Renderer used for generating tree items          |
+| `stateless`  | `stateless`   | `boolean`      | false                    | Disable selections                               |
+| `values`     |               | `string[]`     |                          | Selected items in tree                           |
+
+## Methods
+
+| Method        | Type       | Description                 |
+|---------------|------------|-----------------------------|
+| `checkAll`    | `(): void` | Checks all editable items   |
+| `collapseAll` | `(): void` | Collapses all groups        |
+| `expandAll`   | `(): void` | Expands all groups          |
+| `uncheckAll`  | `(): void` | Unchecks all editable items |
+
+## Events
+
+| Event              | Description                                      |
+|--------------------|--------------------------------------------------|
+| `expanded-changed` | Fired when an item's expanded state has changed. |
+| `value-changed`    | Fired when the users changed selection item.     |

package/lib/tree/managers/tree-manager.d.ts

@@ -78,6 +78,24 @@ export declare class TreeManager<T extends TreeDataItem> {
      * @returns `True` if the item is checked
      */
     private isItemChecked;
+    /**
+     * Is the item checked indeterminately?
+     * @param item Original data item
+     * @returns `True` if the item has managed relationships and contains checked descendants
+     */
+    private isItemCheckedIndeterminate;
+    /**
+     * Determines whether the item is unchecked and can be changed to a checked state.
+     * @param item Original data item
+     * @returns True if the item can be changed to 'checked'.
+     */
+    private canCheckItem;
+    /**
+     * Determines whether the item is checked and can be changed to an unchecked state.
+     * @param item Original data item
+     * @returns True if the item can be changed to 'unchecked'.
+     */
+    private canUncheckItem;
     /**
      * Makes an item visible
      * @param item Original data item
@@ -92,10 +110,10 @@ export declare class TreeManager<T extends TreeDataItem> {
     private hideItem;
     /**
      * Forces a modification event, so that the renderer can update.
-     * @param item Item of which to find ancestors
+     * @param item Item of which to find path
      * @returns {void}
      */
-    private forceUpdateOnAncestors;
+    private forceUpdateOnPath;
     /**
      * Sets the mode (algorithm) the manager should use
      * @param mode Tree manager mode

package/lib/tree/managers/tree-manager.js

@@ -48,7 +48,10 @@ export class TreeManager {
      */
     get checkedItems() {
         return this.composer.queryItems((item) => {
-            return this.isItemChecked(item) && (!this.manageRelationships || !this.getItemChildren(item).length);
+            if (this.manageRelationships && this.isItemParent(item)) {
+                return false;
+            }
+            return this.isItemChecked(item);
         }, Infinity);
     }
     /**
@@ -112,8 +115,44 @@ export class TreeManager {
      * @returns `True` if the item is checked
      */
     isItemChecked(item) {
+        if (this.manageRelationships && this.isItemParent(item)) {
+            return !this.getItemChildren(item).some(child => !this.isItemChecked(child));
+        }
         return this.composer.getItemPropertyValue(item, 'selected') === true;
     }
+    /**
+     * Is the item checked indeterminately?
+     * @param item Original data item
+     * @returns `True` if the item has managed relationships and contains checked descendants
+     */
+    isItemCheckedIndeterminate(item) {
+        if (this.manageRelationships && this.isItemParent(item)) {
+            return this.getItemDescendants(item).some(desc => this.isItemChecked(desc));
+        }
+        return false;
+    }
+    /**
+     * Determines whether the item is unchecked and can be changed to a checked state.
+     * @param item Original data item
+     * @returns True if the item can be changed to 'checked'.
+     */
+    canCheckItem(item) {
+        if (this.manageRelationships && this.isItemParent(item)) {
+            return this.getItemChildren(item).some(child => this.canCheckItem(child));
+        }
+        return this.isItemCheckable(item) && this.composer.getItemPropertyValue(item, 'selected') !== true;
+    }
+    /**
+     * Determines whether the item is checked and can be changed to an unchecked state.
+     * @param item Original data item
+     * @returns True if the item can be changed to 'unchecked'.
+     */
+    canUncheckItem(item) {
+        if (this.manageRelationships && this.isItemParent(item)) {
+            return this.getItemChildren(item).some(child => this.canUncheckItem(child));
+        }
+        return this.isItemCheckable(item) && this.composer.getItemPropertyValue(item, 'selected') === true;
+    }
     /**
      * Makes an item visible
      * @param item Original data item
@@ -133,15 +172,12 @@ export class TreeManager {
     }
     /**
      * Forces a modification event, so that the renderer can update.
-     * @param item Item of which to find ancestors
+     * @param item Item of which to find path
      * @returns {void}
      */
-    forceUpdateOnAncestors(item) {
-        this.composer.getItemAncestors(item).forEach(ancestor => {
-            const allSelected = !this.getItemChildren(ancestor).some(child => this.isItemCheckable(child) && !this.isItemChecked(child));
-            this.composer.setItemPropertyValue(ancestor, 'selected', allSelected);
-            this.updateItem(ancestor);
-        });
+    forceUpdateOnPath(item) {
+        const path = [...this.getItemAncestors(item), item];
+        path.forEach(item => this.composer.updateItemTimestamp(item));
     }
     /**
      * Sets the mode (algorithm) the manager should use
@@ -221,16 +257,13 @@ export class TreeManager {
      * @returns Checked state of the item
      */
     getItemCheckedState(item) {
-        const descendants = this.getItemDescendants(item).filter(descendant => !this.composer.isItemLocked(descendant));
-        const isParent = descendants.length > 0;
-        if (isParent && this.manageRelationships) {
-            const checkedCount = descendants.reduce((count, item) => {
-                return count + (this.isItemChecked(item) === true ? 1 : 0);
-            }, 0);
-            return !checkedCount ? CheckedState.UNCHECKED
-                : checkedCount === descendants.length ? CheckedState.CHECKED : CheckedState.INDETERMINATE;
+        if (this.isItemChecked(item)) {
+            return CheckedState.CHECKED;
         }
-        return this.isItemChecked(item) === true ? CheckedState.CHECKED : CheckedState.UNCHECKED;
+        if (this.isItemCheckedIndeterminate(item)) {
+            return CheckedState.INDETERMINATE;
+        }
+        return CheckedState.UNCHECKED;
     }
     /**
      * Gets an item's ancestors
@@ -308,17 +341,14 @@ export class TreeManager {
         return this._checkItem(item);
     }
     _checkItem(item, manageRelationships = this.manageRelationships) {
-        if (this.isItemCheckable(item) && !this.isItemChecked(item)) {
+        if (this.canCheckItem(item)) {
             this.composer.setItemPropertyValue(item, 'selected', true);
             if (manageRelationships) {
-                this.forceUpdateOnAncestors(item);
+                this.forceUpdateOnPath(item);
                 this.getItemDescendants(item).forEach(descendant => this._checkItem(descendant, false));
             }
             return true;
         }
-        if (this.isItemParent(item)) {
-            this.updateItem(item); // update parent checked state
-        }
         return false;
     }
     /**
@@ -330,17 +360,14 @@ export class TreeManager {
         return this._uncheckItem(item);
     }
     _uncheckItem(item, manageRelationships = this.manageRelationships) {
-        if (this.isItemCheckable(item) && this.isItemChecked(item)) {
+        if (this.canUncheckItem(item)) {
             this.composer.setItemPropertyValue(item, 'selected', false);
             if (manageRelationships) {
-                this.forceUpdateOnAncestors(item);
+                this.forceUpdateOnPath(item);
                 this.getItemDescendants(item).forEach(descendant => this._uncheckItem(descendant, false));
             }
             return true;
         }
-        if (this.isItemParent(item)) {
-            this.updateItem(item); // update parent checked state
-        }
         return false;
     }
     /**
@@ -349,7 +376,7 @@ export class TreeManager {
      * @returns `True` if the item is modified
      */
     toggleItem(item) {
-        return this.isItemChecked(item) ? this.uncheckItem(item) : this.checkItem(item);
+        return this.checkItem(item) || this.uncheckItem(item);
     }
     /**
      * Checks all items

package/lib/tree-select/custom-elements.json

@@ -21,7 +21,7 @@
           "name": "opened",
           "description": "Set dropdown to open",
           "type": "boolean",
-          "default": "\"false\""
+          "default": "false"
         },
         {
           "name": "placeholder",
@@ -66,7 +66,7 @@
           "attribute": "opened",
           "description": "Set dropdown to open",
           "type": "boolean",
-          "default": "\"false\""
+          "default": "false"
         },
         {
           "name": "placeholder",

package/lib/tree-select/custom-elements.md

@@ -0,0 +1,26 @@
+# ef-tree-select
+
+Dropdown control that allows selection from the tree list
+
+## Properties
+
+| Property      | Attribute     | Type                 | Default                        | Description                                      |
+|---------------|---------------|----------------------|--------------------------------|--------------------------------------------------|
+| `data`        |               | `TreeSelectData[]`   |                                | Data object to be used for creating tree         |
+| `filterCount` |               | `number`             | 0                              | Tracks the number of filter matches<br /><br />Only needed if internal filtering is unused |
+| `noRelation`  | `no-relation` | `boolean`            | false                          | Breaks the relationship when multiple<br />selection mode is enabled |
+| `opened`      | `opened`      | `boolean`            | false                          | Set dropdown to open                             |
+| `placeholder` | `placeholder` | `string`             |                                | Set placeholder text                             |
+| `renderer`    |               | `TreeSelectRenderer` | "new TreeSelectRenderer(this)" | Renderer used to render tree item elements       |
+| `showPills`   | `show-pills`  | `boolean`            | false                          | Should the control show pills                    |
+| `values`      |               | `string[]`           |                                | Returns a values collection of the currently<br />selected item values |
+
+## Events
+
+| Event            | Description                           |
+|------------------|---------------------------------------|
+| `cancel`         | Fired when selection is cancelled     |
+| `confirm`        | Fired when selection is confirmed     |
+| `opened-changed` | Fires when opened state changes       |
+| `query-changed`  | Fired when query in input box changed |
+| `value-changed`  | Fired when value of control changed   |

package/lib/version.js

@@ -1 +1 @@
-export const VERSION = '5.6.0';
+export const VERSION = '5.7.0';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@refinitiv-ui/elements",
-  "version": "5.6.0",
+  "version": "5.7.0",
   "description": "Element Framework Elements",
   "author": "Refinitiv",
   "license": "Apache-2.0",
@@ -312,12 +312,12 @@
   },
   "dependencies": {
     "@refinitiv-ui/browser-sparkline": "1.1.7",
-    "@refinitiv-ui/core": "^5.3.0",
+    "@refinitiv-ui/core": "^5.3.1",
     "@refinitiv-ui/halo-theme": "^5.3.0",
-    "@refinitiv-ui/i18n": "^5.2.0",
+    "@refinitiv-ui/i18n": "^5.2.1",
     "@refinitiv-ui/phrasebook": "^5.2.0",
     "@refinitiv-ui/solar-theme": "^5.5.0",
-    "@refinitiv-ui/translate": "^5.2.0",
+    "@refinitiv-ui/translate": "^5.2.1",
     "@refinitiv-ui/utils": "^5.1.0",
     "@types/chart.js": "^2.9.31",
     "chart.js": "~2.9.4",
@@ -327,12 +327,12 @@
     "tslib": "^2.3.1"
   },
   "devDependencies": {
-    "@refinitiv-ui/demo-block": "^5.1.0",
-    "@refinitiv-ui/test-helpers": "^5.1.0",
+    "@refinitiv-ui/demo-block": "^5.1.1",
+    "@refinitiv-ui/test-helpers": "^5.1.1",
     "@types/d3-interpolate": "^3.0.1"
   },
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "98890161cc4c25aa4870673a5b1f013cbe3fc6ac"
+  "gitHead": "442f86272d0c6dcb266d099c42b477e194355d1d"
 }