@refinitiv-ui/elements 5.3.3 → 5.7.0

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

@@ -0,0 +1,98 @@
+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
+ */
+declare abstract class OpenedMenusManager {
+    private static focusThrottler;
+    private static registry;
+    private static crossMenu;
+    private static overlayStack;
+    private static activeMenu?;
+    /**
+     * Get the sorted list of overlays by z-index
+     */
+    private static get overlays();
+    /**
+     * Run when tap event happened on document
+     * @param event Tap start event
+     * @returns {void}
+     */
+    private static closeOnOutsideOfMenuTap;
+    /**
+     * Mark active menu with active attribute
+     * This is required for compact menus to change styles
+     * @returns {void}
+     */
+    private static setActiveMenu;
+    /**
+     * A recursion function to close nested menus
+     * @param parent Parent menu
+     * @returns false if opened event is prevented
+     */
+    private static _closeMenuFor;
+    /**
+     * Close all nested menus for parent menu
+     * @param parent Parent menu
+     * @returns false if opened event is prevented
+     */
+    private static closeMenuFor;
+    /**
+     * Set the state of menu
+     * @param menu The menu
+     * @param opened True to make menu opened
+     * @returns false if event is prevented
+     */
+    private static setOpened;
+    /**
+    * Register the menu
+    * Can be called multiple times if menu items collection has changed
+    * @param menu Menu
+    * @returns {void}
+    */
+    static register(menu: OverlayMenu): void;
+    /**
+    * Deregister the menu
+    * @param menu Menu
+    * @returns {void}
+    */
+    static deregister(menu: OverlayMenu): void;
+    /**
+     * Try to open nested menu for provided item. If no item provided, close nested menu
+     * @param parentMenu Parent menu
+     * @param [item] Item to check menu for
+     * @returns {void}
+     */
+    static toggleNestedMenuFor(parentMenu: OverlayMenu, item?: Item): void;
+    /**
+     * Get parent menu from child menu if any
+     * @param childMenu menu to find parent for
+     * @returns parent menu or undefined
+     */
+    static getParentMenu(childMenu: OverlayMenu): OverlayMenu | undefined;
+    /**
+     * Get parent menu item from child menu if any
+     * @param childMenu menu to find parent for
+     * @returns parent menu item or undefined
+     */
+    static getParentMenuItem(childMenu: OverlayMenu): Item | undefined;
+    /**
+     * Check if menu is nested, a.k.a. has parent menu
+     * @param menu Menu to check
+     * @returns true if menu is nested
+     */
+    static isNested(menu: OverlayMenu): boolean;
+    /**
+     * Check if menu is active, a.k.a. it is to of z-index stack
+     * @param menu Menu to check
+     * @returns true if menu is active
+     */
+    static isActiveMenu(menu: OverlayMenu): boolean;
+    /**
+     * Clear all manager items
+     * @returns {void}
+     */
+    static clear(): void;
+}
+export { OpenedMenusManager };

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

@@ -0,0 +1,240 @@
+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
+ */
+class OpenedMenusManager {
+    /**
+     * Get the sorted list of overlays by z-index
+     */
+    static get overlays() {
+        const openedMenus = [];
+        const overlayLayers = getOverlays();
+        overlayLayers.forEach(overlay => {
+            if (overlay instanceof OverlayMenu && this.registry.has(overlay)) {
+                openedMenus.push(overlay);
+            }
+        });
+        return openedMenus;
+    }
+    /**
+     * Run when tap event happened on document
+     * @param event Tap start event
+     * @returns {void}
+     */
+    static closeOnOutsideOfMenuTap(event) {
+        const manager = OpenedMenusManager;
+        const paths = [...event.composedPath()];
+        while (paths.length) {
+            const node = paths.shift();
+            if (node instanceof OverlayMenu && manager.registry.has(node)) {
+                return;
+            }
+        }
+        const topMenu = manager.overlayStack[manager.overlayStack.length - 1];
+        if (topMenu && !topMenu.noCancelOnOutsideClick) {
+            manager.setOpened(topMenu, false);
+        }
+    }
+    /**
+     * Mark active menu with active attribute
+     * This is required for compact menus to change styles
+     * @returns {void}
+     */
+    static setActiveMenu() {
+        if (this.activeMenu) {
+            this.activeMenu.removeAttribute('active');
+        }
+        this.activeMenu = this.overlayStack[0];
+        if (this.activeMenu) {
+            this.activeMenu.setAttribute('active', '');
+        }
+    }
+    /**
+     * A recursion function to close nested menus
+     * @param parent Parent menu
+     * @returns false if opened event is prevented
+     */
+    static _closeMenuFor(parent) {
+        const childMenu = this.crossMenu.get(parent);
+        if (childMenu) {
+            const { menu } = childMenu;
+            if (this.setOpened(menu, false)) {
+                if (this._closeMenuFor(menu)) {
+                    this.crossMenu.delete(parent);
+                    return true;
+                }
+            }
+            return false;
+        }
+        return true;
+    }
+    /**
+     * Close all nested menus for parent menu
+     * @param parent Parent menu
+     * @returns false if opened event is prevented
+     */
+    static closeMenuFor(parent) {
+        if (this._closeMenuFor(parent)) {
+            this.focusThrottler.schedule(() => {
+                parent.opened && parent.focus();
+            });
+            return true;
+        }
+        return false;
+    }
+    /**
+     * Set the state of menu
+     * @param menu The menu
+     * @param opened True to make menu opened
+     * @returns false if event is prevented
+     */
+    static setOpened(menu, opened) {
+        if (menu.opened !== opened) {
+            const event = new CustomEvent('opened-changed', {
+                cancelable: true,
+                detail: {
+                    value: opened
+                }
+            });
+            menu.dispatchEvent(event);
+            if (event.defaultPrevented) {
+                return false;
+            }
+            menu.opened = opened;
+        }
+        return true;
+    }
+    /**
+    * Register the menu
+    * Can be called multiple times if menu items collection has changed
+    * @param menu Menu
+    * @returns {void}
+    */
+    static register(menu) {
+        if (!this.registry.size) {
+            document.addEventListener('tapstart', this.closeOnOutsideOfMenuTap, {
+                capture: true,
+                passive: true
+            });
+        }
+        this.registry.add(menu);
+        this.overlayStack = this.overlays;
+        this.setActiveMenu();
+    }
+    /**
+    * Deregister the menu
+    * @param menu Menu
+    * @returns {void}
+    */
+    static deregister(menu) {
+        const parentMenu = this.getParentMenu(menu);
+        if (!this.closeMenuFor(parentMenu || menu)) {
+            return;
+        }
+        this.crossMenu.delete(menu);
+        this.registry.delete(menu);
+        this.overlayStack = this.overlays;
+        this.setActiveMenu();
+        if (!this.registry.size) {
+            const eventOptions = {
+                capture: true,
+                passive: true
+            };
+            document.removeEventListener('tapstart', this.closeOnOutsideOfMenuTap, eventOptions);
+        }
+    }
+    /**
+     * Try to open nested menu for provided item. If no item provided, close nested menu
+     * @param parentMenu Parent menu
+     * @param [item] Item to check menu for
+     * @returns {void}
+     */
+    static toggleNestedMenuFor(parentMenu, item) {
+        const crossMenu = this.crossMenu.get(parentMenu);
+        if (crossMenu) {
+            if (crossMenu.item === item) { /* same menu */
+                return;
+            }
+            if (!this.closeMenuFor(parentMenu)) {
+                return;
+            }
+        }
+        if (!item) {
+            this.closeMenuFor(parentMenu);
+            return;
+        }
+        const menuId = item.getAttribute('for');
+        if (!menuId) {
+            return;
+        }
+        const menu = parentMenu.getRootNode().getElementById(menuId); /* query within the scope */
+        if (!menu || !(menu instanceof OverlayMenu)) {
+            return;
+        }
+        if (this.setOpened(menu, true)) {
+            this.crossMenu.set(parentMenu, {
+                menu,
+                item
+            });
+        }
+    }
+    /**
+     * Get parent menu from child menu if any
+     * @param childMenu menu to find parent for
+     * @returns parent menu or undefined
+     */
+    static getParentMenu(childMenu) {
+        let parentMenu;
+        this.crossMenu.forEach(({ menu }, key) => {
+            if (menu === childMenu) {
+                parentMenu = key;
+            }
+        });
+        return parentMenu;
+    }
+    /**
+     * Get parent menu item from child menu if any
+     * @param childMenu menu to find parent for
+     * @returns parent menu item or undefined
+     */
+    static getParentMenuItem(childMenu) {
+        let parentItem;
+        this.crossMenu.forEach(({ item, menu }) => {
+            if (menu === childMenu) {
+                parentItem = item;
+            }
+        });
+        return parentItem;
+    }
+    /**
+     * Check if menu is nested, a.k.a. has parent menu
+     * @param menu Menu to check
+     * @returns true if menu is nested
+     */
+    static isNested(menu) {
+        return this.getParentMenu(menu) !== undefined;
+    }
+    /**
+     * Check if menu is active, a.k.a. it is to of z-index stack
+     * @param menu Menu to check
+     * @returns true if menu is active
+     */
+    static isActiveMenu(menu) {
+        return this.overlayStack[0] === menu;
+    }
+    /**
+     * Clear all manager items
+     * @returns {void}
+     */
+    static clear() {
+        this.registry.forEach(menu => this.deregister(menu));
+    }
+}
+OpenedMenusManager.focusThrottler = new AfterRenderTaskRunner();
+OpenedMenusManager.registry = new Set();
+OpenedMenusManager.crossMenu = new Map();
+OpenedMenusManager.overlayStack = [];
+export { OpenedMenusManager };

package/lib/overlay-menu/themes/halo/dark/index.js

@@ -0,0 +1,5 @@
+import '@refinitiv-ui/elements/lib/item/themes/halo/dark';
+import '@refinitiv-ui/elements/lib/icon/themes/halo/dark';
+import '@refinitiv-ui/elements/lib/overlay/themes/halo/dark';
+
+elf.customStyles.define('ef-overlay-menu', ':host([compact]){min-width:250px}:host [part=menu-back]{border-bottom:1px solid #404040}:host [part=menu-back]:hover{background-color:#334bff;color:#fff}::-webkit-scrollbar{width:8px;height:8px}::-webkit-scrollbar-button{background:0 0/1px 2px no-repeat #1a1a1a;height:16px;width:16px;display:block}::-webkit-scrollbar-thumb{background:#595959;border-radius:0;border:1px solid #1a1a1a}::-webkit-scrollbar-thumb:hover{background:#334bff}::-webkit-scrollbar-thumb:active{background:#0f1e8a}::-webkit-scrollbar-track{background:#1a1a1a}::-webkit-scrollbar-corner{background:#1a1a1a}::-webkit-scrollbar-button:end:decrement,::-webkit-scrollbar-button:start:increment{display:none}::-webkit-scrollbar-button:horizontal{background-size:2px 1px}::-webkit-scrollbar-button:vertical:start:decrement{background-image:linear-gradient(#595959,#595959),linear-gradient(#595959,#595959),linear-gradient(#595959,#595959),linear-gradient(#595959,#595959),linear-gradient(#595959,#595959),linear-gradient(#595959,#595959),linear-gradient(#595959,#595959);background-position:6.5px 8px,5.5px 7px,4.5px 6px,3.5px 5px,2.5px 6px,1.5px 7px,.5px 8px}::-webkit-scrollbar-button:vertical:start:decrement:hover{background-image:linear-gradient(#334bff,#334bff),linear-gradient(#334bff,#334bff),linear-gradient(#334bff,#334bff),linear-gradient(#334bff,#334bff),linear-gradient(#334bff,#334bff),linear-gradient(#334bff,#334bff),linear-gradient(#334bff,#334bff);background-position:6.5px 8px,5.5px 7px,4.5px 6px,3.5px 5px,2.5px 6px,1.5px 7px,.5px 8px}::-webkit-scrollbar-button:vertical:start:decrement:active{background-image:linear-gradient(#0f1e8a,#0f1e8a),linear-gradient(#0f1e8a,#0f1e8a),linear-gradient(#0f1e8a,#0f1e8a),linear-gradient(#0f1e8a,#0f1e8a),linear-gradient(#0f1e8a,#0f1e8a),linear-gradient(#0f1e8a,#0f1e8a),linear-gradient(#0f1e8a,#0f1e8a);background-position:6.5px 8px,5.5px 7px,4.5px 6px,3.5px 5px,2.5px 6px,1.5px 7px,.5px 8px}::-webkit-scrollbar-button:vertical:end:increment{background-image:linear-gradient(#595959,#595959),linear-gradient(#595959,#595959),linear-gradient(#595959,#595959),linear-gradient(#595959,#595959),linear-gradient(#595959,#595959),linear-gradient(#595959,#595959),linear-gradient(#595959,#595959);background-position:6.5px 6px,5.5px 7px,4.5px 8px,3.5px 9px,2.5px 8px,1.5px 7px,.5px 6px}::-webkit-scrollbar-button:vertical:end:increment:hover{background-image:linear-gradient(#334bff,#334bff),linear-gradient(#334bff,#334bff),linear-gradient(#334bff,#334bff),linear-gradient(#334bff,#334bff),linear-gradient(#334bff,#334bff),linear-gradient(#334bff,#334bff),linear-gradient(#334bff,#334bff);background-position:6.5px 6px,5.5px 7px,4.5px 8px,3.5px 9px,2.5px 8px,1.5px 7px,.5px 6px}::-webkit-scrollbar-button:vertical:end:increment:active{background-image:linear-gradient(#0f1e8a,#0f1e8a),linear-gradient(#0f1e8a,#0f1e8a),linear-gradient(#0f1e8a,#0f1e8a),linear-gradient(#0f1e8a,#0f1e8a),linear-gradient(#0f1e8a,#0f1e8a),linear-gradient(#0f1e8a,#0f1e8a),linear-gradient(#0f1e8a,#0f1e8a);background-position:6.5px 6px,5.5px 7px,4.5px 8px,3.5px 9px,2.5px 8px,1.5px 7px,.5px 6px}::-webkit-scrollbar-button:horizontal:start:decrement{background-image:linear-gradient(#595959,#595959),linear-gradient(#595959,#595959),linear-gradient(#595959,#595959),linear-gradient(#595959,#595959),linear-gradient(#595959,#595959),linear-gradient(#595959,#595959),linear-gradient(#595959,#595959);background-position:8px 6.5px,7px 5.5px,6px 4.5px,5px 3.5px,6px 2.5px,7px 1.5px,8px .5px}::-webkit-scrollbar-button:horizontal:start:decrement:hover{background-image:linear-gradient(#334bff,#334bff),linear-gradient(#334bff,#334bff),linear-gradient(#334bff,#334bff),linear-gradient(#334bff,#334bff),linear-gradient(#334bff,#334bff),linear-gradient(#334bff,#334bff),linear-gradient(#334bff,#334bff);background-position:8px 6.5px,7px 5.5px,6px 4.5px,5px 3.5px,6px 2.5px,7px 1.5px,8px .5px}::-webkit-scrollbar-button:horizontal:start:decrement:active{background-image:linear-gradient(#0f1e8a,#0f1e8a),linear-gradient(#0f1e8a,#0f1e8a),linear-gradient(#0f1e8a,#0f1e8a),linear-gradient(#0f1e8a,#0f1e8a),linear-gradient(#0f1e8a,#0f1e8a),linear-gradient(#0f1e8a,#0f1e8a),linear-gradient(#0f1e8a,#0f1e8a);background-position:8px 6.5px,7px 5.5px,6px 4.5px,5px 3.5px,6px 2.5px,7px 1.5px,8px .5px}::-webkit-scrollbar-button:horizontal:end:increment{background-image:linear-gradient(#595959,#595959),linear-gradient(#595959,#595959),linear-gradient(#595959,#595959),linear-gradient(#595959,#595959),linear-gradient(#595959,#595959),linear-gradient(#595959,#595959),linear-gradient(#595959,#595959);background-position:6px 6.5px,7px 5.5px,8px 4.5px,9px 3.5px,8px 2.5px,7px 1.5px,6px .5px}::-webkit-scrollbar-button:horizontal:end:increment:hover{background-image:linear-gradient(#334bff,#334bff),linear-gradient(#334bff,#334bff),linear-gradient(#334bff,#334bff),linear-gradient(#334bff,#334bff),linear-gradient(#334bff,#334bff),linear-gradient(#334bff,#334bff),linear-gradient(#334bff,#334bff);background-position:6px 6.5px,7px 5.5px,8px 4.5px,9px 3.5px,8px 2.5px,7px 1.5px,6px .5px}::-webkit-scrollbar-button:horizontal:end:increment:active{background-image:linear-gradient(#0f1e8a,#0f1e8a),linear-gradient(#0f1e8a,#0f1e8a),linear-gradient(#0f1e8a,#0f1e8a),linear-gradient(#0f1e8a,#0f1e8a),linear-gradient(#0f1e8a,#0f1e8a),linear-gradient(#0f1e8a,#0f1e8a),linear-gradient(#0f1e8a,#0f1e8a);background-position:6px 6.5px,7px 5.5px,8px 4.5px,9px 3.5px,8px 2.5px,7px 1.5px,6px .5px}:host{min-width:150px;max-width:300px;scrollbar-face-color:#595959;scrollbar-shadow-color:#595959;scrollbar-highlight-color:#595959;scrollbar-arrow-color:#595959;scrollbar-track-color:#1a1a1a;scrollbar-3dlight-color:#1a1a1a;scrollbar-darkshadow-color:#1a1a1a;scrollbar-color:#595959 #1a1a1a;background-color:#262626;border:1px solid #334bff;padding:4px 0}:host ::slotted(ef-item),:host ef-item{padding-left:12px}:host([nested]:not([compact])){margin:-5px 2px 0}');

package/lib/overlay-menu/themes/halo/light/index.js

@@ -0,0 +1,5 @@
+import '@refinitiv-ui/elements/lib/item/themes/halo/light';
+import '@refinitiv-ui/elements/lib/icon/themes/halo/light';
+import '@refinitiv-ui/elements/lib/overlay/themes/halo/light';
+
+elf.customStyles.define('ef-overlay-menu', ':host([compact]){min-width:250px}:host [part=menu-back]{border-bottom:1px solid #d9d9d9}:host [part=menu-back]:hover{background-color:#334bff;color:#fff}::-webkit-scrollbar{width:8px;height:8px}::-webkit-scrollbar-button{background:0 0/1px 2px no-repeat #f2f2f2;height:16px;width:16px;display:block}::-webkit-scrollbar-thumb{background:#999;border-radius:0;border:1px solid #f2f2f2}::-webkit-scrollbar-thumb:hover{background:#334bff}::-webkit-scrollbar-thumb:active{background:#0f1e8a}::-webkit-scrollbar-track{background:#f2f2f2}::-webkit-scrollbar-corner{background:#f2f2f2}::-webkit-scrollbar-button:end:decrement,::-webkit-scrollbar-button:start:increment{display:none}::-webkit-scrollbar-button:horizontal{background-size:2px 1px}::-webkit-scrollbar-button:vertical:start:decrement{background-image:linear-gradient(#999,#999),linear-gradient(#999,#999),linear-gradient(#999,#999),linear-gradient(#999,#999),linear-gradient(#999,#999),linear-gradient(#999,#999),linear-gradient(#999,#999);background-position:6.5px 8px,5.5px 7px,4.5px 6px,3.5px 5px,2.5px 6px,1.5px 7px,.5px 8px}::-webkit-scrollbar-button:vertical:start:decrement:hover{background-image:linear-gradient(#334bff,#334bff),linear-gradient(#334bff,#334bff),linear-gradient(#334bff,#334bff),linear-gradient(#334bff,#334bff),linear-gradient(#334bff,#334bff),linear-gradient(#334bff,#334bff),linear-gradient(#334bff,#334bff);background-position:6.5px 8px,5.5px 7px,4.5px 6px,3.5px 5px,2.5px 6px,1.5px 7px,.5px 8px}::-webkit-scrollbar-button:vertical:start:decrement:active{background-image:linear-gradient(#0f1e8a,#0f1e8a),linear-gradient(#0f1e8a,#0f1e8a),linear-gradient(#0f1e8a,#0f1e8a),linear-gradient(#0f1e8a,#0f1e8a),linear-gradient(#0f1e8a,#0f1e8a),linear-gradient(#0f1e8a,#0f1e8a),linear-gradient(#0f1e8a,#0f1e8a);background-position:6.5px 8px,5.5px 7px,4.5px 6px,3.5px 5px,2.5px 6px,1.5px 7px,.5px 8px}::-webkit-scrollbar-button:vertical:end:increment{background-image:linear-gradient(#999,#999),linear-gradient(#999,#999),linear-gradient(#999,#999),linear-gradient(#999,#999),linear-gradient(#999,#999),linear-gradient(#999,#999),linear-gradient(#999,#999);background-position:6.5px 6px,5.5px 7px,4.5px 8px,3.5px 9px,2.5px 8px,1.5px 7px,.5px 6px}::-webkit-scrollbar-button:vertical:end:increment:hover{background-image:linear-gradient(#334bff,#334bff),linear-gradient(#334bff,#334bff),linear-gradient(#334bff,#334bff),linear-gradient(#334bff,#334bff),linear-gradient(#334bff,#334bff),linear-gradient(#334bff,#334bff),linear-gradient(#334bff,#334bff);background-position:6.5px 6px,5.5px 7px,4.5px 8px,3.5px 9px,2.5px 8px,1.5px 7px,.5px 6px}::-webkit-scrollbar-button:vertical:end:increment:active{background-image:linear-gradient(#0f1e8a,#0f1e8a),linear-gradient(#0f1e8a,#0f1e8a),linear-gradient(#0f1e8a,#0f1e8a),linear-gradient(#0f1e8a,#0f1e8a),linear-gradient(#0f1e8a,#0f1e8a),linear-gradient(#0f1e8a,#0f1e8a),linear-gradient(#0f1e8a,#0f1e8a);background-position:6.5px 6px,5.5px 7px,4.5px 8px,3.5px 9px,2.5px 8px,1.5px 7px,.5px 6px}::-webkit-scrollbar-button:horizontal:start:decrement{background-image:linear-gradient(#999,#999),linear-gradient(#999,#999),linear-gradient(#999,#999),linear-gradient(#999,#999),linear-gradient(#999,#999),linear-gradient(#999,#999),linear-gradient(#999,#999);background-position:8px 6.5px,7px 5.5px,6px 4.5px,5px 3.5px,6px 2.5px,7px 1.5px,8px .5px}::-webkit-scrollbar-button:horizontal:start:decrement:hover{background-image:linear-gradient(#334bff,#334bff),linear-gradient(#334bff,#334bff),linear-gradient(#334bff,#334bff),linear-gradient(#334bff,#334bff),linear-gradient(#334bff,#334bff),linear-gradient(#334bff,#334bff),linear-gradient(#334bff,#334bff);background-position:8px 6.5px,7px 5.5px,6px 4.5px,5px 3.5px,6px 2.5px,7px 1.5px,8px .5px}::-webkit-scrollbar-button:horizontal:start:decrement:active{background-image:linear-gradient(#0f1e8a,#0f1e8a),linear-gradient(#0f1e8a,#0f1e8a),linear-gradient(#0f1e8a,#0f1e8a),linear-gradient(#0f1e8a,#0f1e8a),linear-gradient(#0f1e8a,#0f1e8a),linear-gradient(#0f1e8a,#0f1e8a),linear-gradient(#0f1e8a,#0f1e8a);background-position:8px 6.5px,7px 5.5px,6px 4.5px,5px 3.5px,6px 2.5px,7px 1.5px,8px .5px}::-webkit-scrollbar-button:horizontal:end:increment{background-image:linear-gradient(#999,#999),linear-gradient(#999,#999),linear-gradient(#999,#999),linear-gradient(#999,#999),linear-gradient(#999,#999),linear-gradient(#999,#999),linear-gradient(#999,#999);background-position:6px 6.5px,7px 5.5px,8px 4.5px,9px 3.5px,8px 2.5px,7px 1.5px,6px .5px}::-webkit-scrollbar-button:horizontal:end:increment:hover{background-image:linear-gradient(#334bff,#334bff),linear-gradient(#334bff,#334bff),linear-gradient(#334bff,#334bff),linear-gradient(#334bff,#334bff),linear-gradient(#334bff,#334bff),linear-gradient(#334bff,#334bff),linear-gradient(#334bff,#334bff);background-position:6px 6.5px,7px 5.5px,8px 4.5px,9px 3.5px,8px 2.5px,7px 1.5px,6px .5px}::-webkit-scrollbar-button:horizontal:end:increment:active{background-image:linear-gradient(#0f1e8a,#0f1e8a),linear-gradient(#0f1e8a,#0f1e8a),linear-gradient(#0f1e8a,#0f1e8a),linear-gradient(#0f1e8a,#0f1e8a),linear-gradient(#0f1e8a,#0f1e8a),linear-gradient(#0f1e8a,#0f1e8a),linear-gradient(#0f1e8a,#0f1e8a);background-position:6px 6.5px,7px 5.5px,8px 4.5px,9px 3.5px,8px 2.5px,7px 1.5px,6px .5px}:host{min-width:150px;max-width:300px;scrollbar-face-color:#999;scrollbar-shadow-color:#999;scrollbar-highlight-color:#999;scrollbar-arrow-color:#999;scrollbar-track-color:#f2f2f2;scrollbar-3dlight-color:#f2f2f2;scrollbar-darkshadow-color:#f2f2f2;scrollbar-color:#999 #f2f2f2;background-color:#f2f2f2;border:1px solid #334bff;padding:4px 0}:host ::slotted(ef-item),:host ef-item{padding-left:12px}:host([nested]:not([compact])){margin:-5px 2px 0}');

package/lib/overlay-menu/themes/solar/charcoal/index.js

@@ -0,0 +1,5 @@
+import '@refinitiv-ui/elements/lib/item/themes/solar/charcoal';
+import '@refinitiv-ui/elements/lib/icon/themes/solar/charcoal';
+import '@refinitiv-ui/elements/lib/overlay/themes/solar/charcoal';
+
+elf.customStyles.define('ef-overlay-menu', ':host{min-width:150px;max-width:300px;scrollbar-face-color:#666570;scrollbar-shadow-color:#666570;scrollbar-highlight-color:#666570;scrollbar-arrow-color:#666570;scrollbar-track-color:#2e2e33;scrollbar-3dlight-color:#2e2e33;scrollbar-darkshadow-color:#2e2e33;scrollbar-color:#666570 #2e2e33;background-color:#3c3c42}:host([compact]){min-width:250px}:host [part=menu-back]{border-bottom:1px solid #2e2e33}:host [part=menu-back]:hover{background-color:rgba(255,255,255,.1)}::-webkit-scrollbar{width:13px;height:13px}::-webkit-scrollbar-button{background:0 0/1px 2px no-repeat #2e2e33;height:12px;width:12px;display:block}::-webkit-scrollbar-thumb{background:#666570;border-radius:7px;border:2px solid #2e2e33}::-webkit-scrollbar-thumb:hover{background:#e2e2e2}::-webkit-scrollbar-thumb:active{background:#f93}::-webkit-scrollbar-track{background:#2e2e33}::-webkit-scrollbar-corner{background:#2e2e33}::-webkit-scrollbar-button:end:decrement,::-webkit-scrollbar-button:start:increment{display:none}::-webkit-scrollbar-button:horizontal{background-size:2px 1px}::-webkit-scrollbar-button:vertical:start:decrement{background-image:linear-gradient(#666570,#666570),linear-gradient(#666570,#666570),linear-gradient(#666570,#666570),linear-gradient(#666570,#666570),linear-gradient(#666570,#666570),linear-gradient(#666570,#666570),linear-gradient(#666570,#666570),linear-gradient(#666570,#666570),linear-gradient(#666570,#666570);background-position:10px 6.5px,9px 5.5px,8px 4.5px,7px 3.5px,6px 2.5px,5px 3.5px,4px 4.5px,3px 5.5px,2px 6.5px}::-webkit-scrollbar-button:vertical:start:decrement:hover{background-image:linear-gradient(#e2e2e2,#e2e2e2),linear-gradient(#e2e2e2,#e2e2e2),linear-gradient(#e2e2e2,#e2e2e2),linear-gradient(#e2e2e2,#e2e2e2),linear-gradient(#e2e2e2,#e2e2e2),linear-gradient(#e2e2e2,#e2e2e2),linear-gradient(#e2e2e2,#e2e2e2),linear-gradient(#e2e2e2,#e2e2e2),linear-gradient(#e2e2e2,#e2e2e2);background-position:10px 6.5px,9px 5.5px,8px 4.5px,7px 3.5px,6px 2.5px,5px 3.5px,4px 4.5px,3px 5.5px,2px 6.5px}::-webkit-scrollbar-button:vertical:start:decrement:active{background-image:linear-gradient(#f93,#f93),linear-gradient(#f93,#f93),linear-gradient(#f93,#f93),linear-gradient(#f93,#f93),linear-gradient(#f93,#f93),linear-gradient(#f93,#f93),linear-gradient(#f93,#f93),linear-gradient(#f93,#f93),linear-gradient(#f93,#f93);background-position:10px 6.5px,9px 5.5px,8px 4.5px,7px 3.5px,6px 2.5px,5px 3.5px,4px 4.5px,3px 5.5px,2px 6.5px}::-webkit-scrollbar-button:vertical:end:increment{background-image:linear-gradient(#666570,#666570),linear-gradient(#666570,#666570),linear-gradient(#666570,#666570),linear-gradient(#666570,#666570),linear-gradient(#666570,#666570),linear-gradient(#666570,#666570),linear-gradient(#666570,#666570),linear-gradient(#666570,#666570),linear-gradient(#666570,#666570);background-position:10px 3.5px,9px 4.5px,8px 5.5px,7px 6.5px,6px 7.5px,5px 6.5px,4px 5.5px,3px 4.5px,2px 3.5px}::-webkit-scrollbar-button:vertical:end:increment:hover{background-image:linear-gradient(#e2e2e2,#e2e2e2),linear-gradient(#e2e2e2,#e2e2e2),linear-gradient(#e2e2e2,#e2e2e2),linear-gradient(#e2e2e2,#e2e2e2),linear-gradient(#e2e2e2,#e2e2e2),linear-gradient(#e2e2e2,#e2e2e2),linear-gradient(#e2e2e2,#e2e2e2),linear-gradient(#e2e2e2,#e2e2e2),linear-gradient(#e2e2e2,#e2e2e2);background-position:10px 3.5px,9px 4.5px,8px 5.5px,7px 6.5px,6px 7.5px,5px 6.5px,4px 5.5px,3px 4.5px,2px 3.5px}::-webkit-scrollbar-button:vertical:end:increment:active{background-image:linear-gradient(#f93,#f93),linear-gradient(#f93,#f93),linear-gradient(#f93,#f93),linear-gradient(#f93,#f93),linear-gradient(#f93,#f93),linear-gradient(#f93,#f93),linear-gradient(#f93,#f93),linear-gradient(#f93,#f93),linear-gradient(#f93,#f93);background-position:10px 3.5px,9px 4.5px,8px 5.5px,7px 6.5px,6px 7.5px,5px 6.5px,4px 5.5px,3px 4.5px,2px 3.5px}::-webkit-scrollbar-button:horizontal:start:decrement{background-image:linear-gradient(#666570,#666570),linear-gradient(#666570,#666570),linear-gradient(#666570,#666570),linear-gradient(#666570,#666570),linear-gradient(#666570,#666570),linear-gradient(#666570,#666570),linear-gradient(#666570,#666570),linear-gradient(#666570,#666570),linear-gradient(#666570,#666570);background-position:6.5px 10px,5.5px 9px,4.5px 8px,3.5px 7px,2.5px 6px,3.5px 5px,4.5px 4px,5.5px 3px,6.5px 2px}::-webkit-scrollbar-button:horizontal:start:decrement:hover{background-image:linear-gradient(#e2e2e2,#e2e2e2),linear-gradient(#e2e2e2,#e2e2e2),linear-gradient(#e2e2e2,#e2e2e2),linear-gradient(#e2e2e2,#e2e2e2),linear-gradient(#e2e2e2,#e2e2e2),linear-gradient(#e2e2e2,#e2e2e2),linear-gradient(#e2e2e2,#e2e2e2),linear-gradient(#e2e2e2,#e2e2e2),linear-gradient(#e2e2e2,#e2e2e2);background-position:6.5px 10px,5.5px 9px,4.5px 8px,3.5px 7px,2.5px 6px,3.5px 5px,4.5px 4px,5.5px 3px,6.5px 2px}::-webkit-scrollbar-button:horizontal:start:decrement:active{background-image:linear-gradient(#f93,#f93),linear-gradient(#f93,#f93),linear-gradient(#f93,#f93),linear-gradient(#f93,#f93),linear-gradient(#f93,#f93),linear-gradient(#f93,#f93),linear-gradient(#f93,#f93),linear-gradient(#f93,#f93),linear-gradient(#f93,#f93);background-position:6.5px 10px,5.5px 9px,4.5px 8px,3.5px 7px,2.5px 6px,3.5px 5px,4.5px 4px,5.5px 3px,6.5px 2px}::-webkit-scrollbar-button:horizontal:end:increment{background-image:linear-gradient(#666570,#666570),linear-gradient(#666570,#666570),linear-gradient(#666570,#666570),linear-gradient(#666570,#666570),linear-gradient(#666570,#666570),linear-gradient(#666570,#666570),linear-gradient(#666570,#666570),linear-gradient(#666570,#666570),linear-gradient(#666570,#666570);background-position:3.5px 10px,4.5px 9px,5.5px 8px,6.5px 7px,7.5px 6px,6.5px 5px,5.5px 4px,4.5px 3px,3.5px 2px}::-webkit-scrollbar-button:horizontal:end:increment:hover{background-image:linear-gradient(#e2e2e2,#e2e2e2),linear-gradient(#e2e2e2,#e2e2e2),linear-gradient(#e2e2e2,#e2e2e2),linear-gradient(#e2e2e2,#e2e2e2),linear-gradient(#e2e2e2,#e2e2e2),linear-gradient(#e2e2e2,#e2e2e2),linear-gradient(#e2e2e2,#e2e2e2),linear-gradient(#e2e2e2,#e2e2e2),linear-gradient(#e2e2e2,#e2e2e2);background-position:3.5px 10px,4.5px 9px,5.5px 8px,6.5px 7px,7.5px 6px,6.5px 5px,5.5px 4px,4.5px 3px,3.5px 2px}::-webkit-scrollbar-button:horizontal:end:increment:active{background-image:linear-gradient(#f93,#f93),linear-gradient(#f93,#f93),linear-gradient(#f93,#f93),linear-gradient(#f93,#f93),linear-gradient(#f93,#f93),linear-gradient(#f93,#f93),linear-gradient(#f93,#f93),linear-gradient(#f93,#f93),linear-gradient(#f93,#f93);background-position:3.5px 10px,4.5px 9px,5.5px 8px,6.5px 7px,7.5px 6px,6.5px 5px,5.5px 4px,4.5px 3px,3.5px 2px}');

package/lib/overlay-menu/themes/solar/pearl/index.js

@@ -0,0 +1,5 @@
+import '@refinitiv-ui/elements/lib/item/themes/solar/pearl';
+import '@refinitiv-ui/elements/lib/icon/themes/solar/pearl';
+import '@refinitiv-ui/elements/lib/overlay/themes/solar/pearl';
+
+elf.customStyles.define('ef-overlay-menu', ':host{min-width:150px;max-width:300px;scrollbar-face-color:#8a8a96;scrollbar-shadow-color:#8a8a96;scrollbar-highlight-color:#8a8a96;scrollbar-arrow-color:#8a8a96;scrollbar-track-color:#fff;scrollbar-3dlight-color:#fff;scrollbar-darkshadow-color:#fff;scrollbar-color:#8a8a96 #fff;background-color:#fafbfc}:host([compact]){min-width:250px}:host [part=menu-back]{border-bottom:1px solid #a9afba}:host [part=menu-back]:hover{background-color:rgba(0,0,0,.08)}::-webkit-scrollbar{width:13px;height:13px}::-webkit-scrollbar-button{background:0 0/1px 2px no-repeat #fff;height:12px;width:12px;display:block}::-webkit-scrollbar-thumb{background:#8a8a96;border-radius:7px;border:2px solid #fff}::-webkit-scrollbar-thumb:hover{background:#a9afba}::-webkit-scrollbar-thumb:active{background:#ee7600}::-webkit-scrollbar-track{background:#fff}::-webkit-scrollbar-corner{background:#fff}::-webkit-scrollbar-button:end:decrement,::-webkit-scrollbar-button:start:increment{display:none}::-webkit-scrollbar-button:horizontal{background-size:2px 1px}::-webkit-scrollbar-button:vertical:start:decrement{background-image:linear-gradient(#8a8a96,#8a8a96),linear-gradient(#8a8a96,#8a8a96),linear-gradient(#8a8a96,#8a8a96),linear-gradient(#8a8a96,#8a8a96),linear-gradient(#8a8a96,#8a8a96),linear-gradient(#8a8a96,#8a8a96),linear-gradient(#8a8a96,#8a8a96),linear-gradient(#8a8a96,#8a8a96),linear-gradient(#8a8a96,#8a8a96);background-position:10px 6.5px,9px 5.5px,8px 4.5px,7px 3.5px,6px 2.5px,5px 3.5px,4px 4.5px,3px 5.5px,2px 6.5px}::-webkit-scrollbar-button:vertical:start:decrement:hover{background-image:linear-gradient(#a9afba,#a9afba),linear-gradient(#a9afba,#a9afba),linear-gradient(#a9afba,#a9afba),linear-gradient(#a9afba,#a9afba),linear-gradient(#a9afba,#a9afba),linear-gradient(#a9afba,#a9afba),linear-gradient(#a9afba,#a9afba),linear-gradient(#a9afba,#a9afba),linear-gradient(#a9afba,#a9afba);background-position:10px 6.5px,9px 5.5px,8px 4.5px,7px 3.5px,6px 2.5px,5px 3.5px,4px 4.5px,3px 5.5px,2px 6.5px}::-webkit-scrollbar-button:vertical:start:decrement:active{background-image:linear-gradient(#ee7600,#ee7600),linear-gradient(#ee7600,#ee7600),linear-gradient(#ee7600,#ee7600),linear-gradient(#ee7600,#ee7600),linear-gradient(#ee7600,#ee7600),linear-gradient(#ee7600,#ee7600),linear-gradient(#ee7600,#ee7600),linear-gradient(#ee7600,#ee7600),linear-gradient(#ee7600,#ee7600);background-position:10px 6.5px,9px 5.5px,8px 4.5px,7px 3.5px,6px 2.5px,5px 3.5px,4px 4.5px,3px 5.5px,2px 6.5px}::-webkit-scrollbar-button:vertical:end:increment{background-image:linear-gradient(#8a8a96,#8a8a96),linear-gradient(#8a8a96,#8a8a96),linear-gradient(#8a8a96,#8a8a96),linear-gradient(#8a8a96,#8a8a96),linear-gradient(#8a8a96,#8a8a96),linear-gradient(#8a8a96,#8a8a96),linear-gradient(#8a8a96,#8a8a96),linear-gradient(#8a8a96,#8a8a96),linear-gradient(#8a8a96,#8a8a96);background-position:10px 3.5px,9px 4.5px,8px 5.5px,7px 6.5px,6px 7.5px,5px 6.5px,4px 5.5px,3px 4.5px,2px 3.5px}::-webkit-scrollbar-button:vertical:end:increment:hover{background-image:linear-gradient(#a9afba,#a9afba),linear-gradient(#a9afba,#a9afba),linear-gradient(#a9afba,#a9afba),linear-gradient(#a9afba,#a9afba),linear-gradient(#a9afba,#a9afba),linear-gradient(#a9afba,#a9afba),linear-gradient(#a9afba,#a9afba),linear-gradient(#a9afba,#a9afba),linear-gradient(#a9afba,#a9afba);background-position:10px 3.5px,9px 4.5px,8px 5.5px,7px 6.5px,6px 7.5px,5px 6.5px,4px 5.5px,3px 4.5px,2px 3.5px}::-webkit-scrollbar-button:vertical:end:increment:active{background-image:linear-gradient(#ee7600,#ee7600),linear-gradient(#ee7600,#ee7600),linear-gradient(#ee7600,#ee7600),linear-gradient(#ee7600,#ee7600),linear-gradient(#ee7600,#ee7600),linear-gradient(#ee7600,#ee7600),linear-gradient(#ee7600,#ee7600),linear-gradient(#ee7600,#ee7600),linear-gradient(#ee7600,#ee7600);background-position:10px 3.5px,9px 4.5px,8px 5.5px,7px 6.5px,6px 7.5px,5px 6.5px,4px 5.5px,3px 4.5px,2px 3.5px}::-webkit-scrollbar-button:horizontal:start:decrement{background-image:linear-gradient(#8a8a96,#8a8a96),linear-gradient(#8a8a96,#8a8a96),linear-gradient(#8a8a96,#8a8a96),linear-gradient(#8a8a96,#8a8a96),linear-gradient(#8a8a96,#8a8a96),linear-gradient(#8a8a96,#8a8a96),linear-gradient(#8a8a96,#8a8a96),linear-gradient(#8a8a96,#8a8a96),linear-gradient(#8a8a96,#8a8a96);background-position:6.5px 10px,5.5px 9px,4.5px 8px,3.5px 7px,2.5px 6px,3.5px 5px,4.5px 4px,5.5px 3px,6.5px 2px}::-webkit-scrollbar-button:horizontal:start:decrement:hover{background-image:linear-gradient(#a9afba,#a9afba),linear-gradient(#a9afba,#a9afba),linear-gradient(#a9afba,#a9afba),linear-gradient(#a9afba,#a9afba),linear-gradient(#a9afba,#a9afba),linear-gradient(#a9afba,#a9afba),linear-gradient(#a9afba,#a9afba),linear-gradient(#a9afba,#a9afba),linear-gradient(#a9afba,#a9afba);background-position:6.5px 10px,5.5px 9px,4.5px 8px,3.5px 7px,2.5px 6px,3.5px 5px,4.5px 4px,5.5px 3px,6.5px 2px}::-webkit-scrollbar-button:horizontal:start:decrement:active{background-image:linear-gradient(#ee7600,#ee7600),linear-gradient(#ee7600,#ee7600),linear-gradient(#ee7600,#ee7600),linear-gradient(#ee7600,#ee7600),linear-gradient(#ee7600,#ee7600),linear-gradient(#ee7600,#ee7600),linear-gradient(#ee7600,#ee7600),linear-gradient(#ee7600,#ee7600),linear-gradient(#ee7600,#ee7600);background-position:6.5px 10px,5.5px 9px,4.5px 8px,3.5px 7px,2.5px 6px,3.5px 5px,4.5px 4px,5.5px 3px,6.5px 2px}::-webkit-scrollbar-button:horizontal:end:increment{background-image:linear-gradient(#8a8a96,#8a8a96),linear-gradient(#8a8a96,#8a8a96),linear-gradient(#8a8a96,#8a8a96),linear-gradient(#8a8a96,#8a8a96),linear-gradient(#8a8a96,#8a8a96),linear-gradient(#8a8a96,#8a8a96),linear-gradient(#8a8a96,#8a8a96),linear-gradient(#8a8a96,#8a8a96),linear-gradient(#8a8a96,#8a8a96);background-position:3.5px 10px,4.5px 9px,5.5px 8px,6.5px 7px,7.5px 6px,6.5px 5px,5.5px 4px,4.5px 3px,3.5px 2px}::-webkit-scrollbar-button:horizontal:end:increment:hover{background-image:linear-gradient(#a9afba,#a9afba),linear-gradient(#a9afba,#a9afba),linear-gradient(#a9afba,#a9afba),linear-gradient(#a9afba,#a9afba),linear-gradient(#a9afba,#a9afba),linear-gradient(#a9afba,#a9afba),linear-gradient(#a9afba,#a9afba),linear-gradient(#a9afba,#a9afba),linear-gradient(#a9afba,#a9afba);background-position:3.5px 10px,4.5px 9px,5.5px 8px,6.5px 7px,7.5px 6px,6.5px 5px,5.5px 4px,4.5px 3px,3.5px 2px}::-webkit-scrollbar-button:horizontal:end:increment:active{background-image:linear-gradient(#ee7600,#ee7600),linear-gradient(#ee7600,#ee7600),linear-gradient(#ee7600,#ee7600),linear-gradient(#ee7600,#ee7600),linear-gradient(#ee7600,#ee7600),linear-gradient(#ee7600,#ee7600),linear-gradient(#ee7600,#ee7600),linear-gradient(#ee7600,#ee7600),linear-gradient(#ee7600,#ee7600);background-position:3.5px 10px,4.5px 9px,5.5px 8px,6.5px 7px,7.5px 6px,6.5px 5px,5.5px 4px,4.5px 3px,3.5px 2px}');

package/lib/pagination/custom-elements.json

@@ -0,0 +1,93 @@
+{
+  "version": "experimental",
+  "tags": [
+    {
+      "name": "ef-pagination",
+      "description": "Used to control and navigate through multiple pages",
+      "attributes": [
+        {
+          "name": "page",
+          "description": "Set current page",
+          "type": "string",
+          "default": "\"1\""
+        },
+        {
+          "name": "page-size",
+          "description": "Number of item per page",
+          "type": "string",
+          "default": "\"10\""
+        },
+        {
+          "name": "total-items",
+          "description": "Total items",
+          "type": "string",
+          "default": "\"10\""
+        },
+        {
+          "name": "disabled",
+          "description": "Set state to disable",
+          "type": "boolean",
+          "default": "false"
+        }
+      ],
+      "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": "totalItems",
+          "attribute": "total-items",
+          "description": "Total items",
+          "type": "string",
+          "default": "\"10\""
+        },
+        {
+          "name": "disabled",
+          "attribute": "disabled",
+          "description": "Set state to disable",
+          "type": "boolean",
+          "default": "false"
+        }
+      ],
+      "events": [
+        {
+          "name": "page-changed",
+          "description": "Fired when the `page` property is changed"
+        }
+      ],
+      "methods": [
+        {
+          "name": "next",
+          "description": "Go to the next page",
+          "params": []
+        },
+        {
+          "name": "previous",
+          "description": "Go to the previous page",
+          "params": []
+        },
+        {
+          "name": "first",
+          "description": "Go to the first page",
+          "params": []
+        },
+        {
+          "name": "last",
+          "description": "Go to the last page",
+          "params": []
+        }
+      ]
+    }
+  ]
+}

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/helpers/types.d.ts

@@ -0,0 +1,9 @@
+/**
+ * Page info used for translation
+ */
+export declare type PageInfo = {
+    from: number;
+    to: number;
+    totalCount: number;
+    pageSize: number;
+};

package/lib/pagination/helpers/types.js

@@ -0,0 +1 @@
+export {};