@refinitiv-ui/elements 5.12.0-alpha.0 → 5.12.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/index.d.ts

@@ -0,0 +1,275 @@
+import { JSXInterface } from '../jsx';
+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';
+/**
+ * Used to control and navigate through multiple pages
+ * @fires value-changed - Fired when the `value` property is changed
+ */
+export declare class Pagination extends BasicElement {
+    /**
+     * Element version number
+     * @returns version number
+     */
+    static get version(): string;
+    /**
+     * Current page internal current page value
+     */
+    private _value;
+    /**
+     * Internal current page
+     * @returns current page
+     */
+    private get internalValue();
+    /**
+     * Current page
+     */
+    get value(): string;
+    /**
+     * Set current page
+     * @param value current page
+     */
+    set value(value: string);
+    /**
+     * Max page
+     */
+    protected _max: string;
+    /**
+     * Internal max page
+     * @returns max page
+     */
+    private get internalMax();
+    /**
+     * Max page
+     * @returns max page
+     */
+    get max(): string;
+    /**
+     * Set max page
+     * @param value max page
+     */
+    set max(value: string);
+    /**
+     * Current page
+     * @returns current page
+     * @deprecated
+     * @ignore
+     */
+    get page(): string;
+    /**
+     * Set current page
+     * @param value - Set current page
+     * @deprecated
+     * @ignore
+     */
+    set page(value: string);
+    /**
+     * Number of item per page
+     * @returns number of items per page
+     * @deprecated
+     * @ignore
+     */
+    get pageSize(): string;
+    /**
+     * Set number of item per page
+     * @param value - number of item per page
+     * @deprecated
+     * @ignore
+     */
+    set pageSize(value: string);
+    /**
+     * Number of item per page internal value
+     * @deprecated
+     */
+    private _pageSize;
+    /**
+     * Internal page size
+     * @deprecated
+     * @returns page size
+     */
+    private get internalPageSize();
+    /**
+     * Total items internal value
+     * @deprecated
+     */
+    private _totalItems;
+    /**
+     * Internal total items
+     * @returns total items
+     * @deprecated
+     */
+    private get internalTotalitems();
+    /**
+     * Total items
+     * @returns total items
+     * @deprecated
+     * @ignore
+     */
+    get totalItems(): string;
+    /**
+     * Set total items
+     * @param value total items
+     * @deprecated
+     * @ignore
+     */
+    set totalItems(value: string);
+    /**
+     * Set state to disable
+     */
+    disabled: boolean;
+    /**
+     * Get infinite pagination state
+     * @returns infinite pagination state
+     */
+    private get infinitePaginate();
+    /**
+     * Getter for text field as input part
+     */
+    private input;
+    /**
+     * Used for translations
+     */
+    protected t: Translate;
+    /**
+     * Getter for display text in the input
+     * @returns input text
+     */
+    protected get inputText(): string;
+    /**
+     * State for check the input focus
+     */
+    private inputFocused;
+    /**
+     * State for checking the first page button is available
+     */
+    protected get useFirstButton(): boolean;
+    /**
+     * State for checking the previous page button is available
+     */
+    protected get usePreviousButton(): boolean;
+    /**
+     * State for checking the next page button is available
+     */
+    protected get useNextButton(): boolean;
+    /**
+     * State for checking the last page button is available
+     */
+    protected get useLastButton(): boolean;
+    /**
+     * @override
+     */
+    protected updated(changedProperties: PropertyValues): void;
+    /**
+     * Validate page value which returns true when value is valid
+     * @param value value
+     * @param warning show warning message when value is invalid
+     * @param propName property name to show in warning message
+     * @returns result of validation
+     */
+    private validatePage;
+    /**
+     * Handles action when Enter and Tab key is press onto the input
+     * @param event Keyboard event
+     * @returns {void}
+     */
+    private onInputKeyDown;
+    /**
+     * Handles action when input focused change
+     * @param event focus change event
+     * @returns {void}
+     */
+    private onInputFocusedChanged;
+    /**
+     * Update page by using value from the input
+     * @returns {void}
+     */
+    private updatePageInput;
+    /**
+     * Select text in input when update element complete
+     * @returns returns a promise void
+     */
+    private selectInput;
+    /**
+     * Updates page value depending on direction
+     * @param direction page value direction
+     * @param event whether the event page-changed should fire
+     * @returns {void}
+     */
+    private updatePage;
+    /**
+     * Fires event when value change
+     * @returns {void}
+     */
+    private notifyValueChange;
+    /**
+     * Go to the next page
+     * @returns {void}
+     */
+    next(): void;
+    /**
+     * Go to the next page and fires event
+     * @returns {void}
+     */
+    private onNextTap;
+    /**
+     * Go to the previous page
+     * @returns {void}
+     */
+    previous(): void;
+    /**
+     * Go to the previous page and fires event
+     * @returns {void}
+     */
+    private onPreviousTap;
+    /**
+     * Go to the first page
+     * @returns {void}
+     */
+    first(): void;
+    /**
+     * Go to the first page and fires event
+     * @returns {void}
+     */
+    private onFirstTap;
+    /**
+     * Go to the last page
+     * @returns {void}
+     */
+    last(): void;
+    /**
+     * Go to the last page and fires event
+     * @returns {void}
+     */
+    private onLastTap;
+    /**
+     * 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(): CSSResultGroup;
+    /**
+     * A `TemplateResult` that will be used
+     * to render the updated internal template.
+     * @return Render template
+     */
+    protected render(): TemplateResult;
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'ef-pagination': Pagination;
+  }
+
+  namespace JSX {
+    interface IntrinsicElements {
+      'ef-pagination': Partial<Pagination> | JSXInterface.HTMLAttributes<Pagination>;
+    }
+  }
+}
+
+export {};