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

package/lib/overlay-menu/custom-elements.json

@@ -15,7 +15,36 @@
           "name": "opened",
           "description": "True if the menu is currently displayed",
           "type": "boolean",
-          "default": "\"false\""
+          "default": "false"
+        },
+        {
+          "name": "with-backdrop",
+          "description": "True to show backdrop",
+          "type": "boolean",
+          "default": "false"
+        },
+        {
+          "name": "no-cancel-on-esc-key",
+          "description": "Set to true to disable canceling the overlay with the ESC key",
+          "type": "boolean",
+          "default": "false"
+        },
+        {
+          "name": "no-cancel-on-outside-click",
+          "description": "Set to true to disable canceling the overlay by clicking outside it",
+          "type": "boolean",
+          "default": "false"
+        },
+        {
+          "name": "lock-position-target",
+          "description": "Set to true to lock position target",
+          "type": "boolean",
+          "default": "false"
+        },
+        {
+          "name": "transition-style",
+          "description": "Set the transition style",
+          "type": "string | null"
         },
         {
           "name": "value",
@@ -26,12 +55,24 @@
         {
           "name": "x",
           "description": "Set a specific x coordinate",
-          "type": "number"
+          "type": "number | undefined"
         },
         {
           "name": "y",
           "description": "Set a specific y coordinate",
-          "type": "number"
+          "type": "number | undefined"
+        },
+        {
+          "name": "horizontal-offset",
+          "description": "A pixel value that will be added to the position calculated on the horizontal axis. The offset will be applied either to the `left` or `right` depending on the `positionTarget`",
+          "type": "number",
+          "default": "0"
+        },
+        {
+          "name": "vertical-offset",
+          "description": "A pixel value that will be added to the position calculated on the vertical axis. The offset will be applied either to the `top` or `bottom` depending on the `positionTarget`",
+          "type": "number",
+          "default": "0"
         },
         {
           "name": "offset",
@@ -41,7 +82,7 @@
         {
           "name": "position",
           "description": "Set position and align against the attach target.",
-          "type": "{} | undefined"
+          "type": "Position[] | undefined"
         },
         {
           "name": "with-backdrop",
@@ -90,54 +131,59 @@
         {
           "name": "values",
           "description": "Array of item's values",
-          "type": "string[]"
+          "type": "string[]",
+          "default": "[]"
         },
         {
           "name": "data",
-          "description": "Construct the menu from data object.\nCannot be used with internal content"
+          "description": "Construct the menu from data object.\nCannot be used with internal content",
+          "type": "OverlayMenuData|undefined"
         },
         {
           "name": "opened",
           "attribute": "opened",
           "description": "True if the menu is currently displayed",
           "type": "boolean",
-          "default": "\"false\""
+          "default": "false"
         },
         {
           "name": "withBackdrop",
+          "attribute": "with-backdrop",
           "description": "True to show backdrop",
           "type": "boolean",
-          "default": "\"false\""
+          "default": "false"
         },
         {
           "name": "noCancelOnEscKey",
+          "attribute": "no-cancel-on-esc-key",
           "description": "Set to true to disable canceling the overlay with the ESC key",
           "type": "boolean",
-          "default": "\"false\""
+          "default": "false"
         },
         {
           "name": "noCancelOnOutsideClick",
+          "attribute": "no-cancel-on-outside-click",
           "description": "Set to true to disable canceling the overlay by clicking outside it",
           "type": "boolean",
-          "default": "\"false\""
+          "default": "false"
         },
         {
           "name": "lockPositionTarget",
+          "attribute": "lock-position-target",
           "description": "Set to true to lock position target",
           "type": "boolean",
-          "default": "\"false\""
+          "default": "false"
         },
         {
           "name": "positionTarget",
           "description": "Position next to the HTML element",
-          "type": "HTMLElement|null",
-          "default": "\"null\""
+          "type": "HTMLElement | null"
         },
         {
           "name": "transitionStyle",
+          "attribute": "transition-style",
           "description": "Set the transition style",
-          "type": "string|null",
-          "default": "\"null\""
+          "type": "string | null"
         },
         {
           "name": "value",
@@ -150,23 +196,27 @@
           "name": "x",
           "attribute": "x",
           "description": "Set a specific x coordinate",
-          "type": "number"
+          "type": "number | undefined"
         },
         {
           "name": "y",
           "attribute": "y",
           "description": "Set a specific y coordinate",
-          "type": "number"
+          "type": "number | undefined"
         },
         {
           "name": "horizontalOffset",
+          "attribute": "horizontal-offset",
           "description": "A pixel value that will be added to the position calculated on the horizontal axis. The offset will be applied either to the `left` or `right` depending on the `positionTarget`",
-          "type": "number"
+          "type": "number",
+          "default": "0"
         },
         {
           "name": "verticalOffset",
+          "attribute": "vertical-offset",
           "description": "A pixel value that will be added to the position calculated on the vertical axis. The offset will be applied either to the `top` or `bottom` depending on the `positionTarget`",
-          "type": "number"
+          "type": "number",
+          "default": "0"
         },
         {
           "name": "offset",
@@ -178,7 +228,7 @@
           "name": "position",
           "attribute": "position",
           "description": "Set position and align against the attach target.",
-          "type": "{} | undefined"
+          "type": "Position[] | undefined"
         }
       ],
       "events": [

package/lib/overlay-menu/custom-elements.md

@@ -0,0 +1,44 @@
+# ef-overlay-menu
+
+Overlay that supports single-level and multi-level menus
+
+## Attributes
+
+| Attribute                    | Type      | Description                                      |
+|------------------------------|-----------|--------------------------------------------------|
+| `horizontal-offset`          | `number`  | A pixel value that will be added to the position calculated on the horizontal axis. The offset will be applied either to the `left` or `right` depending on the `positionTarget` |
+| `lock-position-target`       | `boolean` | Set to true to lock position target              |
+| `no-cancel-on-esc-key`       | `boolean` | Set to true to disable canceling the overlay with the ESC key |
+| `no-cancel-on-outside-click` | `boolean` | Set to true to disable canceling the overlay by clicking outside it |
+| `transition-style`           | `string`  | Set the transition style                         |
+| `vertical-offset`            | `number`  | A pixel value that will be added to the position calculated on the vertical axis. The offset will be applied either to the `top` or `bottom` depending on the `positionTarget` |
+| `with-backdrop`              | `boolean` | True to show backdrop                            |
+
+## Properties
+
+| Property                 | Attribute                    | Type                         | Default | Description                                      |
+|--------------------------|------------------------------|------------------------------|---------|--------------------------------------------------|
+| `compact`                | `compact`                    | `boolean`                    | false   | Switch to compact style menu                     |
+| `data`                   |                              | `OverlayMenuData\|undefined` |         | Construct the menu from data object.<br />Cannot be used with internal content |
+| `horizontalOffset`       | `horizontal-offset`          | `number`                     | 0       | A pixel value that will be added to the position calculated on the horizontal axis. The offset will be applied either to the `left` or `right` depending on the `positionTarget` |
+| `lockPositionTarget`     | `lock-position-target`       | `boolean`                    | false   | Set to true to lock position target              |
+| `noCancelOnEscKey`       | `no-cancel-on-esc-key`       | `boolean`                    | false   | Set to true to disable canceling the overlay with the ESC key |
+| `noCancelOnOutsideClick` | `no-cancel-on-outside-click` | `boolean`                    | false   | Set to true to disable canceling the overlay by clicking outside it |
+| `offset`                 | `offset`                     | `number`                     |         | A pixel value that will be added to the position calculated on the vertical or horizontal axis. The offset is applied dynamically depending on the `positionTarget` |
+| `opened`                 | `opened`                     | `boolean`                    | false   | True if the menu is currently displayed          |
+| `position`               | `position`                   | `Position[] \| undefined`    |         | Set position and align against the attach target. |
+| `positionTarget`         |                              | `HTMLElement \| null`        | null    | Position next to the HTML element                |
+| `transitionStyle`        | `transition-style`           | `string \| null`             | null    | Set the transition style                         |
+| `value`                  | `value`                      | `string`                     | ""      | Returns the first selected item value.           |
+| `values`                 |                              | `string[]`                   | []      | Array of item's values                           |
+| `verticalOffset`         | `vertical-offset`            | `number`                     | 0       | A pixel value that will be added to the position calculated on the vertical axis. The offset will be applied either to the `top` or `bottom` depending on the `positionTarget` |
+| `withBackdrop`           | `with-backdrop`              | `boolean`                    | false   | True to show backdrop                            |
+| `x`                      | `x`                          | `number \| undefined`        |         | Set a specific x coordinate                      |
+| `y`                      | `y`                          | `number \| undefined`        |         | Set a specific y coordinate                      |
+
+## Events
+
+| Event            | Description                                      |
+|------------------|--------------------------------------------------|
+| `item-trigger`   | Dispatched when user clicks on item              |
+| `opened-changed` | Dispatched when when opened attribute changes internally. Prevent default to stop opening/closing pipeline |

package/lib/overlay-menu/index.d.ts

@@ -25,30 +25,30 @@ export type { OverlayMenuData };
  * @attr {boolean} lock-position-target - Set to true to lock position target
  * @prop {boolean} [lockPositionTarget=false] - Set to true to lock position target
  *
- * @prop {HTMLElement|null} [positionTarget=null] - Position next to the HTML element
+ * @prop {HTMLElement | null} [positionTarget=null] - Position next to the HTML element
  *
  * @attr {string} transition-style - Set the transition style
- * @prop {string|null} [transitionStyle=null] - Set the transition style
+ * @prop {string | null} [transitionStyle=null] - Set the transition style
  *
- * @prop {string} [value=] - Returns the first selected item from values.
+ * @prop {string} [value=""] - Returns the first selected item from values.
  *
- * @attr {number} x - Set a specific x coordinate
- * @prop {number} x - Set a specific x coordinate
+ * @attr {number | undefined} x - Set a specific x coordinate
+ * @prop {number | undefined} x - Set a specific x coordinate
  *
- * @attr {number} y - Set a specific y coordinate
- * @prop {number} y - Set a specific y coordinate
+ * @attr {number | undefined} y - Set a specific y coordinate
+ * @prop {number | undefined} y - Set a specific y coordinate
  *
  * @attr {number} horizontal-offset - A pixel value that will be added to the position calculated on the horizontal axis. The offset will be applied either to the `left` or `right` depending on the `positionTarget`
- * @prop {number} horizontalOffset - A pixel value that will be added to the position calculated on the horizontal axis. The offset will be applied either to the `left` or `right` depending on the `positionTarget`
+ * @prop {number} [horizontalOffset=0] - A pixel value that will be added to the position calculated on the horizontal axis. The offset will be applied either to the `left` or `right` depending on the `positionTarget`
  *
  * @attr {number} vertical-offset - A pixel value that will be added to the position calculated on the vertical axis. The offset will be applied either to the `top` or `bottom` depending on the `positionTarget`
- * @prop {number} verticalOffset - A pixel value that will be added to the position calculated on the vertical axis. The offset will be applied either to the `top` or `bottom` depending on the `positionTarget`
+ * @prop {number} [verticalOffset=0] - A pixel value that will be added to the position calculated on the vertical axis. The offset will be applied either to the `top` or `bottom` depending on the `positionTarget`
  *
  * @attr {number} offset - A pixel value that will be added to the position calculated on the vertical or horizontal axis. The offset is applied dynamically depending on the `positionTarget`
  * @prop {number} offset - A pixel value that will be added to the position calculated on the vertical or horizontal axis. The offset is applied dynamically depending on the `positionTarget`
  *
- * @attr {{} | undefined} position - Set position and align against the attach target.
- * @prop {{} | undefined} position - Set position and align against the attach target.
+ * @attr {Position[] | undefined} position - Set position and align against the attach target.
+ * @prop {Position[] | undefined} position - Set position and align against the attach target.
  */
 export declare class OverlayMenu extends Overlay {
     /**
@@ -81,6 +81,7 @@ export declare class OverlayMenu extends Overlay {
     /**
      * Array of item's values
      * @type {string[]}
+     * @default []
      */
     get values(): string[];
     set values(values: string[]);
@@ -92,6 +93,7 @@ export declare class OverlayMenu extends Overlay {
     /**
      * Construct the menu from data object.
      * Cannot be used with internal content
+     * @type {OverlayMenuData|undefined}
      */
     get data(): OverlayMenuData | undefined;
     set data(value: OverlayMenuData | undefined);

package/lib/overlay-menu/index.js

@@ -34,30 +34,30 @@ import { OpenedMenusManager } from './managers/menu-manager.js';
  * @attr {boolean} lock-position-target - Set to true to lock position target
  * @prop {boolean} [lockPositionTarget=false] - Set to true to lock position target
  *
- * @prop {HTMLElement|null} [positionTarget=null] - Position next to the HTML element
+ * @prop {HTMLElement | null} [positionTarget=null] - Position next to the HTML element
  *
  * @attr {string} transition-style - Set the transition style
- * @prop {string|null} [transitionStyle=null] - Set the transition style
+ * @prop {string | null} [transitionStyle=null] - Set the transition style
  *
- * @prop {string} [value=] - Returns the first selected item from values.
+ * @prop {string} [value=""] - Returns the first selected item from values.
  *
- * @attr {number} x - Set a specific x coordinate
- * @prop {number} x - Set a specific x coordinate
+ * @attr {number | undefined} x - Set a specific x coordinate
+ * @prop {number | undefined} x - Set a specific x coordinate
  *
- * @attr {number} y - Set a specific y coordinate
- * @prop {number} y - Set a specific y coordinate
+ * @attr {number | undefined} y - Set a specific y coordinate
+ * @prop {number | undefined} y - Set a specific y coordinate
  *
  * @attr {number} horizontal-offset - A pixel value that will be added to the position calculated on the horizontal axis. The offset will be applied either to the `left` or `right` depending on the `positionTarget`
- * @prop {number} horizontalOffset - A pixel value that will be added to the position calculated on the horizontal axis. The offset will be applied either to the `left` or `right` depending on the `positionTarget`
+ * @prop {number} [horizontalOffset=0] - A pixel value that will be added to the position calculated on the horizontal axis. The offset will be applied either to the `left` or `right` depending on the `positionTarget`
  *
  * @attr {number} vertical-offset - A pixel value that will be added to the position calculated on the vertical axis. The offset will be applied either to the `top` or `bottom` depending on the `positionTarget`
- * @prop {number} verticalOffset - A pixel value that will be added to the position calculated on the vertical axis. The offset will be applied either to the `top` or `bottom` depending on the `positionTarget`
+ * @prop {number} [verticalOffset=0] - A pixel value that will be added to the position calculated on the vertical axis. The offset will be applied either to the `top` or `bottom` depending on the `positionTarget`
  *
  * @attr {number} offset - A pixel value that will be added to the position calculated on the vertical or horizontal axis. The offset is applied dynamically depending on the `positionTarget`
  * @prop {number} offset - A pixel value that will be added to the position calculated on the vertical or horizontal axis. The offset is applied dynamically depending on the `positionTarget`
  *
- * @attr {{} | undefined} position - Set position and align against the attach target.
- * @prop {{} | undefined} position - Set position and align against the attach target.
+ * @attr {Position[] | undefined} position - Set position and align against the attach target.
+ * @prop {Position[] | undefined} position - Set position and align against the attach target.
  */
 let OverlayMenu = OverlayMenu_1 = class OverlayMenu extends Overlay {
     constructor() {
@@ -131,6 +131,7 @@ let OverlayMenu = OverlayMenu_1 = class OverlayMenu extends Overlay {
     /**
      * Array of item's values
      * @type {string[]}
+     * @default []
      */
     get values() {
         return this.withData ? this.getDataValues() : this.getSlottedValues();
@@ -156,6 +157,7 @@ let OverlayMenu = OverlayMenu_1 = class OverlayMenu extends Overlay {
     /**
      * Construct the menu from data object.
      * Cannot be used with internal content
+     * @type {OverlayMenuData|undefined}
      */
     get data() {
         return this._data;

package/lib/pagination/custom-elements.md

@@ -0,0 +1,27 @@
+# ef-pagination
+
+Used to control and navigate through multiple pages
+
+## Properties
+
+| Property     | Attribute     | Type      | Default | Description             |
+|--------------|---------------|-----------|---------|-------------------------|
+| `disabled`   | `disabled`    | `boolean` | false   | Set state to disable    |
+| `page`       | `page`        | `string`  | "1"     | Set current page        |
+| `pageSize`   | `page-size`   | `string`  | "10"    | Number of item per page |
+| `totalItems` | `total-items` | `string`  | "10"    | Total items             |
+
+## Methods
+
+| Method     | Type       | Description             |
+|------------|------------|-------------------------|
+| `first`    | `(): void` | Go to the first page    |
+| `last`     | `(): void` | Go to the last page     |
+| `next`     | `(): void` | Go to the next page     |
+| `previous` | `(): void` | Go to the previous page |
+
+## Events
+
+| Event          | Description                               |
+|----------------|-------------------------------------------|
+| `page-changed` | Fired when the `page` property is changed |

package/lib/panel/custom-elements.md

@@ -0,0 +1,11 @@
+# ef-panel
+
+A container for components.
+It provides a standard background color and padding, depends on theme.
+
+## Properties
+
+| Property      | Attribute     | Type      | Default | Description                         |
+|---------------|---------------|-----------|---------|-------------------------------------|
+| `spacing`     | `spacing`     | `boolean` | false   | Apply default padding from theme    |
+| `transparent` | `transparent` | `boolean` | false   | Set panel background to transparent |

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

@@ -3,13 +3,19 @@
   "tags": [
     {
       "name": "ef-password-field",
-      "description": "A form control element for password",
+      "description": "A form control element for password.",
       "attributes": [
         {
-          "name": "pattern",
-          "description": "Set regular expression for input validation",
-          "type": "string",
-          "default": "\"\""
+          "name": "disabled",
+          "description": "Set disabled state",
+          "type": "boolean",
+          "default": "false"
+        },
+        {
+          "name": "error",
+          "description": "Set error state",
+          "type": "boolean",
+          "default": "false"
         },
         {
           "name": "placeholder",
@@ -18,33 +24,23 @@
           "default": "\"\""
         },
         {
-          "name": "error",
-          "description": "Set state to error",
+          "name": "readonly",
+          "description": "Set readonly state",
           "type": "boolean",
           "default": "false"
         },
         {
-          "name": "warning",
-          "description": "Set state to warning",
+          "name": "transparent",
+          "description": "Disables all other states and border/background styles.",
           "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.",
+          "name": "warning",
+          "description": "Set warning state",
           "type": "boolean",
           "default": "false"
         },
-        {
-          "name": "minlength",
-          "description": "Set character minimum limit",
-          "type": "number | null"
-        },
-        {
-          "name": "maxlength",
-          "description": "Set character maximum limit",
-          "type": "number | null"
-        },
         {
           "name": "value",
           "description": "Input's value",
@@ -52,22 +48,43 @@
           "default": "\"\""
         },
         {
-          "name": "readonly",
-          "description": "Set readonly state",
-          "type": "boolean",
-          "default": "\"false\""
+          "name": "maxlength",
+          "description": "Set character max limit",
+          "type": "number"
         },
         {
-          "name": "disabled",
-          "description": "Set disabled state",
-          "type": "boolean",
-          "default": "\"false\""
+          "name": "minlength",
+          "description": "Set character min limit",
+          "type": "number"
         }
       ],
       "properties": [
+        {
+          "name": "disabled",
+          "attribute": "disabled",
+          "description": "Set disabled state",
+          "type": "boolean",
+          "default": "false"
+        },
+        {
+          "name": "error",
+          "attribute": "error",
+          "description": "Set error state",
+          "type": "boolean",
+          "default": "false"
+        },
+        {
+          "name": "maxLength",
+          "description": "Set character max limit",
+          "type": "number | null"
+        },
+        {
+          "name": "minLength",
+          "description": "Set character min limit",
+          "type": "number | null"
+        },
         {
           "name": "pattern",
-          "attribute": "pattern",
           "description": "Set regular expression for input validation",
           "type": "string",
           "default": "\"\""
@@ -80,37 +97,25 @@
           "default": "\"\""
         },
         {
-          "name": "error",
-          "attribute": "error",
-          "description": "Set state to error",
-          "type": "boolean",
-          "default": "false"
-        },
-        {
-          "name": "warning",
-          "attribute": "warning",
-          "description": "Set state to warning",
+          "name": "readonly",
+          "attribute": "readonly",
+          "description": "Set readonly state",
           "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.",
+          "description": "Disables all other states and border/background styles.",
           "type": "boolean",
           "default": "false"
         },
         {
-          "name": "minLength",
-          "attribute": "minlength",
-          "description": "Set character minimum limit",
-          "type": "number | null"
-        },
-        {
-          "name": "maxLength",
-          "attribute": "maxlength",
-          "description": "Set character maximum limit",
-          "type": "number | null"
+          "name": "warning",
+          "attribute": "warning",
+          "description": "Set warning state",
+          "type": "boolean",
+          "default": "false"
         },
         {
           "name": "value",
@@ -118,20 +123,6 @@
           "description": "Input's value",
           "type": "string",
           "default": "\"\""
-        },
-        {
-          "name": "readonly",
-          "attribute": "readonly",
-          "description": "Set readonly state",
-          "type": "boolean",
-          "default": "\"false\""
-        },
-        {
-          "name": "disabled",
-          "attribute": "disabled",
-          "description": "Set disabled state",
-          "type": "boolean",
-          "default": "\"false\""
         }
       ],
       "events": [
@@ -142,12 +133,16 @@
         {
           "name": "error-changed",
           "description": "Dispatched when error state changes"
+        },
+        {
+          "name": "icon-click",
+          "description": "Dispatched when icon is clicked"
         }
       ],
       "methods": [
         {
-          "name": "select",
-          "description": "Select the contents of input",
+          "name": "renderIcon",
+          "description": "",
           "params": []
         }
       ]

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

@@ -0,0 +1,39 @@
+# ef-password-field
+
+A form control element for password.
+
+## Attributes
+
+| Attribute   | Type     | Description             |
+|-------------|----------|-------------------------|
+| `maxlength` | `number` | Set character max limit |
+| `minlength` | `number` | Set character min limit |
+
+## Properties
+
+| Property      | Attribute     | Type             | Default | Description                                      |
+|---------------|---------------|------------------|---------|--------------------------------------------------|
+| `disabled`    | `disabled`    | `boolean`        | false   | Set disabled state                               |
+| `error`       | `error`       | `boolean`        | false   | Set error state                                  |
+| `maxLength`   |               | `number \| null` | null    | Set character max limit                          |
+| `minLength`   |               | `number \| null` | null    | Set character min limit                          |
+| `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      |
+|--------------|-----------|
+| `renderIcon` | `(): any` |
+
+## Events
+
+| Event           | Description                         |
+|-----------------|-------------------------------------|
+| `error-changed` | Dispatched when error state changes |
+| `icon-click`    | Dispatched when icon is clicked     |
+| `value-changed` | Dispatched when value changes       |