@refinitiv-ui/elements 5.12.2 → 6.0.0-next.2

package/lib/overlay-menu/index.js

@@ -1,18 +1,19 @@
 var OverlayMenu_1;
 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 { customElement } from '@refinitiv-ui/core/decorators/custom-element.js';
+import { property } from '@refinitiv-ui/core/decorators/property.js';
+import { ifDefined } from '@refinitiv-ui/core/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 { AnimationTaskRunner } from '@refinitiv-ui/utils/async.js';
+import { CollectionComposer } from '@refinitiv-ui/utils/collection.js';
+import { uuid } from '@refinitiv-ui/utils/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 { Navigation } from './helpers/types';
 import { OpenedMenusManager } from './managers/menu-manager.js';
 /**
  * Overlay that supports single-level and multi-level menus
@@ -62,6 +63,10 @@ import { OpenedMenusManager } from './managers/menu-manager.js';
 let OverlayMenu = OverlayMenu_1 = class OverlayMenu extends Overlay {
     constructor() {
         super();
+        /**
+         * Default role of the element
+         */
+        this.defaultRole = 'menu';
         this.dataDisconnectThrottler = new AnimationTaskRunner();
         this.oldInteractiveElements = [];
         this.menuIndex = {};
@@ -314,13 +319,19 @@ let OverlayMenu = OverlayMenu_1 = class OverlayMenu extends Overlay {
             || (this.opened && changedProperties.has('modification'));
     }
     /**
-     * Reflects property values to attributes and calls render to render DOM via lit-html.
+     * Compute property values that depend on other properties
+     * and are used in the rest of the update process.
      * @param changedProperties Properties which have changed
      * @return {void}
      */
-    update(changedProperties) {
+    willUpdate(changedProperties) {
+        super.willUpdate(changedProperties);
         if (changedProperties.has('opened')) {
             if (this.opened) {
+                const parentMenuItem = OpenedMenusManager.getParentMenuItem(this);
+                if (parentMenuItem) {
+                    parentMenuItem.setAttribute('aria-expanded', 'true');
+                }
                 this.opening();
             }
             else {
@@ -333,7 +344,6 @@ let OverlayMenu = OverlayMenu_1 = class OverlayMenu extends Overlay {
         if (changedProperties.has('opened') && this.opened) {
             this.lazyRendered = true;
         }
-        super.update(changedProperties);
     }
     /**
      * Called after the component is first rendered
@@ -431,8 +441,8 @@ let OverlayMenu = OverlayMenu_1 = class OverlayMenu extends Overlay {
                 this.position = ['right-start', 'left-start'];
             }
             else {
-                this.positionTarget = parentMenu === null || parentMenu === void 0 ? void 0 : parentMenu.positionTarget;
-                this.position = parentMenu === null || parentMenu === void 0 ? void 0 : parentMenu.position;
+                this.positionTarget = parentMenu?.positionTarget;
+                this.position = 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)
@@ -468,9 +478,8 @@ let OverlayMenu = OverlayMenu_1 = class OverlayMenu extends Overlay {
         // try to match existing menus via CC
         // this is true if modification are done via CC APIs
         const findMenuByDataItem = (dataItem) => {
-            var _a, _b;
-            const menuId = (((_a = this.composer) === null || _a === void 0 ? void 0 : _a.getItemPropertyValue(dataItem, 'for')) || '');
-            return (_b = oldMenuIndex[menuId]) === null || _b === void 0 ? void 0 : _b.menu;
+            const menuId = (this.composer?.getItemPropertyValue(dataItem, 'for') || '');
+            return oldMenuIndex[menuId]?.menu;
         };
         // try to match existing menus by item value and depth
         // this happens if new data has been supplied, which might be identical
@@ -483,11 +492,11 @@ let OverlayMenu = OverlayMenu_1 = class OverlayMenu extends Overlay {
             }
         };
         data.forEach((dataItem, index) => {
-            var _a;
             // has menu
             if (dataItem.items && dataItem.items.length) {
                 const dataId = `${dataItem.value || index}-${depth}`;
                 const menu = findMenuByDataItem(dataItem) || findMenuByDataId(dataId) || this.toOverlayMenu();
+                menu.setAttribute('aria-label', String(dataItem.label));
                 menu.parentDataItem = dataItem;
                 menu.data = this.composer;
                 const menuId = menu.id;
@@ -496,7 +505,7 @@ let OverlayMenu = OverlayMenu_1 = class OverlayMenu extends Overlay {
                     dataId
                 };
                 delete oldMenuIndex[menuId];
-                (_a = this.composer) === null || _a === void 0 ? void 0 : _a.setItemPropertyValue(dataItem, 'for', menuId);
+                this.composer?.setItemPropertyValue(dataItem, 'for', menuId);
             }
         });
         // delete all non-required menus
@@ -512,10 +521,9 @@ let OverlayMenu = OverlayMenu_1 = class OverlayMenu extends Overlay {
      * @return {void}
      */
     disconnectNestedMenus() {
-        var _a;
         for (const menuIndex in this.menuIndex) {
             const { menu } = this.menuIndex[menuIndex];
-            (_a = menu.parentNode) === null || _a === void 0 ? void 0 : _a.removeChild(menu);
+            menu.parentNode?.removeChild(menu);
         }
     }
     /**
@@ -589,11 +597,11 @@ let OverlayMenu = OverlayMenu_1 = class OverlayMenu extends Overlay {
         switch (event.key) {
             case 'Down':
             case 'ArrowDown':
-                this.focusElement(1, true);
+                this.focusElement(Navigation.NEXT, true);
                 break;
             case 'Up':
             case 'ArrowUp':
-                this.focusElement(-1, true);
+                this.focusElement(Navigation.PREVIOUS, true);
                 break;
             case 'Left':
             case 'ArrowLeft':
@@ -604,7 +612,13 @@ let OverlayMenu = OverlayMenu_1 = class OverlayMenu extends Overlay {
                 this.onArrowRight();
                 break;
             case 'Tab':
-                this.focusElement(event.shiftKey ? -1 : 1, true);
+                this.focusElement(event.shiftKey ? Navigation.PREVIOUS : Navigation.NEXT, true);
+                break;
+            case 'Home':
+                this.focusElement(Navigation.FIRST);
+                break;
+            case 'End':
+                this.focusElement(Navigation.LAST);
                 break;
             default:
                 return;
@@ -673,7 +687,7 @@ let OverlayMenu = OverlayMenu_1 = class OverlayMenu extends Overlay {
     }
     /**
      * Highlight next or previous highlightable element if present
-     * @param direction -1 - up/next; 1 - down/previous
+     * @param direction previous, next, first or last focusable element
      * @param [circular=false] Set to true to have circular navigation over items
      * @return {void}
      */
@@ -682,14 +696,24 @@ let OverlayMenu = OverlayMenu_1 = class OverlayMenu extends Overlay {
         const children = this.items;
         const idx = menuHighlightedItem ? children.indexOf(menuHighlightedItem) : -1;
         let focusElement;
-        if (direction === 1) {
-            focusElement = idx === -1 ? children[0] : children[idx + 1];
-        }
-        else {
-            focusElement = idx === -1 ? children[children.length - 1] : children[idx - 1];
+        switch (direction) {
+            case Navigation.PREVIOUS:
+                focusElement = idx === -1 ? children[children.length - 1] : children[idx - 1];
+                break;
+            case Navigation.NEXT:
+                focusElement = idx === -1 ? children[0] : children[idx + 1];
+                break;
+            case Navigation.FIRST:
+                focusElement = children[0];
+                break;
+            case Navigation.LAST:
+                focusElement = children[children.length - 1];
+                break;
+            default:
+                return;
         }
         if (circular && !focusElement) {
-            focusElement = direction === 1 ? children[0] : children[children.length - 1];
+            focusElement = direction === Navigation.NEXT ? children[0] : children[children.length - 1];
         }
         if (focusElement) {
             focusElement.focus();
@@ -839,13 +863,14 @@ let OverlayMenu = OverlayMenu_1 = class OverlayMenu extends Overlay {
         const composer = this.composer;
         const type = composer.getItemPropertyValue(item, 'type');
         if (type === 'divider') {
-            return html `<ef-item type="divider"></ef-item>`;
+            return html `<ef-item type="divider" aria-hidden="true"></ef-item>`;
         }
         const tooltip = composer.getItemPropertyValue(item, 'tooltip');
         const label = composer.getItemPropertyValue(item, 'label');
         const icon = composer.getItemPropertyValue(item, 'icon');
         if (type === 'header') {
             return html `<ef-item
+        role="presentation"
         type="header"
         title=${ifDefined(tooltip || undefined)}
         .label=${label}
@@ -860,6 +885,9 @@ let OverlayMenu = OverlayMenu_1 = class OverlayMenu extends Overlay {
         const highlighted = composer.getItemPropertyValue(item, 'highlighted');
         // type text
         return html `<ef-item
+      role="menuitem"
+      aria-haspopup=${ifDefined(forMenu ? true : undefined)}
+      aria-expanded=${ifDefined(forMenu ? false : undefined)}
       title=${ifDefined(tooltip || undefined)}
       ?disabled=${disabled}
       ?selected=${selected}

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

@@ -1,4 +1,4 @@
-import { AfterRenderTaskRunner } from '@refinitiv-ui/utils/lib/async.js';
+import { AfterRenderTaskRunner } from '@refinitiv-ui/utils/async.js';
 import { OverlayMenu } from '../index.js';
 import { getOverlays } from '../../overlay/managers/zindex-manager.js';
 /**
@@ -62,6 +62,7 @@ class OpenedMenusManager {
         if (childMenu) {
             const { menu } = childMenu;
             if (this.setOpened(menu, false)) {
+                childMenu.item.setAttribute('aria-expanded', 'false');
                 if (this._closeMenuFor(menu)) {
                     this.crossMenu.delete(parent);
                     return true;

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

@@ -1,5 +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';
+import '@refinitiv-ui/elements/item/themes/halo/dark';
+import '@refinitiv-ui/elements/icon/themes/halo/dark';
+import '@refinitiv-ui/elements/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

@@ -1,5 +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';
+import '@refinitiv-ui/elements/item/themes/halo/light';
+import '@refinitiv-ui/elements/icon/themes/halo/light';
+import '@refinitiv-ui/elements/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

@@ -1,5 +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';
+import '@refinitiv-ui/elements/item/themes/solar/charcoal';
+import '@refinitiv-ui/elements/icon/themes/solar/charcoal';
+import '@refinitiv-ui/elements/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

@@ -1,5 +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';
+import '@refinitiv-ui/elements/item/themes/solar/pearl';
+import '@refinitiv-ui/elements/icon/themes/solar/pearl';
+import '@refinitiv-ui/elements/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

@@ -1,11 +1,16 @@
 import { JSXInterface } from '../jsx';
 import { BasicElement, PropertyValues, TemplateResult, CSSResultGroup } from '@refinitiv-ui/core';
+import { Ref } from '@refinitiv-ui/core/directives/ref.js';
 import '../button/index.js';
 import '../button-bar/index.js';
 import '../layout/index.js';
 import '../text-field/index.js';
-import '@refinitiv-ui/phrasebook/lib/locale/en/pagination.js';
-import { Translate } from '@refinitiv-ui/translate';
+import '@refinitiv-ui/phrasebook/locale/en/pagination.js';
+import { Translate, TranslateDirectiveResult } from '@refinitiv-ui/translate';
+declare enum Direction {
+    increment = "increment",
+    decrement = "decrement"
+}
 /**
  * Used to control and navigate through multiple pages
  * @fires value-changed - Fired when the `value` property is changed
@@ -53,70 +58,6 @@ export declare class Pagination extends BasicElement {
      * @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
      */
@@ -127,18 +68,28 @@ export declare class Pagination extends BasicElement {
      */
     private get infinitePaginate();
     /**
-     * Getter for text field as input part
+     * Reference input element
+     */
+    protected inputRef: Ref<HTMLInputElement>;
+    /**
+     * Getter for input element
+     * @returns input element
      */
-    private input;
+    protected get inputElement(): HTMLInputElement | null;
     /**
      * Used for translations
      */
     protected t: Translate;
     /**
-     * Getter for display text in the input
-     * @returns input text
+     * Getter for display page number or text depends on focusing the input
+     * @returns string page number value or translate directive result
      */
-    protected get inputText(): string;
+    protected get inputValue(): string | TranslateDirectiveResult;
+    /**
+     * Get page text format in various translation
+     * @returns translate directive result
+     */
+    protected get inputTextFormat(): TranslateDirectiveResult;
     /**
      * State for check the input focus
      */
@@ -163,6 +114,11 @@ export declare class Pagination extends BasicElement {
      * @override
      */
     protected updated(changedProperties: PropertyValues): void;
+    /**
+     * Select text in input when update element complete
+     * @returns returns a promise void
+     */
+    private selectInput;
     /**
      * Validate page value which returns true when value is valid
      * @param value value
@@ -172,34 +128,25 @@ export declare class Pagination extends BasicElement {
      */
     private validatePage;
     /**
-     * Handles action when Enter and Tab key is press onto the input
-     * @param event Keyboard event
+     * Set page to the pagination
+     * @param value page number
      * @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;
+    private setPage;
     /**
      * Updates page value depending on direction
      * @param direction page value direction
-     * @param event whether the event page-changed should fire
+     * @param withEvent whether the event page-changed should fire
      * @returns {void}
      */
     private updatePage;
+    /**
+     * Update input value. Do not update pagination actual value until Enter key is pressed or blur event is fired
+     * @param value input value
+     * @param direction update from old value
+     * @returns void
+     */
+    protected updateInputValue(value?: number, direction?: Direction | null): void;
     /**
      * Fires event when value change
      * @returns {void}
@@ -245,6 +192,41 @@ export declare class Pagination extends BasicElement {
      * @returns {void}
      */
     private onLastTap;
+    /**
+     * Check pagination has a next page
+     * @param page current page number
+     * @returns true if pagination has a next page
+     */
+    protected hasNextPage(page: number): boolean;
+    /**
+     * Check pagination has a previous page
+     * @param page current page number
+     * @returns true if pagination has a previous page
+     */
+    protected hasPreviousPage(page: number): boolean;
+    /**
+     * Check pagination has a last page
+     * @returns true if pagination has a last page
+     */
+    protected hasLastPage(): boolean;
+    /**
+     * Handles action when input focused change
+     * @param event focus change event
+     * @returns {void}
+     */
+    private onFocusedChanged;
+    /**
+     * Runs on input element `input` event
+     * @param event `input` event
+     * @returns {void}
+     */
+    protected onInputInput(): void;
+    /**
+     * Handles key down event
+     * @param event Key down event object
+     * @returns {void}
+     */
+    private onKeyDown;
     /**
      * A `CSSResultGroup` that will be used
      * to style the host, slotted children
@@ -259,6 +241,12 @@ export declare class Pagination extends BasicElement {
      */
     protected render(): TemplateResult;
 }
+declare global {
+    interface HTMLElementTagNameMap {
+        'ef-pagination': Pagination;
+    }
+}
+export {};
 
 declare global {
   interface HTMLElementTagNameMap {