@refinitiv-ui/elements 5.0.0-beta.3 → 5.0.0-dev.204

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

@@ -1,4 +1,5 @@
-import { TimeoutTaskRunner } from '@refinitiv-ui/utils';
+import { TimeoutTaskRunner } from '@refinitiv-ui/utils/lib/async.js';
+import { isIE } from '@refinitiv-ui/utils/lib/browser.js';
 /**
  * Tooltip manager is here to avoid setting multiple
  * events on document and do expensive pre-processing
@@ -24,7 +25,7 @@ class TooltipManager {
             });
         };
         /**
-         * @param event Mouse click event
+         * @param event Mouse click or contextmenu event
          * @returns {void}
          */
         this.onClick = (event) => {
@@ -90,13 +91,18 @@ class TooltipManager {
     }
     register(tooltip, documentCallbacks) {
         if (!this.registry.size) {
-            document.addEventListener('mousemove', this.onMouseMove);
-            document.addEventListener('click', this.onClick, true);
-            document.addEventListener('mouseout', this.onMouseOut);
-            document.addEventListener('mouseleave', this.onMouseLeave);
-            document.addEventListener('wheel', this.onWheel);
-            document.addEventListener('keydown', this.onKeyDown);
-            document.body.addEventListener('blur', this.onBlur);
+            // IE11 does not support event options
+            const supportOptions = !isIE;
+            const eventOptions = supportOptions ? { passive: true } : undefined;
+            document.addEventListener('mousemove', this.onMouseMove, eventOptions);
+            document.addEventListener('mouseout', this.onMouseOut, eventOptions);
+            document.addEventListener('mouseleave', this.onMouseLeave, eventOptions);
+            document.addEventListener('wheel', this.onWheel, eventOptions);
+            document.addEventListener('keydown', this.onKeyDown, eventOptions);
+            document.body.addEventListener('blur', this.onBlur, eventOptions);
+            const clickEventOptions = supportOptions ? { passive: true, capture: true } : true;
+            document.addEventListener('click', this.onClick, clickEventOptions);
+            document.addEventListener('contextmenu', this.onClick, clickEventOptions);
         }
         this.registry.set(tooltip, documentCallbacks);
     }
@@ -104,12 +110,13 @@ class TooltipManager {
         this.registry.delete(tooltip);
         if (!this.registry.size) {
             document.removeEventListener('mousemove', this.onMouseMove);
-            document.removeEventListener('click', this.onClick, true);
             document.removeEventListener('mouseout', this.onMouseOut);
             document.removeEventListener('mouseleave', this.onMouseLeave);
             document.removeEventListener('wheel', this.onWheel);
             document.removeEventListener('keydown', this.onKeyDown);
             document.body.removeEventListener('blur', this.onBlur);
+            document.removeEventListener('click', this.onClick, true);
+            document.removeEventListener('contextmenu', this.onClick, true);
         }
     }
 }
@@ -131,4 +138,3 @@ export const register = (tooltip, documentCallbacks) => {
 export const deregister = (tooltip) => {
     tooltipManager.deregister(tooltip);
 };
-//# sourceMappingURL=tooltip-manager.js.map

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/tornado-chart/elements/tornado-chart.d.ts

@@ -1,6 +1,6 @@
 import { JSXInterface } from '../../jsx';
-import { ResponsiveElement, TemplateResult, CSSResult, ElementSize } from '@refinitiv-ui/core';
-import './tornado-item';
+import { ResponsiveElement, TemplateResult, CSSResultGroup, ElementSize } from '@refinitiv-ui/core';
+import './tornado-item.js';
 /**
  * A data visualization that helps to
  * show the differences or similarities between values
@@ -8,6 +8,11 @@ import './tornado-item';
  * @slot footer - Any HTML contents to display at chart footer section
  */
 export declare class TornadoChart extends ResponsiveElement {
+    /**
+     * Element version number
+     * @returns version number
+     */
+    static get version(): string;
     /**
      * Primary bar chart legend text
      */
@@ -44,12 +49,12 @@ export declare class TornadoChart extends ResponsiveElement {
      */
     resizedCallback(size: ElementSize): void;
     /**
-     * A `CSSResult` that will be used
+     * A `CSSResultGroup` that will be used
      * to style the host, slotted children
      * and the internal template of the element.
      * @return CSS template
      */
-    static get styles(): CSSResult | CSSResult[];
+    static get styles(): CSSResultGroup;
     /**
      * A `TemplateResult` that will be used
      * to render the updated internal template.
@@ -68,4 +73,6 @@ declare global {
       'ef-tornado-chart': Partial<TornadoChart> | JSXInterface.HTMLAttributes<TornadoChart>;
     }
   }
-}
+}
+
+export {};

package/lib/tornado-chart/elements/tornado-chart.js

@@ -1,11 +1,9 @@
-var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
-    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
-    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
-    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
-    return c > 3 && r && Object.defineProperty(target, key, r), r;
-};
-import { ResponsiveElement, html, css, customElement, property } from '@refinitiv-ui/core';
-import './tornado-item';
+import { __decorate } from "tslib";
+import { ResponsiveElement, html, css } from '@refinitiv-ui/core';
+import { customElement } from '@refinitiv-ui/core/lib/decorators/custom-element.js';
+import { property } from '@refinitiv-ui/core/lib/decorators/property.js';
+import { VERSION } from '../../version.js';
+import './tornado-item.js';
 /**
  * A data visualization that helps to
  * show the differences or similarities between values
@@ -32,6 +30,13 @@ let TornadoChart = class TornadoChart extends ResponsiveElement {
          */
         this.legendAlignment = false;
     }
+    /**
+     * Element version number
+     * @returns version number
+     */
+    static get version() {
+        return VERSION;
+    }
     /**
      * Set chart's legend alignment
      * @param responsive true if items needs to be responsive
@@ -39,7 +44,7 @@ let TornadoChart = class TornadoChart extends ResponsiveElement {
      */
     setLegendAlignment(responsive) {
         this.legendAlignment = responsive;
-        void this.requestUpdate();
+        this.requestUpdate();
     }
     /**
      * Set ef-tornado-item's alignment
@@ -67,7 +72,7 @@ let TornadoChart = class TornadoChart extends ResponsiveElement {
         }
     }
     /**
-     * A `CSSResult` that will be used
+     * A `CSSResultGroup` that will be used
      * to style the host, slotted children
      * and the internal template of the element.
      * @return CSS template
@@ -115,4 +120,3 @@ TornadoChart = __decorate([
     })
 ], TornadoChart);
 export { TornadoChart };
-//# sourceMappingURL=tornado-chart.js.map

package/lib/tornado-chart/elements/tornado-item.d.ts

@@ -1,12 +1,17 @@
 import { JSXInterface } from '../../jsx';
-import { BasicElement, TemplateResult, CSSResult } from '@refinitiv-ui/core';
-import '../../progress-bar';
-import '../../layout';
+import { BasicElement, TemplateResult, CSSResultGroup } from '@refinitiv-ui/core';
+import '../../progress-bar/index.js';
+import '../../layout/index.js';
 /**
  * A part of <ef-tornado-chart />,
  * consists mainly of primary, secondary ef-progress-bar and labels.
  */
 export declare class TornadoItem extends BasicElement {
+    /**
+     * Element version number
+     * @returns version number
+     */
+    static get version(): string;
     /**
      * Internal vertical flag value, used only by its getter and setter
      */
@@ -76,12 +81,12 @@ export declare class TornadoItem extends BasicElement {
      */
     private showHorizontalMode;
     /**
-     * A `CSSResult` that will be used
+     * A `CSSResultGroup` that will be used
      * to style the host, slotted children
      * and the internal template of the element.
      * @return CSS template
      */
-    static get styles(): CSSResult | CSSResult[];
+    static get styles(): CSSResultGroup;
     /**
      * A `TemplateResult` that will be used
      * to render the updated internal template.
@@ -100,4 +105,6 @@ declare global {
       'ef-tornado-item': Partial<TornadoItem> | JSXInterface.HTMLAttributes<TornadoItem>;
     }
   }
-}
+}
+
+export {};

package/lib/tornado-chart/elements/tornado-item.js

@@ -1,12 +1,11 @@
-var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
-    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
-    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
-    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
-    return c > 3 && r && Object.defineProperty(target, key, r), r;
-};
-import { BasicElement, html, css, property, customElement, ifDefined } from '@refinitiv-ui/core';
-import '../../progress-bar';
-import '../../layout';
+import { __decorate } from "tslib";
+import { BasicElement, html, css } from '@refinitiv-ui/core';
+import { customElement } from '@refinitiv-ui/core/lib/decorators/custom-element.js';
+import { property } from '@refinitiv-ui/core/lib/decorators/property.js';
+import { ifDefined } from '@refinitiv-ui/core/lib/directives/if-defined.js';
+import { VERSION } from '../../version.js';
+import '../../progress-bar/index.js';
+import '../../layout/index.js';
 /**
  * A part of <ef-tornado-chart />,
  * consists mainly of primary, secondary ef-progress-bar and labels.
@@ -63,6 +62,13 @@ let TornadoItem = class TornadoItem extends BasicElement {
          */
         this.secondaryLayoutFlexBasis = '40%';
     }
+    /**
+     * Element version number
+     * @returns version number
+     */
+    static get version() {
+        return VERSION;
+    }
     /**
      * Getter for toggling bar chart alignment
      * @returns {boolean} true if component is in vertical mode
@@ -90,7 +96,7 @@ let TornadoItem = class TornadoItem extends BasicElement {
         else {
             this.showHorizontalMode();
         }
-        void this.requestUpdate('vertical', previousValue);
+        this.requestUpdate('vertical', previousValue);
     }
     /**
      * Triggers vertical layout mode
@@ -117,7 +123,7 @@ let TornadoItem = class TornadoItem extends BasicElement {
         this.secondaryBarAlignment = 'left';
     }
     /**
-     * A `CSSResult` that will be used
+     * A `CSSResultGroup` that will be used
      * to style the host, slotted children
      * and the internal template of the element.
      * @return CSS template
@@ -199,4 +205,3 @@ TornadoItem = __decorate([
     customElement('ef-tornado-item')
 ], TornadoItem);
 export { TornadoItem };
-//# sourceMappingURL=tornado-item.js.map

package/lib/tornado-chart/index.d.ts

@@ -1,2 +1,2 @@
-export { TornadoChart } from './elements/tornado-chart';
-export { TornadoItem } from './elements/tornado-item';
+export { TornadoChart } from './elements/tornado-chart.js';
+export { TornadoItem } from './elements/tornado-item.js';

package/lib/tornado-chart/index.js

@@ -1,3 +1,2 @@
-export { TornadoChart } from './elements/tornado-chart';
-export { TornadoItem } from './elements/tornado-item';
-//# sourceMappingURL=index.js.map
+export { TornadoChart } from './elements/tornado-chart.js';
+export { TornadoItem } from './elements/tornado-item.js';

package/lib/tree/custom-elements.json

@@ -16,6 +16,18 @@
           "description": "Breaks the relationship when multiple\nselection mode is enabled",
           "type": "boolean",
           "default": "false"
+        },
+        {
+          "name": "query",
+          "description": "Query string applied to tree",
+          "type": "string",
+          "default": "\"\""
+        },
+        {
+          "name": "stateless",
+          "description": "Disable selections",
+          "type": "boolean",
+          "default": "false"
         }
       ],
       "properties": [
@@ -33,6 +45,13 @@
           "type": "boolean",
           "default": "false"
         },
+        {
+          "name": "query",
+          "attribute": "query",
+          "description": "Query string applied to tree",
+          "type": "string",
+          "default": "\"\""
+        },
         {
           "name": "renderer",
           "description": "Renderer used for generating tree items",
@@ -42,12 +61,20 @@
         {
           "name": "values",
           "description": "Selected items in tree",
-          "type": "string[]"
+          "type": "string[]",
+          "default": "[]"
         },
         {
           "name": "data",
           "description": "Data object to be used for creating tree",
           "type": "TreeData<T>"
+        },
+        {
+          "name": "stateless",
+          "attribute": "stateless",
+          "description": "Disable selections",
+          "type": "boolean",
+          "default": "false"
         }
       ],
       "events": [
@@ -56,7 +83,8 @@
           "description": "Fired when the users changed selection item."
         },
         {
-          "name": "expanded-changed"
+          "name": "expanded-changed",
+          "description": "Fired when an item's expanded state has changed."
         }
       ],
       "methods": [

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/elements/tree-item.d.ts

@@ -1,14 +1,20 @@
 import { JSXInterface } from '../../jsx';
 import { TemplateResult, ControlElement, PropertyValues } from '@refinitiv-ui/core';
-import '../../icon';
-import '../../checkbox';
-import { TreeDataItem } from '../helpers/types';
-import { CheckedState } from '../managers/tree-manager';
+import '../../icon/index.js';
+import '../../checkbox/index.js';
+import type { TreeDataItem } from '../helpers/types';
+import { CheckedState } from '../managers/tree-manager.js';
 /**
  * Displays a tree list item.
  * Groups display expansion arrows.
  */
 export declare class TreeItem<T extends TreeDataItem = TreeDataItem> extends ControlElement {
+    /**
+     * Element version number
+     * @returns version number
+     */
+    static get version(): string;
+    protected readonly defaultRole: string | null;
     /**
      * Checked state of the item
      */
@@ -33,6 +39,10 @@ export declare class TreeItem<T extends TreeDataItem = TreeDataItem> extends Con
      * Label of the item
      */
     label: string;
+    /**
+     * Icon of the item
+     */
+    icon: string;
     /**
      * Original data item, used for interacting with the tree manager
      */
@@ -56,6 +66,10 @@ export declare class TreeItem<T extends TreeDataItem = TreeDataItem> extends Con
      * Template for rendering the checkbox
      */
     protected get checkboxTemplate(): TemplateResult;
+    /**
+     * Template for rendering the icon
+     */
+    protected get iconTemplate(): TemplateResult;
     /**
      * Is the item fully checked?
      */
@@ -64,7 +78,39 @@ export declare class TreeItem<T extends TreeDataItem = TreeDataItem> extends Con
      * Is the checked state indeterminate?
      */
     protected get indeterminate(): boolean;
+    /**
+     * Handles aria-checked and aria-selected when mode changes
+     * aria-checked is used for multiple mode due to tri-state support
+     * @returns {void}
+     **/
+    private multipleChanged;
+    /**
+     * Handles selected and aria attribute changes
+     * @returns {void}
+     */
+    private checkedChanged;
+    /**
+     * Handles aria-expanded when expanded state changes
+     * @returns {void}
+     */
+    private expandedChanged;
+    /**
+     * Called after the component is first rendered
+     * @param changedProperties Properties which have changed
+     * @returns {void}
+     */
+    protected firstUpdated(changedProperties: PropertyValues): void;
+    /**
+     * Invoked whenever the element is updated
+     * @param changedProperties Map of changed properties with old values
+     * @returns {void}
+     */
     protected update(changedProperties: PropertyValues): void;
+    /**
+     * A `TemplateResult` that will be used
+     * to render the updated internal template.
+     * @returns Render template
+     */
     protected render(): TemplateResult;
 }
 
@@ -78,4 +124,6 @@ declare global {
       'ef-tree-item': Partial<TreeItem> | JSXInterface.HTMLAttributes<TreeItem>;
     }
   }
-}
+}
+
+export {};