@refinitiv-ui/elements 5.3.4 → 5.8.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/helpers/types.d.ts

@@ -1,6 +1,6 @@
-import { CollectionComposer } from '@refinitiv-ui/utils';
-import { OverlayMenu } from '../index';
-import { Item, ItemData } from '../../item';
+import type { CollectionComposer } from '@refinitiv-ui/utils/lib/collection';
+import type { OverlayMenu } from '../index';
+import type { Item, ItemData } from '../../item';
 export declare type NestedMenu = {
     menu: OverlayMenu;
     item: Item;

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

@@ -1,10 +1,10 @@
 import { JSXInterface } from '../jsx';
-import { TemplateResult, CSSResult, PropertyValues } from '@refinitiv-ui/core';
-import '../icon';
-import '../item';
-import { Overlay } from '../overlay';
-import { OverlayMenuData } from './helpers/types';
-export { OverlayMenuData };
+import { TemplateResult, CSSResultGroup, PropertyValues } from '@refinitiv-ui/core';
+import '../icon/index.js';
+import '../item/index.js';
+import { Overlay } from '../overlay/index.js';
+import type { OverlayMenuData } from './helpers/types';
+export type { OverlayMenuData };
 /**
  * Overlay that supports single-level and multi-level menus
  * @fires item-trigger - Dispatched when user clicks on item
@@ -25,30 +25,30 @@ export { 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 {
     /**
@@ -57,12 +57,12 @@ export declare class OverlayMenu extends Overlay {
      */
     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 | CSSResult[];
+    static get styles(): CSSResultGroup;
     constructor();
     private dataDisconnectThrottler;
     private menuHighlightedItem?;
@@ -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);
@@ -184,6 +186,11 @@ export declare class OverlayMenu extends Overlay {
      * @return {void}
      */
     protected onClosed(): void;
+    /**
+     * Restore properties back to original before bounding to parent menu
+     * @returns {void}
+     */
+    private restoreNestedProperties;
     /**
      * Selects all data from CollectionComposer
      * @return all MenuItems stored in CollectionComposer

package/lib/overlay-menu/index.js

@@ -1,19 +1,19 @@
-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;
-};
 var OverlayMenu_1;
-import { html, css, customElement, property, ifDefined, WarningNotice } from '@refinitiv-ui/core';
-import { AnimationTaskRunner, CollectionComposer } from '@refinitiv-ui/utils';
-import '../icon';
-import '../item';
-import { Item } from '../item';
-import { Overlay } from '../overlay';
-import { getId } from './helpers/uuid';
-import { OpenedMenusManager } from './managers/menu-manager';
-import { VERSION } from '../';
+import { __decorate } from "tslib";
+import { html, css, 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 { ifDefined } from '@refinitiv-ui/core/lib/directives/if-defined.js';
+import { VERSION } from '../version.js';
+import { AnimationTaskRunner } from '@refinitiv-ui/utils/lib/async.js';
+import { CollectionComposer } from '@refinitiv-ui/utils/lib/collection.js';
+import { uuid } from '@refinitiv-ui/utils/lib/uuid.js';
+import '../icon/index.js';
+import '../item/index.js';
+import { Item } from '../item/index.js';
+import { Overlay } from '../overlay/index.js';
+import { applyLock } from '../overlay/managers/interaction-lock-manager.js';
+import { OpenedMenusManager } from './managers/menu-manager.js';
 /**
  * Overlay that supports single-level and multi-level menus
  * @fires item-trigger - Dispatched when user clicks on item
@@ -34,30 +34,30 @@ import { VERSION } from '../';
  * @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() {
@@ -109,7 +109,7 @@ let OverlayMenu = OverlayMenu_1 = class OverlayMenu extends Overlay {
         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
@@ -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();
@@ -141,7 +142,7 @@ let OverlayMenu = OverlayMenu_1 = class OverlayMenu extends Overlay {
             return;
         }
         this.withData ? this.setDataValues(values) : this.setSlottedValues(values);
-        void this.requestUpdate('values', oldValues);
+        this.requestUpdate('values', oldValues);
     }
     /**
      * Returns the first selected item value.
@@ -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;
@@ -184,7 +186,7 @@ let OverlayMenu = OverlayMenu_1 = class OverlayMenu extends Overlay {
         this.composer.on('modification', // Listen for modifications
         this.modificationUpdate // Update the template
         );
-        void this.requestUpdate('data', oldValue);
+        this.requestUpdate('data', oldValue);
     }
     /**
      * Get values from data collection
@@ -368,7 +370,15 @@ let OverlayMenu = OverlayMenu_1 = class OverlayMenu extends Overlay {
             this.disconnectNestedMenus();
         });
         this.setItemHighlight();
-        if (OpenedMenusManager.isNested(this)) {
+        this.restoreNestedProperties();
+        super.onClosed();
+    }
+    /**
+     * Restore properties back to original before bounding to parent menu
+     * @returns {void}
+     */
+    restoreNestedProperties() {
+        if (this.nested) {
             this.nested = false;
             this.position = this.oldPosition;
             this.positionTarget = this.oldPositionTarget;
@@ -377,7 +387,6 @@ let OverlayMenu = OverlayMenu_1 = class OverlayMenu extends Overlay {
             this.oldPosition = undefined;
             this.oldInteractiveElements = [];
         }
-        super.onClosed();
     }
     /**
      * Selects all data from CollectionComposer
@@ -403,6 +412,7 @@ let OverlayMenu = OverlayMenu_1 = class OverlayMenu extends Overlay {
     opening() {
         const parentMenuItem = OpenedMenusManager.getParentMenuItem(this);
         this.dataDisconnectThrottler.cancel();
+        this.restoreNestedProperties();
         if (parentMenuItem) {
             this.nested = true;
             this.noCancelOnOutsideClick = true;
@@ -424,6 +434,10 @@ let OverlayMenu = OverlayMenu_1 = class OverlayMenu extends Overlay {
                 this.positionTarget = parentMenu === null || parentMenu === void 0 ? void 0 : parentMenu.positionTarget;
                 this.position = parentMenu === null || parentMenu === void 0 ? void 0 : parentMenu.position;
             }
+            // Managers are applied in shouldUpdate lifecycles (as not every property causes re-render)
+            // The process must follow certain order (which is better not to touch)
+            // `applyLock` fixes a problem when changes in properties above where not take into account
+            applyLock();
         }
         this.registerMenu();
     }
@@ -440,7 +454,7 @@ let OverlayMenu = OverlayMenu_1 = class OverlayMenu extends Overlay {
      */
     modificationUpdate() {
         this.constructDataMenus();
-        void this.requestUpdate();
+        this.requestUpdate();
     }
     /**
      * Construct menu items and nested menus from data object
@@ -813,7 +827,7 @@ let OverlayMenu = OverlayMenu_1 = class OverlayMenu extends Overlay {
         menu.transitionStyle = this.transitionStyle;
         menu.noCancelOnOutsideClick = true;
         menu.compact = this.compact;
-        menu.id = getId();
+        menu.id = uuid();
         return menu;
     }
     /**

package/lib/overlay-menu/managers/menu-manager.d.ts

@@ -1,5 +1,5 @@
-import { Item } from '../../item';
-import { OverlayMenu } from '../index';
+import type { Item } from '../../item';
+import { OverlayMenu } from '../index.js';
 /**
  * Overlay menu manager monitors menu nesting and ensures
  * that only a single menu tree can be opened

package/lib/overlay-menu/managers/menu-manager.js

@@ -1,6 +1,6 @@
-import { AfterRenderTaskRunner } from '@refinitiv-ui/utils';
-import { OverlayMenu } from '../index';
-import { getOverlays } from '../../overlay/managers/zindex-manager';
+import { AfterRenderTaskRunner } from '@refinitiv-ui/utils/lib/async.js';
+import { OverlayMenu } from '../index.js';
+import { getOverlays } from '../../overlay/managers/zindex-manager.js';
 /**
  * Overlay menu manager monitors menu nesting and ensures
  * that only a single menu tree can be opened

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

@@ -1,11 +1,11 @@
 import { JSXInterface } from '../jsx';
-import { BasicElement, PropertyValues, TemplateResult, CSSResult } from '@refinitiv-ui/core';
-import '@refinitiv-ui/phrasebook/lib/locale/en/pagination';
+import { BasicElement, PropertyValues, TemplateResult, CSSResultGroup } from '@refinitiv-ui/core';
+import '../button/index.js';
+import '../button-bar/index.js';
+import '../layout/index.js';
+import '../text-field/index.js';
+import '@refinitiv-ui/phrasebook/lib/locale/en/pagination.js';
 import { Translate } from '@refinitiv-ui/translate';
-import '../button';
-import '../button-bar';
-import '../layout';
-import '../text-field';
 /**
  * Used to control and navigate through multiple pages
  * @fires page-changed - Fired when the `page` property is changed
@@ -17,12 +17,12 @@ export declare class Pagination extends BasicElement {
      */
     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 | CSSResult[];
+    static get styles(): CSSResultGroup;
     /**
      * Set current page
      */

package/lib/pagination/index.js

@@ -1,17 +1,15 @@
-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, customElement, property, query } from '@refinitiv-ui/core';
-import '@refinitiv-ui/phrasebook/lib/locale/en/pagination';
+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 { query } from '@refinitiv-ui/core/lib/decorators/query.js';
+import { VERSION } from '../version.js';
+import '../button/index.js';
+import '../button-bar/index.js';
+import '../layout/index.js';
+import '../text-field/index.js';
+import '@refinitiv-ui/phrasebook/lib/locale/en/pagination.js';
 import { translate } from '@refinitiv-ui/translate';
-import '../button';
-import '../button-bar';
-import '../layout';
-import '../text-field';
-import { VERSION } from '../';
 /**
  * Used to control and navigate through multiple pages
  * @fires page-changed - Fired when the `page` property is changed
@@ -44,7 +42,7 @@ let Pagination = class Pagination extends BasicElement {
         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
@@ -221,7 +219,7 @@ let Pagination = class Pagination extends BasicElement {
         const oldPageValue = this.page;
         this.page = this.validatePage(this.page, event.target.value);
         // need this to update input text
-        void this.requestUpdate();
+        this.requestUpdate();
         if (this.page !== oldPageValue) {
             this.notifyPropertyChange('page', this.page);
         }