@refinitiv-ui/elements 5.5.0 → 5.8.1

package/lib/swing-gauge/custom-elements.md

@@ -0,0 +1,17 @@
+# ef-swing-gauge
+
+Data visualisation showing the percentage between two values
+
+## Properties
+
+| Property                | Attribute          | Type                       | Default                 | Description                        |
+|-------------------------|--------------------|----------------------------|-------------------------|------------------------------------|
+| `canvasSize (readonly)` |                    | `SwingGaugeCanvasSize`     |                         | Getter size of component           |
+| `duration`              | `duration`         | `number`                   | 1000                    | Animation duration in milliseconds |
+| `primaryLabel`          | `primary-label`    | `string`                   | ""                      | Primary label                      |
+| `primaryLegend`         | `primary-legend`   | `string`                   | ""                      | Primary value legend               |
+| `primaryValue`          | `primary-value`    | `number`                   |                         | Primary value                      |
+| `secondaryLabel`        | `secondary-label`  | `string`                   | ""                      | Secondary label                    |
+| `secondaryLegend`       | `secondary-legend` | `string`                   | ""                      | Secondary value legend             |
+| `secondaryValue`        | `secondary-value`  | `number`                   |                         | Secondary value                    |
+| `valueFormatter`        |                    | `SwingGaugeValueFormatter` | "defaultValueFormatter" | Custom value formatter             |

package/lib/swing-gauge/helpers.d.ts

@@ -1,4 +1,4 @@
-import { SwingGaugeCanvasSize, SwingGaugeData, SwingGaugeStyle } from './types';
+import type { SwingGaugeCanvasSize, SwingGaugeData, SwingGaugeStyle } from './types';
 declare const helpers: {
     draw: (drawData: SwingGaugeData, drawCtx: CanvasRenderingContext2D, drawParams: SwingGaugeStyle) => void;
     clear: (canvasSize: SwingGaugeCanvasSize, drawCtx: CanvasRenderingContext2D) => void;

package/lib/swing-gauge/helpers.js

@@ -1,4 +1,4 @@
-import { CenterLineStyle, DefaultStyle } from './const';
+import { CenterLineStyle, DefaultStyle } from './const.js';
 let ctx;
 let data;
 let style;

package/lib/swing-gauge/index.d.ts

@@ -1,8 +1,8 @@
 import { JSXInterface } from '../jsx';
-import { ResponsiveElement, CSSResult, PropertyValues, TemplateResult } from '@refinitiv-ui/core';
-import '../canvas';
-import '../label';
-import { SwingGaugeCanvasSize, SwingGaugeValueFormatter } from './types';
+import { ResponsiveElement, CSSResultGroup, PropertyValues, TemplateResult } from '@refinitiv-ui/core';
+import '../canvas/index.js';
+import '../label/index.js';
+import type { SwingGaugeCanvasSize, SwingGaugeValueFormatter } from './types';
 export { SwingGaugeValueFormatter };
 /**
  * Data visualisation showing the percentage between two values
@@ -14,12 +14,12 @@ export declare class SwingGauge extends ResponsiveElement {
      */
     static get version(): string;
     /**
-     * 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;
+    static get styles(): CSSResultGroup;
     private _primaryValue;
     /**
      * Primary value
@@ -55,7 +55,8 @@ export declare class SwingGauge extends ResponsiveElement {
     */
     secondaryLegend: string;
     /**
-     * Custome value formatter
+     * Custom value formatter
+     * @type {SwingGaugeValueFormatter}
      */
     valueFormatter: SwingGaugeValueFormatter;
     /**
@@ -149,6 +150,7 @@ export declare class SwingGauge extends ResponsiveElement {
     private canvas;
     /**
      * Getter size of component
+     * @type {SwingGaugeCanvasSize}
      * @returns return size of canvas
      */
     get canvasSize(): SwingGaugeCanvasSize;

package/lib/swing-gauge/index.js

@@ -1,14 +1,14 @@
-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, css, customElement, property, html, styleMap, query, state, WarningNotice } from '@refinitiv-ui/core';
-import { VERSION } from '../';
-import '../canvas';
-import '../label';
-import { helpers as canvasHelper } from './helpers';
+import { __decorate } from "tslib";
+import { ResponsiveElement, css, html, WarningNotice } 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 { query } from '@refinitiv-ui/core/lib/decorators/query.js';
+import { state } from '@refinitiv-ui/core/lib/decorators/state.js';
+import { styleMap } from '@refinitiv-ui/core/lib/directives/style-map.js';
+import { VERSION } from '../version.js';
+import '../canvas/index.js';
+import '../label/index.js';
+import { helpers as canvasHelper } from './helpers.js';
 import { DefaultStyle, Segment, TextType } from './const.js';
 /**
  * Constants from swing-gauge default specs
@@ -61,7 +61,8 @@ let SwingGauge = class SwingGauge extends ResponsiveElement {
         */
         this.secondaryLegend = '';
         /**
-         * Custome value formatter
+         * Custom value formatter
+         * @type {SwingGaugeValueFormatter}
          */
         this.valueFormatter = this.defaultValueFormatter;
         /**
@@ -127,7 +128,7 @@ let SwingGauge = class SwingGauge extends ResponsiveElement {
         return VERSION;
     }
     /**
-     * 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
@@ -192,7 +193,7 @@ let SwingGauge = class SwingGauge extends ResponsiveElement {
         const oldValue = this._primaryValue;
         if (oldValue !== value) {
             this._primaryValue = value;
-            void this.requestUpdate('primaryValue', oldValue);
+            this.requestUpdate('primaryValue', oldValue);
         }
     }
     get primaryValue() {
@@ -207,7 +208,7 @@ let SwingGauge = class SwingGauge extends ResponsiveElement {
         const oldValue = this._secondaryValue;
         if (oldValue !== value) {
             this._secondaryValue = value;
-            void this.requestUpdate('secondaryValue', oldValue);
+            this.requestUpdate('secondaryValue', oldValue);
         }
     }
     get secondaryValue() {
@@ -242,6 +243,7 @@ let SwingGauge = class SwingGauge extends ResponsiveElement {
     }
     /**
      * Getter size of component
+     * @type {SwingGaugeCanvasSize}
      * @returns return size of canvas
      */
     get canvasSize() {

package/lib/tab/custom-elements.json

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

package/lib/tab/custom-elements.md

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

package/lib/tab/index.d.ts

@@ -1,7 +1,7 @@
 import { JSXInterface } from '../jsx';
-import { TemplateResult, CSSResult, ControlElement } from '@refinitiv-ui/core';
-import '../icon';
-import '../label';
+import { TemplateResult, CSSResultGroup, ControlElement } from '@refinitiv-ui/core';
+import '../icon/index.js';
+import '../label/index.js';
 /**
  * A building block for individual tab
  * @attr {boolean} disabled - Set disabled state
@@ -74,12 +74,12 @@ export declare class Tab extends ControlElement {
      */
     private handleClickClear;
     /**
-     * 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.
      * @returns CSS template
      */
-    static get styles(): CSSResult | CSSResult[];
+    static get styles(): CSSResultGroup;
     /**
      * Show Close Button if allow clears
      * @returns close button template

package/lib/tab/index.js

@@ -1,13 +1,10 @@
-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 { html, css, customElement, property, ControlElement } from '@refinitiv-ui/core';
-import { VERSION } from '../';
-import '../icon';
-import '../label';
+import { __decorate } from "tslib";
+import { html, css, ControlElement } 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 '../icon/index.js';
+import '../label/index.js';
 const isAllWhitespaceTextNode = (node) => {
     var _a;
     return node.nodeType === document.TEXT_NODE
@@ -68,7 +65,7 @@ let Tab = class Tab extends ControlElement {
         this.checkSlotChildren = (event) => {
             const slot = event.target;
             this.isSlotHasChildren = !slot.assignedNodes().filter(node => !this.isIgnorable(node)).length;
-            void this.requestUpdate();
+            this.requestUpdate();
         };
     }
     /**
@@ -105,7 +102,7 @@ let Tab = class Tab extends ControlElement {
         this.dispatchEvent(new CustomEvent('clear'));
     }
     /**
-     * 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.
      * @returns CSS template

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/tab-bar/index.d.ts

@@ -1,6 +1,6 @@
 import { JSXInterface } from '../jsx';
-import { TemplateResult, CSSResult, PropertyValues, ResponsiveElement, ElementSize } from '@refinitiv-ui/core';
-import '../button';
+import { TemplateResult, CSSResultGroup, PropertyValues, ResponsiveElement, ElementSize } from '@refinitiv-ui/core';
+import '../button/index.js';
 /**
  * Container for tabs
  */
@@ -11,12 +11,12 @@ export declare class TabBar extends ResponsiveElement {
      */
     static get version(): string;
     /**
-     * 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.
      * @returns CSS template
      */
-    static get styles(): CSSResult | CSSResult[];
+    static get styles(): CSSResultGroup;
     /**
      * Specify tab's horizontal alignment
      */

package/lib/tab-bar/index.js

@@ -1,13 +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 { html, css, customElement, property, query, ResponsiveElement } from '@refinitiv-ui/core';
-import { tweenAnimate } from './helpers/animate';
-import '../button';
-import { VERSION } from '../';
+import { __decorate } from "tslib";
+import { html, css, ResponsiveElement } 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 { query } from '@refinitiv-ui/core/lib/decorators/query.js';
+import { VERSION } from '../version.js';
+import { tweenAnimate } from './helpers/animate.js';
+import '../button/index.js';
 const BAR_TRAVEL_DISTANCE = 150; // scroll distance
 /**
  * Container for tabs
@@ -36,7 +34,7 @@ let TabBar = class TabBar extends ResponsiveElement {
         return VERSION;
     }
     /**
-     * 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.
      * @returns CSS template

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

@@ -3,7 +3,7 @@
   "tags": [
     {
       "name": "ef-text-field",
-      "description": "Form control element for text",
+      "description": "Form control element for text.",
       "attributes": [
         {
           "name": "pattern",
@@ -11,29 +11,10 @@
           "type": "string",
           "default": "\"\""
         },
-        {
-          "name": "placeholder",
-          "description": "Set place holder text",
-          "type": "string",
-          "default": "\"\""
-        },
-        {
-          "name": "error",
-          "description": "Set state to error",
-          "type": "boolean",
-          "default": "false"
-        },
-        {
-          "name": "warning",
-          "description": "Set state to warning",
-          "type": "boolean",
-          "default": "false"
-        },
         {
           "name": "icon",
           "description": "Specify icon to display in input. Value can be icon name",
-          "type": "string",
-          "default": "\"\""
+          "type": "string | null"
         },
         {
           "name": "icon-has-action",
@@ -41,12 +22,6 @@
           "type": "boolean",
           "default": "false"
         },
-        {
-          "name": "transparent",
-          "description": "Disables all other states and border/background styles.\nUse with advanced composite elements requiring e.g. multi selection in\ncombo-box when parent container handles element states.",
-          "type": "boolean",
-          "default": "false"
-        },
         {
           "name": "maxlength",
           "description": "Set character max limit",
@@ -58,8 +33,20 @@
           "type": "number | null"
         },
         {
-          "name": "value",
-          "description": "Input's value",
+          "name": "disabled",
+          "description": "Set disabled state",
+          "type": "boolean",
+          "default": "false"
+        },
+        {
+          "name": "error",
+          "description": "Set error state",
+          "type": "boolean",
+          "default": "false"
+        },
+        {
+          "name": "placeholder",
+          "description": "Set placeholder text",
           "type": "string",
           "default": "\"\""
         },
@@ -67,13 +54,25 @@
           "name": "readonly",
           "description": "Set readonly state",
           "type": "boolean",
-          "default": "\"false\""
+          "default": "false"
         },
         {
-          "name": "disabled",
-          "description": "Set disabled state",
+          "name": "transparent",
+          "description": "Disables all other states and border/background styles.",
+          "type": "boolean",
+          "default": "false"
+        },
+        {
+          "name": "warning",
+          "description": "Set warning state",
           "type": "boolean",
-          "default": "\"false\""
+          "default": "false"
+        },
+        {
+          "name": "value",
+          "description": "Input's value",
+          "type": "string",
+          "default": "\"\""
         }
       ],
       "properties": [
@@ -84,33 +83,11 @@
           "type": "string",
           "default": "\"\""
         },
-        {
-          "name": "placeholder",
-          "attribute": "placeholder",
-          "description": "Set place holder text",
-          "type": "string",
-          "default": "\"\""
-        },
-        {
-          "name": "error",
-          "attribute": "error",
-          "description": "Set state to error",
-          "type": "boolean",
-          "default": "false"
-        },
-        {
-          "name": "warning",
-          "attribute": "warning",
-          "description": "Set state to warning",
-          "type": "boolean",
-          "default": "false"
-        },
         {
           "name": "icon",
           "attribute": "icon",
           "description": "Specify icon to display in input. Value can be icon name",
-          "type": "string",
-          "default": "\"\""
+          "type": "string | null"
         },
         {
           "name": "iconHasAction",
@@ -119,13 +96,6 @@
           "type": "boolean",
           "default": "false"
         },
-        {
-          "name": "transparent",
-          "attribute": "transparent",
-          "description": "Disables all other states and border/background styles.\nUse with advanced composite elements requiring e.g. multi selection in\ncombo-box when parent container handles element states.",
-          "type": "boolean",
-          "default": "false"
-        },
         {
           "name": "maxLength",
           "attribute": "maxlength",
@@ -139,19 +109,23 @@
           "type": "number | null"
         },
         {
-          "name": "selectionStart",
-          "description": "Selection start index",
-          "type": "number | null"
+          "name": "disabled",
+          "attribute": "disabled",
+          "description": "Set disabled state",
+          "type": "boolean",
+          "default": "false"
         },
         {
-          "name": "selectionEnd",
-          "description": "Selection end index",
-          "type": "number | null"
+          "name": "error",
+          "attribute": "error",
+          "description": "Set error state",
+          "type": "boolean",
+          "default": "false"
         },
         {
-          "name": "value",
-          "attribute": "value",
-          "description": "Input's value",
+          "name": "placeholder",
+          "attribute": "placeholder",
+          "description": "Set placeholder text",
           "type": "string",
           "default": "\"\""
         },
@@ -160,14 +134,28 @@
           "attribute": "readonly",
           "description": "Set readonly state",
           "type": "boolean",
-          "default": "\"false\""
+          "default": "false"
         },
         {
-          "name": "disabled",
-          "attribute": "disabled",
-          "description": "Set disabled state",
+          "name": "transparent",
+          "attribute": "transparent",
+          "description": "Disables all other states and border/background styles.",
           "type": "boolean",
-          "default": "\"false\""
+          "default": "false"
+        },
+        {
+          "name": "warning",
+          "attribute": "warning",
+          "description": "Set warning state",
+          "type": "boolean",
+          "default": "false"
+        },
+        {
+          "name": "value",
+          "attribute": "value",
+          "description": "Input's value",
+          "type": "string",
+          "default": "\"\""
         }
       ],
       "events": [
@@ -181,26 +169,27 @@
         },
         {
           "name": "icon-click",
-          "description": "Dispatched only when element has icon-has-action attribute and icon is clicked"
+          "description": "Dispatched when icon is clicked"
         }
       ],
       "methods": [
         {
-          "name": "select",
-          "description": "Select the contents of input",
-          "params": []
+          "name": "onInputInput",
+          "description": "",
+          "params": [
+            {
+              "name": "event",
+              "type": "InputEvent"
+            }
+          ]
         },
         {
-          "name": "setSelectionRange",
-          "description": "Set the selection range",
+          "name": "onInputChange",
+          "description": "",
           "params": [
             {
-              "name": "startSelection",
-              "description": "Start of selection"
-            },
-            {
-              "name": "endSelection",
-              "description": "End of the selection"
+              "name": "event",
+              "type": "InputEvent"
             }
           ]
         }

package/lib/text-field/custom-elements.md

@@ -0,0 +1,35 @@
+# ef-text-field
+
+Form control element for text.
+
+## Properties
+
+| Property        | Attribute         | Type             | Default | Description                                      |
+|-----------------|-------------------|------------------|---------|--------------------------------------------------|
+| `disabled`      | `disabled`        | `boolean`        | false   | Set disabled state                               |
+| `error`         | `error`           | `boolean`        | false   | Set error state                                  |
+| `icon`          | `icon`            | `string \| null` | null    | Specify icon to display in input. Value can be icon name |
+| `iconHasAction` | `icon-has-action` | `boolean`        | false   | Specify when icon need to be clickable           |
+| `maxLength`     | `maxlength`       | `number \| null` | null    | Set character max limit                          |
+| `minLength`     | `minlength`       | `number \| null` | null    | Set character min limit                          |
+| `pattern`       | `pattern`         | `string`         | ""      | Set regular expression for input validation      |
+| `placeholder`   | `placeholder`     | `string`         | ""      | Set placeholder text                             |
+| `readonly`      | `readonly`        | `boolean`        | false   | Set readonly state                               |
+| `transparent`   | `transparent`     | `boolean`        | false   | Disables all other states and border/background styles. |
+| `value`         | `value`           | `string`         | ""      | Input's value                                    |
+| `warning`       | `warning`         | `boolean`        | false   | Set warning state                                |
+
+## Methods
+
+| Method          | Type                 |
+|-----------------|----------------------|
+| `onInputChange` | `(event: any): void` |
+| `onInputInput`  | `(event: any): void` |
+
+## Events
+
+| Event           | Description                         |
+|-----------------|-------------------------------------|
+| `error-changed` | Dispatched when error state changes |
+| `icon-click`    | Dispatched when icon is clicked     |
+| `value-changed` | Dispatched when value changes       |