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

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,21 +25,44 @@ 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 | undefined} x - Set a specific x coordinate
+ * @prop {number | undefined} x - Set a specific x 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=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=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 {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 {
     /**
-     * A `CSSResult` that will be used
+     * Element version number
+     * @returns version number
+     */
+    static get version(): string;
+    /**
+     * 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?;
@@ -58,6 +81,7 @@ export declare class OverlayMenu extends Overlay {
     /**
      * Array of item's values
      * @type {string[]}
+     * @default []
      */
     get values(): string[];
     set values(values: string[]);
@@ -69,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);
@@ -161,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
@@ -352,4 +382,6 @@ declare global {
       'ef-overlay-menu': Partial<OverlayMenu> | JSXInterface.HTMLAttributes<OverlayMenu>;
     }
   }
-}
+}
+
+export {};

package/lib/overlay-menu/index.js

@@ -1,18 +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 { __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
@@ -33,12 +34,30 @@ import { OpenedMenusManager } from './managers/menu-manager';
  * @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.
+ *
+ * @attr {number | undefined} x - Set a specific x coordinate
+ * @prop {number | undefined} x - Set a specific x 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=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=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`
  *
- * @prop {string} [value=] - Returns the first selected item from values.
+ * @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 {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() {
@@ -76,14 +95,6 @@ let OverlayMenu = OverlayMenu_1 = class OverlayMenu extends Overlay {
         /**
         * @ignore
         */
-        this.onItemTap = this.onItemTap.bind(this);
-        /**
-        * @ignore
-        */
-        this.onItemMouseMove = this.onItemMouseMove.bind(this);
-        /**
-        * @ignore
-        */
         this.toItem = this.toItem.bind(this);
         /**
         * @ignore
@@ -91,7 +102,14 @@ let OverlayMenu = OverlayMenu_1 = class OverlayMenu extends Overlay {
         this.modificationUpdate = this.modificationUpdate.bind(this);
     }
     /**
-     * A `CSSResult` that will be used
+     * Element version number
+     * @returns version number
+     */
+    static get version() {
+        return VERSION;
+    }
+    /**
+     * A `CSSResultGroup` that will be used
      * to style the host, slotted children
      * and the internal template of the element.
      * @return CSS template
@@ -113,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();
@@ -123,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.
@@ -138,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;
@@ -166,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
@@ -324,8 +344,8 @@ let OverlayMenu = OverlayMenu_1 = class OverlayMenu extends Overlay {
         super.firstUpdated(changedProperties);
         this.addEventListener('keydown', this.onKeyDown);
         this.addEventListener('keyup', this.onKeyUp);
-        this.renderRoot.addEventListener('tap', this.onItemTap);
-        this.renderRoot.addEventListener('mousemove', this.onItemMouseMove); /* listen shadow root to support data */
+        this.renderRoot.addEventListener('tap', (event) => this.onItemTap(event));
+        this.renderRoot.addEventListener('mousemove', (event) => this.onItemMouseMove(event)); /* listen shadow root to support data */
     }
     /**
      * Called after render life-cycle finished
@@ -350,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;
@@ -359,7 +387,6 @@ let OverlayMenu = OverlayMenu_1 = class OverlayMenu extends Overlay {
             this.oldPosition = undefined;
             this.oldInteractiveElements = [];
         }
-        super.onClosed();
     }
     /**
      * Selects all data from CollectionComposer
@@ -385,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;
@@ -406,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();
     }
@@ -422,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
@@ -795,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;
     }
     /**
@@ -901,4 +933,3 @@ OverlayMenu = OverlayMenu_1 = __decorate([
     })
 ], OverlayMenu);
 export { OverlayMenu };
-//# sourceMappingURL=index.js.map

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
@@ -25,16 +25,17 @@ class OpenedMenusManager {
      * @returns {void}
      */
     static closeOnOutsideOfMenuTap(event) {
+        const manager = OpenedMenusManager;
         const paths = [...event.composedPath()];
         while (paths.length) {
             const node = paths.shift();
-            if (node instanceof OverlayMenu && this.registry.has(node)) {
+            if (node instanceof OverlayMenu && manager.registry.has(node)) {
                 return;
             }
         }
-        const topMenu = this.overlayStack[this.overlayStack.length - 1];
+        const topMenu = manager.overlayStack[manager.overlayStack.length - 1];
         if (topMenu && !topMenu.noCancelOnOutsideClick) {
-            this.setOpened(topMenu, false);
+            manager.setOpened(topMenu, false);
         }
     }
     /**
@@ -114,7 +115,7 @@ class OpenedMenusManager {
     */
     static register(menu) {
         if (!this.registry.size) {
-            document.addEventListener('tapstart', this.closeOnOutsideOfMenuTap.bind(this), {
+            document.addEventListener('tapstart', this.closeOnOutsideOfMenuTap, {
                 capture: true,
                 passive: true
             });
@@ -237,4 +238,3 @@ OpenedMenusManager.registry = new Set();
 OpenedMenusManager.crossMenu = new Map();
 OpenedMenusManager.overlayStack = [];
 export { OpenedMenusManager };
-//# sourceMappingURL=menu-manager.js.map

package/lib/pagination/custom-elements.json

@@ -6,22 +6,14 @@
       "description": "Used to control and navigate through multiple pages",
       "attributes": [
         {
-          "name": "page",
-          "description": "Set current page",
-          "type": "string",
-          "default": "\"1\""
+          "name": "value",
+          "description": "Current page",
+          "type": "string"
         },
         {
-          "name": "page-size",
-          "description": "Number of item per page",
-          "type": "string",
-          "default": "\"10\""
-        },
-        {
-          "name": "total-items",
-          "description": "Total items",
-          "type": "string",
-          "default": "\"10\""
+          "name": "max",
+          "description": "Max page",
+          "type": "string"
         },
         {
           "name": "disabled",
@@ -32,25 +24,16 @@
       ],
       "properties": [
         {
-          "name": "page",
-          "attribute": "page",
-          "description": "Set current page",
-          "type": "string",
-          "default": "\"1\""
-        },
-        {
-          "name": "pageSize",
-          "attribute": "page-size",
-          "description": "Number of item per page",
-          "type": "string",
-          "default": "\"10\""
+          "name": "value",
+          "attribute": "value",
+          "description": "Current page",
+          "type": "string"
         },
         {
-          "name": "totalItems",
-          "attribute": "total-items",
-          "description": "Total items",
-          "type": "string",
-          "default": "\"10\""
+          "name": "max",
+          "attribute": "max",
+          "description": "Max page",
+          "type": "string"
         },
         {
           "name": "disabled",
@@ -62,8 +45,8 @@
       ],
       "events": [
         {
-          "name": "page-changed",
-          "description": "Fired when the `page` property is changed"
+          "name": "value-changed",
+          "description": "Fired when the `value` property is changed"
         }
       ],
       "methods": [

package/lib/pagination/custom-elements.md

@@ -0,0 +1,26 @@
+# ef-pagination
+
+Used to control and navigate through multiple pages
+
+## Properties
+
+| Property   | Attribute  | Type      | Default | Description          |
+|------------|------------|-----------|---------|----------------------|
+| `disabled` | `disabled` | `boolean` | false   | Set state to disable |
+| `max`      | `max`      | `string`  |         | Max page             |
+| `value`    | `value`    | `string`  |         | Current page         |
+
+## 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                                |
+|-----------------|--------------------------------------------|
+| `value-changed` | Fired when the `value` property is changed |