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

package/lib/pagination/index.js

@@ -1,19 +1,22 @@
 import { __decorate } from "tslib";
-import { BasicElement, html, css, WarningNotice, DeprecationNotice } 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 { state } from '@refinitiv-ui/core/lib/decorators/state.js';
-import { query } from '@refinitiv-ui/core/lib/decorators/query.js';
+import { BasicElement, html, css, WarningNotice } from '@refinitiv-ui/core';
+import { customElement } from '@refinitiv-ui/core/decorators/custom-element.js';
+import { property } from '@refinitiv-ui/core/decorators/property.js';
+import { state } from '@refinitiv-ui/core/decorators/state.js';
+import { ifDefined } from '@refinitiv-ui/core/directives/if-defined.js';
+import { ref, createRef } from '@refinitiv-ui/core/directives/ref.js';
 import { VERSION } from '../version.js';
 import '../button/index.js';
 import '../button-bar/index.js';
 import '../layout/index.js';
 import '../text-field/index.js';
-import '@refinitiv-ui/phrasebook/lib/locale/en/pagination.js';
+import '@refinitiv-ui/phrasebook/locale/en/pagination.js';
 import { translate } from '@refinitiv-ui/translate';
-const pageDeprecation = new DeprecationNotice('Property `page` is deprecated, use `value` instead.');
-const pageSizeDeprecation = new DeprecationNotice('Property `pageSize ` is deprecated, use `max` instead.');
-const totalItemsDeprecation = new DeprecationNotice('Property `totalItems ` is deprecated, use `max` instead.');
+var Direction;
+(function (Direction) {
+    Direction["increment"] = "increment";
+    Direction["decrement"] = "decrement";
+})(Direction || (Direction = {}));
 /**
  * Used to control and navigate through multiple pages
  * @fires value-changed - Fired when the `value` property is changed
@@ -29,20 +32,14 @@ let Pagination = class Pagination extends BasicElement {
          * Max page
          */
         this._max = '';
-        /**
-         * Number of item per page internal value
-         * @deprecated
-         */
-        this._pageSize = '';
-        /**
-         * Total items internal value
-         * @deprecated
-         */
-        this._totalItems = '';
         /**
          * Set state to disable
          */
         this.disabled = false;
+        /**
+         * Reference input element
+         */
+        this.inputRef = createRef();
         /**
          * State for check the input focus
          */
@@ -93,19 +90,10 @@ let Pagination = class Pagination extends BasicElement {
      */
     get internalMax() {
         const max = parseInt(this._max, 10) || 0;
-        const pageSize = this.internalPageSize;
-        const totalItems = this.internalTotalitems;
-        if (!max && !totalItems) {
+        if (!max) {
             return Infinity;
         }
-        else if (max >= 1) {
-            return max;
-        }
-        if (pageSize > 0) {
-            const totalPage = Math.ceil(totalItems / pageSize);
-            return totalPage >= 1 ? totalPage : 1;
-        }
-        return 1;
+        return max >= 1 ? max : 1;
     }
     /**
      * Max page
@@ -130,142 +118,41 @@ let Pagination = class Pagination extends BasicElement {
         this.requestUpdate('max', oldValue);
     }
     /**
-     * Current page
-     * @returns current page
-     * @deprecated
-     * @ignore
-     */
-    get page() {
-        pageDeprecation.once();
-        return this._value;
-    }
-    /**
-     * Set current page
-     * @param value - Set current page
-     * @deprecated
-     * @ignore
-     */
-    set page(value) {
-        pageDeprecation.show();
-        let newValue = value;
-        if (!newValue || !this.validatePage(value, true, 'page')) {
-            newValue = '';
-        }
-        const oldValue = this._value;
-        if (oldValue !== newValue) {
-            this._value = newValue.toString();
-        }
-        this.requestUpdate('page', oldValue);
-    }
-    /**
-     * Number of item per page
-     * @returns number of items per page
-     * @deprecated
-     * @ignore
-     */
-    get pageSize() {
-        pageSizeDeprecation.once();
-        return this._pageSize;
-    }
-    /**
-     * Set number of item per page
-     * @param value - number of item per page
-     * @deprecated
-     * @ignore
-     */
-    set pageSize(value) {
-        pageSizeDeprecation.show();
-        let newValue = value;
-        if (!newValue || !this.validatePage(value, true, 'page-size')) {
-            newValue = '';
-        }
-        // Validate to show warning only, need to keep developer value.
-        // Check page still is in supported range if page-size changed
-        const newTotalPage = Math.ceil(this.internalTotalitems / (parseInt(newValue, 10) || 1)) || 1;
-        if (this.internalValue > newTotalPage) {
-            new WarningNotice(`${this.localName} : The specified value "${newValue}" of page-size caused the value of page property is out of supported range.`).show();
-        }
-        const oldValue = this._pageSize;
-        if (oldValue !== newValue) {
-            this._pageSize = newValue;
-        }
-        this.requestUpdate('pageSize', oldValue);
-    }
-    /**
-     * Internal page size
-     * @deprecated
-     * @returns page size
-     */
-    get internalPageSize() {
-        return parseInt(this._pageSize, 10);
-    }
-    /**
-     * Internal total items
-     * @returns total items
-     * @deprecated
-     */
-    get internalTotalitems() {
-        const totalItems = parseInt(this._totalItems, 10) || 0;
-        return totalItems >= 1 ? totalItems : 0;
-    }
-    /**
-     * Total items
-     * @returns total items
-     * @deprecated
-     * @ignore
+     * Get infinite pagination state
+     * @returns infinite pagination state
      */
-    get totalItems() {
-        totalItemsDeprecation.once();
-        return this._totalItems;
+    get infinitePaginate() {
+        return this.internalMax === Infinity; // internalMax always returns 1-Infinity
     }
     /**
-     * Set total items
-     * @param value total items
-     * @deprecated
-     * @ignore
+     * Getter for input element
+     * @returns input element
      */
-    set totalItems(value) {
-        totalItemsDeprecation.show();
-        let newValue = value;
-        if (!newValue || !this.validatePage(value, true, 'total-items')) {
-            newValue = '';
-        }
-        // Validate to show warning only, need to keep developer value.
-        // Check page still is in supported range if total-item changed
-        const newTotalPage = Math.ceil((parseInt(newValue, 10) || 1) / this.internalPageSize) || 1;
-        if (this.internalValue > newTotalPage) {
-            new WarningNotice(`${this.localName} : The specified value "${newValue}" of total-items caused the value of page property is out of supported range.`).show();
-        }
-        const oldValue = this._totalItems;
-        if (oldValue !== newValue) {
-            this._totalItems = newValue;
-        }
-        this.requestUpdate('totalItems', oldValue);
+    get inputElement() {
+        return this.inputRef.value || null;
     }
     /**
-     * Get infinite pagination state
-     * @returns infinite pagination state
+     * Getter for display page number or text depends on focusing the input
+     * @returns string page number value or translate directive result
      */
-    get infinitePaginate() {
-        return this.internalMax === Infinity; // internalMax always returns 1-Infinity
+    get inputValue() {
+        return this.inputFocused ? this.internalValue.toString() : this.inputTextFormat;
     }
     /**
-     * Getter for display text in the input
-     * @returns input text
+     * Get page text format in various translation
+     * @returns translate directive result
      */
-    get inputText() {
-        if (this.inputFocused) {
-            return this.internalValue.toString();
-        }
-        else {
-            return (this.infinitePaginate ? this.t('PAGE', { page: this.internalValue }) : this.t('PAGE_OF', { page: this.internalValue, pageTotal: this.internalMax }));
+    get inputTextFormat() {
+        if (!this.infinitePaginate) {
+            return this.t('PAGE_OF', { page: this.internalValue, pageTotal: this.internalMax });
         }
+        return this.t('PAGE', { page: this.internalValue });
     }
     /**
      * State for checking the first page button is available
      */
     get useFirstButton() {
-        return !this.disabled && this.internalValue >= 2;
+        return !this.disabled && this.hasPreviousPage(this.internalValue);
     }
     /**
      * State for checking the previous page button is available
@@ -277,7 +164,7 @@ let Pagination = class Pagination extends BasicElement {
      * State for checking the next page button is available
      */
     get useNextButton() {
-        return !this.disabled && this.internalValue < this.internalMax;
+        return !this.disabled && this.hasNextPage(this.internalValue);
     }
     /**
      * State for checking the last page button is available
@@ -294,6 +181,14 @@ let Pagination = class Pagination extends BasicElement {
             void this.selectInput();
         }
     }
+    /**
+     * Select text in input when update element complete
+     * @returns returns a promise void
+     */
+    async selectInput() {
+        await this.updateComplete;
+        this.inputElement?.select();
+    }
     /**
      * Validate page value which returns true when value is valid
      * @param value value
@@ -313,55 +208,19 @@ let Pagination = class Pagination extends BasicElement {
         }
     }
     /**
-     * Handles action when Enter and Tab key is press onto the input
-     * @param event Keyboard event
-     * @returns {void}
-     */
-    onInputKeyDown(event) {
-        var _a, _b;
-        const isEnter = event.key === 'Enter' || event.keyCode === 13;
-        const isTab = event.key === 'Tab' || event.keyCode === 9;
-        if (isEnter || isTab) {
-            this.updatePageInput();
-            if (isEnter) {
-                this.input.blur();
-                event.preventDefault();
-                /**
-                 * Issue only in firefox
-                 * cannot blur() or focus() to this.input so create a temp to this.input loses focus
-                 */
-                const temp = document.createElement('input');
-                (_a = this.shadowRoot) === null || _a === void 0 ? void 0 : _a.appendChild(temp);
-                temp.focus();
-                this.input.blur();
-                (_b = this.shadowRoot) === null || _b === void 0 ? void 0 : _b.removeChild(temp);
-            }
-        }
-    }
-    /**
-     * Handles action when input focused change
-     * @param event focus change event
-     * @returns {void}
-     */
-    onInputFocusedChanged(event) {
-        this.inputFocused = event.detail.value;
-        if (!this.inputFocused) {
-            this.updatePageInput();
-        }
-    }
-    /**
-     * Update page by using value from the input
+     * Set page to the pagination
+     * @param value page number
      * @returns {void}
      */
-    updatePageInput() {
+    setPage(value) {
         // Prevent update page to the same value
-        if (this.value === this.input.value) {
+        if (this.value === value) {
             return;
         }
         const oldValue = this.value;
-        let newValue = parseInt(this.input.value, 10);
+        let newValue = parseInt(value, 10);
         // Reset input and boundary value into supported range.
-        if (this.validatePage(this.input.value)) {
+        if (this.validatePage(value)) {
             if (newValue > this.internalMax) {
                 newValue = this.internalMax;
             }
@@ -375,36 +234,52 @@ let Pagination = class Pagination extends BasicElement {
             this.notifyValueChange();
         }
     }
-    /**
-     * Select text in input when update element complete
-     * @returns returns a promise void
-     */
-    async selectInput() {
-        await this.updateComplete;
-        this.input.select();
-    }
     /**
      * 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}
      */
-    updatePage(direction, event = false) {
-        /**
-         * Handle in case the value of max property is greater than value of value/page property,
-         * which it might happen by using developer API.
-         */
+    updatePage(direction, withEvent = false) {
+        // Get current page
         let page = this.internalValue;
-        if (page > this.internalMax) {
-            page = this.internalMax + 1;
+        let newPage;
+        // Check the direction
+        if (direction === Direction.increment) {
+            newPage = this.hasNextPage(page) ? page + 1 : page;
         }
-        const limit = direction === 'increment' ? page >= this.internalMax : page <= 1;
-        if (!limit) {
-            this.value = direction === 'increment' ? (page + 1).toString() : (page - 1).toString();
-            if (event) {
-                this.notifyValueChange();
-            }
+        else {
+            /**
+             * Handle in case the page value is greater than max, so the decrement must reset page to the max page.
+             * which it might happen by using developer API.
+             */
+            page = page > this.internalMax ? this.internalMax + 1 : page;
+            newPage = this.hasPreviousPage(page) ? page - 1 : page;
+        }
+        // Update page and fire event
+        if (newPage !== page) {
+            this.value = String(newPage);
+            withEvent && this.notifyValueChange();
+        }
+    }
+    /**
+     * 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
+     */
+    updateInputValue(value = 1, direction = null) {
+        if (!this.inputElement) {
+            return;
+        }
+        let newValue = value;
+        // Update base on old value
+        if (direction) {
+            const changeValue = direction === Direction.increment ? value : -Math.abs(value);
+            newValue = Number(this.inputElement.value) + changeValue;
         }
+        this.inputElement.value = String(newValue);
+        this.inputElement.setAttribute('aria-valuenow', this.inputElement.value);
     }
     /**
      * Fires event when value change
@@ -412,35 +287,34 @@ let Pagination = class Pagination extends BasicElement {
      */
     notifyValueChange() {
         this.notifyPropertyChange('value', this.value);
-        this.notifyPropertyChange('page', this.value); // deprecated. support backwards compatibility.
     }
     /**
      * Go to the next page
      * @returns {void}
      */
     next() {
-        this.updatePage('increment');
+        this.updatePage(Direction.increment);
     }
     /**
      * Go to the next page and fires event
      * @returns {void}
      */
     onNextTap() {
-        this.updatePage('increment', true);
+        this.updatePage(Direction.increment, true);
     }
     /**
      * Go to the previous page
      * @returns {void}
      */
     previous() {
-        this.updatePage('decrement');
+        this.updatePage(Direction.decrement);
     }
     /**
      * Go to the previous page and fires event
      * @returns {void}
      */
     onPreviousTap() {
-        this.updatePage('decrement', true);
+        this.updatePage(Direction.decrement, true);
     }
     /**
      * Go to the first page
@@ -476,6 +350,102 @@ let Pagination = class Pagination extends BasicElement {
         this.last();
         this.notifyValueChange();
     }
+    /**
+     * Check pagination has a next page
+     * @param page current page number
+     * @returns true if pagination has a next page
+     */
+    hasNextPage(page) {
+        return page < this.internalMax;
+    }
+    /**
+     * Check pagination has a previous page
+     * @param page current page number
+     * @returns true if pagination has a previous page
+     */
+    hasPreviousPage(page) {
+        return page > 1;
+    }
+    /**
+     * Check pagination has a last page
+     * @returns true if pagination has a last page
+     */
+    hasLastPage() {
+        return !this.infinitePaginate;
+    }
+    /**
+     * Handles action when input focused change
+     * @param event focus change event
+     * @returns {void}
+     */
+    onFocusedChanged(event) {
+        if (!this.inputElement) {
+            return;
+        }
+        this.inputFocused = event.type === 'focus';
+        if (!this.inputFocused) {
+            this.setPage(this.inputElement.value);
+        }
+    }
+    /**
+     * Runs on input element `input` event
+     * @param event `input` event
+     * @returns {void}
+     */
+    onInputInput() {
+        if (!this.inputElement) {
+            return;
+        }
+        const currentInput = this.inputElement.value;
+        const inputValue = this.inputElement.value.replace(/[^\d]/g, ''); // stripe invalid charactors
+        // Page value cannot start with `0`, reset it if found.
+        if (inputValue.startsWith('0')) {
+            this.inputElement.value = inputValue.substring(1);
+        }
+        else if (currentInput !== inputValue) { // update if found new value
+            this.inputElement.value = inputValue;
+        }
+    }
+    /**
+     * Handles key down event
+     * @param event Key down event object
+     * @returns {void}
+     */
+    onKeyDown(event) {
+        if (event.defaultPrevented) {
+            return;
+        }
+        // Handle keyboard shortcuts
+        switch (event.key) {
+            case 'Enter':
+                this.inputElement && this.setPage(this.inputElement.value);
+                event.preventDefault();
+                break;
+            case 'Up':
+            case 'ArrowUp':
+                this.inputElement && this.hasNextPage(Number(this.inputElement.value || 1)) && this.updateInputValue(1, Direction.increment);
+                this.inputElement?.select();
+                event.preventDefault();
+                break;
+            case 'Down':
+            case 'ArrowDown':
+                this.inputElement && this.hasPreviousPage(Number(this.inputElement.value || 1)) && this.updateInputValue(1, Direction.decrement);
+                this.inputElement?.select();
+                event.preventDefault();
+                break;
+            case 'Home':
+                this.updateInputValue(1);
+                this.inputElement?.select();
+                event.preventDefault();
+                break;
+            case 'End':
+                this.hasLastPage() && this.updateInputValue(this.internalMax);
+                this.inputElement?.select();
+                event.preventDefault();
+                break;
+            default: // No default
+        }
+    }
     /**
      * A `CSSResultGroup` that will be used
      * to style the host, slotted children
@@ -497,19 +467,27 @@ let Pagination = class Pagination extends BasicElement {
     render() {
         return html `
       <ef-layout part="container" flex nowrap>
-        <ef-button-bar part="buttons">
+        <ef-button-bar part="buttons" aria-hidden="true" tabindex="-1">
           <ef-button id="first" icon="skip-to-start" @tap="${this.onFirstTap}" .disabled=${!this.useFirstButton}></ef-button>
           <ef-button id="previous" icon="left" @tap="${this.onPreviousTap}" .disabled=${!this.usePreviousButton}></ef-button>
         </ef-button-bar>
-        <ef-text-field
+        <label part="label" for="input">${this.inputTextFormat}</label>
+        <input
           id="input"
           part="input"
-          @focused-changed=${this.onInputFocusedChanged}
-          @keydown=${this.onInputKeyDown}
-          .value=${this.inputText}
+          role="spinbutton"
+          aria-valuenow=${this.internalValue}
+          aria-valuemin="1"
+          aria-valuemax=${ifDefined(this.max || undefined)}
+          .value=${this.inputValue}
           .disabled=${this.disabled}
-          no-spinner></ef-text-field>
-        <ef-button-bar part="buttons">
+          @focus=${this.onFocusedChanged}
+          @blur=${this.onFocusedChanged}
+          @input=${this.onInputInput}
+          @keydown=${this.onKeyDown}
+          ${ref(this.inputRef)}
+        />
+        <ef-button-bar part="buttons" aria-hidden="true" tabindex="-1">
           <ef-button id="next" icon="right" @tap="${this.onNextTap}" .disabled=${!this.useNextButton}></ef-button>
           <ef-button id="last" icon="skip-to-end" @tap="${this.onLastTap}" .disabled=${!this.useLastButton}></ef-button>
         </ef-button-bar>
@@ -523,21 +501,9 @@ __decorate([
 __decorate([
     property({ type: String })
 ], Pagination.prototype, "max", null);
-__decorate([
-    property({ type: String })
-], Pagination.prototype, "page", null);
-__decorate([
-    property({ type: String, attribute: 'page-size' })
-], Pagination.prototype, "pageSize", null);
-__decorate([
-    property({ type: String, attribute: 'total-items' })
-], Pagination.prototype, "totalItems", null);
 __decorate([
     property({ type: Boolean, reflect: true })
 ], Pagination.prototype, "disabled", void 0);
-__decorate([
-    query('#input')
-], Pagination.prototype, "input", void 0);
 __decorate([
     translate()
 ], Pagination.prototype, "t", void 0);

package/lib/pagination/themes/halo/dark/index.js

@@ -1,6 +1,5 @@
-import '@refinitiv-ui/elements/lib/button/themes/halo/dark';
-import '@refinitiv-ui/elements/lib/text-field/themes/halo/dark';
-import '@refinitiv-ui/elements/lib/button-bar/themes/halo/dark';
-import '@refinitiv-ui/elements/lib/layout/themes/halo/dark';
+import '@refinitiv-ui/elements/button/themes/halo/dark';
+import '@refinitiv-ui/elements/button-bar/themes/halo/dark';
+import '@refinitiv-ui/elements/layout/themes/halo/dark';
 
-elf.customStyles.define('ef-pagination', ':host [part=container]{align-items:center;justify-content:flex-end}:host [part=input]{min-width:40px;text-align:center;height:22px;width:150px;margin:0}:host [part=button],:host [part=input]{touch-action:manipulation}:host{margin:1px 0}:host [part=buttons]{margin:0}');
+elf.customStyles.define('ef-pagination', ':host [part=container]{align-items:center;justify-content:flex-end}:host [part=label]{clip:rect(1px,1px,1px,1px);-webkit-clip-path:inset(50%);clip-path:inset(50%);height:1px;width:1px;margin:-1px;overflow:hidden;padding:0;position:absolute}:host [part=input]{display:none;-webkit-appearance:none;-moz-appearance:none;appearance:none;font-family:inherit;font-size:12rem;font-weight:400;max-width:100%;padding:0 8px;outline:0;box-sizing:border-box;display:inline-flex;align-items:center;position:relative;vertical-align:middle;color:#ccc;border-radius:0;background-color:#0d0d0d;text-overflow:ellipsis;border:1px solid #404040;touch-action:manipulation;min-width:40px;text-align:center;height:22px;width:150px;margin:0}:host [part=input][disabled]{color:rgba(204,204,204,.5);border:1px solid rgba(64,64,64,.5)}:host [part=input][type=number]{padding-right:0}:host [part=input][warning]{border:1px solid #7f6400}:host [part=input][warning][disabled]{color:rgba(204,204,204,.5);border:1px solid rgba(127,100,0,.5)}:host [part=input][error],:host [part=input][error][warning]{border:1px solid #a01c2b}:host [part=input][error][disabled],:host [part=input][error][warning][disabled]{color:rgba(204,204,204,.5);border:1px solid rgba(160,28,43,.5)}:host [part=input] ::-ms-clear{display:none}:host [part=input]::-webkit-clear-button,:host [part=input]::-webkit-inner-spin-button,:host [part=input]::-webkit-search-cancel-button,:host [part=input]::-webkit-search-decoration{-webkit-appearance:none}:host [part=input]:hover{border-color:grey;color:#fff}:host [part=input]:focus{background-size:100% 2px,100% 1px!important;background-position:center bottom!important;border-color:#334bff}:host [part=button]{touch-action:manipulation}:host{margin:1px 0}:host [part=input]::-moz-selection{color:#fff;background-color:#334bff}:host [part=input]::selection{color:#fff;background-color:#334bff}:host [part=buttons]{margin:0}');

package/lib/pagination/themes/halo/light/index.js

@@ -1,6 +1,5 @@
-import '@refinitiv-ui/elements/lib/button/themes/halo/light';
-import '@refinitiv-ui/elements/lib/text-field/themes/halo/light';
-import '@refinitiv-ui/elements/lib/button-bar/themes/halo/light';
-import '@refinitiv-ui/elements/lib/layout/themes/halo/light';
+import '@refinitiv-ui/elements/button/themes/halo/light';
+import '@refinitiv-ui/elements/button-bar/themes/halo/light';
+import '@refinitiv-ui/elements/layout/themes/halo/light';
 
-elf.customStyles.define('ef-pagination', ':host [part=container]{align-items:center;justify-content:flex-end}:host [part=input]{min-width:40px;text-align:center;width:150px;margin:0 1px}:host [part=button],:host [part=input]{touch-action:manipulation}:host{margin:1px 0}:host [part=buttons]{margin:0}');
+elf.customStyles.define('ef-pagination', ':host [part=container]{align-items:center;justify-content:flex-end}:host [part=label]{clip:rect(1px,1px,1px,1px);-webkit-clip-path:inset(50%);clip-path:inset(50%);height:1px;width:1px;margin:-1px;overflow:hidden;padding:0;position:absolute}:host [part=input]{display:none;-webkit-appearance:none;-moz-appearance:none;appearance:none;font-family:inherit;font-size:12rem;font-weight:400;height:24px;max-width:100%;padding:0 8px;outline:0;box-sizing:border-box;display:inline-flex;align-items:center;position:relative;vertical-align:middle;color:#404040;border-radius:0;background-color:#fff;text-overflow:ellipsis;border:1px solid #595959;touch-action:manipulation;min-width:40px;text-align:center;width:150px;margin:0 1px}:host [part=input][disabled]{color:rgba(64,64,64,.5);border:1px solid rgba(89,89,89,.5)}:host [part=input][type=number]{padding-right:0}:host [part=input][warning]{border:1px solid #cca000}:host [part=input][warning][disabled]{color:rgba(64,64,64,.5);border:1px solid rgba(204,160,0,.5)}:host [part=input][error],:host [part=input][error][warning]{border:1px solid #b63243}:host [part=input][error][disabled],:host [part=input][error][warning][disabled]{color:rgba(64,64,64,.5);border:1px solid rgba(182,50,67,.5)}:host [part=input] ::-ms-clear{display:none}:host [part=input]::-webkit-clear-button,:host [part=input]::-webkit-inner-spin-button,:host [part=input]::-webkit-search-cancel-button,:host [part=input]::-webkit-search-decoration{-webkit-appearance:none}:host [part=input]:hover{border-color:#0d0d0d;color:#0d0d0d}:host [part=input]:focus{background-size:100% 2px,100% 1px!important;background-position:center bottom!important;border-color:#334bff}:host [part=button]{touch-action:manipulation}:host{margin:1px 0}:host [part=input]::-moz-selection{color:#fff;background-color:#334bff}:host [part=input]::selection{color:#fff;background-color:#334bff}:host [part=buttons]{margin:0}');

package/lib/pagination/themes/solar/charcoal/index.js

@@ -1,6 +1,5 @@
-import '@refinitiv-ui/elements/lib/button/themes/solar/charcoal';
-import '@refinitiv-ui/elements/lib/text-field/themes/solar/charcoal';
-import '@refinitiv-ui/elements/lib/button-bar/themes/solar/charcoal';
-import '@refinitiv-ui/elements/lib/layout/themes/solar/charcoal';
+import '@refinitiv-ui/elements/button/themes/solar/charcoal';
+import '@refinitiv-ui/elements/button-bar/themes/solar/charcoal';
+import '@refinitiv-ui/elements/layout/themes/solar/charcoal';
 
-elf.customStyles.define('ef-pagination', ':host [part=container]{align-items:center;justify-content:flex-end}:host [part=input]{min-width:40px;text-align:center;height:21px;width:150px;margin:0}:host [part=button],:host [part=input]{touch-action:manipulation}:host{--first-icon:previous;--last-icon:next;--previous-icon:left;--next-icon:right}');
+elf.customStyles.define('ef-pagination', ':host [part=container]{align-items:center;justify-content:flex-end}:host [part=label]{clip:rect(1px,1px,1px,1px);-webkit-clip-path:inset(50%);clip-path:inset(50%);height:1px;width:1px;margin:-1px;overflow:hidden;padding:0;position:absolute}:host [part=input]{display:none;-webkit-appearance:none;-moz-appearance:none;appearance:none;font-family:inherit;font-size:13rem;font-weight:400;max-width:100%;padding:0 5px;outline:0;box-sizing:border-box;display:inline-flex;align-items:center;position:relative;vertical-align:middle;color:#c2c2c2;border-radius:0;background-color:#000;text-overflow:ellipsis;border:1px solid #4a4a52;touch-action:manipulation;min-width:40px;text-align:center;height:21px;width:150px;margin:0}:host [part=input][disabled]{color:rgba(194,194,194,.6);border:1px solid rgba(74,74,82,.6)}:host [part=input][type=number]{padding-right:0}:host [part=input][warning]{border:1px solid #f93}:host [part=input][warning][disabled]{color:rgba(194,194,194,.6);border:1px solid rgba(255,153,51,.6)}:host [part=input][error],:host [part=input][error][warning]{border:1px solid #f5475b}:host [part=input][error][disabled],:host [part=input][error][warning][disabled]{color:rgba(194,194,194,.6);border:1px solid rgba(245,71,91,.6)}:host [part=input] ::-ms-clear{display:none}:host [part=input]::-webkit-clear-button,:host [part=input]::-webkit-inner-spin-button,:host [part=input]::-webkit-search-cancel-button,:host [part=input]::-webkit-search-decoration{-webkit-appearance:none}:host [part=input]:hover{border-color:#77777d;color:#c2c2c2}:host [part=button]{touch-action:manipulation}:host{--first-icon:previous;--last-icon:next;--previous-icon:left;--next-icon:right}:host [part=input]:focus{background-size:100% 2px,100% 1px!important;background-position:center bottom!important;border-color:#f93;border-style:dotted}');

package/lib/pagination/themes/solar/pearl/index.js

@@ -1,6 +1,5 @@
-import '@refinitiv-ui/elements/lib/button/themes/solar/pearl';
-import '@refinitiv-ui/elements/lib/text-field/themes/solar/pearl';
-import '@refinitiv-ui/elements/lib/button-bar/themes/solar/pearl';
-import '@refinitiv-ui/elements/lib/layout/themes/solar/pearl';
+import '@refinitiv-ui/elements/button/themes/solar/pearl';
+import '@refinitiv-ui/elements/button-bar/themes/solar/pearl';
+import '@refinitiv-ui/elements/layout/themes/solar/pearl';
 
-elf.customStyles.define('ef-pagination', ':host [part=container]{align-items:center;justify-content:flex-end}:host [part=input]{min-width:40px;text-align:center;height:23px;width:150px;margin:0 1px}:host [part=button],:host [part=input]{touch-action:manipulation}:host{--first-icon:previous;--last-icon:next;--previous-icon:left;--next-icon:right}');
+elf.customStyles.define('ef-pagination', ':host [part=container]{align-items:center;justify-content:flex-end}:host [part=label]{clip:rect(1px,1px,1px,1px);-webkit-clip-path:inset(50%);clip-path:inset(50%);height:1px;width:1px;margin:-1px;overflow:hidden;padding:0;position:absolute}:host [part=input]{display:none;-webkit-appearance:none;-moz-appearance:none;appearance:none;font-family:inherit;font-size:13rem;font-weight:400;max-width:100%;padding:0 5px;outline:0;box-sizing:border-box;display:inline-flex;align-items:center;position:relative;vertical-align:middle;color:#484848;border-radius:0;background-color:#fff;text-overflow:ellipsis;border:1px solid #a9afba;touch-action:manipulation;min-width:40px;text-align:center;height:23px;width:150px;margin:0 1px}:host [part=input][disabled]{color:rgba(72,72,72,.6);border:1px solid rgba(169,175,186,.6)}:host [part=input][type=number]{padding-right:0}:host [part=input][warning]{border:1px solid #f93}:host [part=input][warning][disabled]{color:rgba(72,72,72,.6);border:1px solid rgba(255,153,51,.6)}:host [part=input][error],:host [part=input][error][warning]{border:1px solid #d94255}:host [part=input][error][disabled],:host [part=input][error][warning][disabled]{color:rgba(72,72,72,.6);border:1px solid rgba(217,66,85,.6)}:host [part=input] ::-ms-clear{display:none}:host [part=input]::-webkit-clear-button,:host [part=input]::-webkit-inner-spin-button,:host [part=input]::-webkit-search-cancel-button,:host [part=input]::-webkit-search-decoration{-webkit-appearance:none}:host [part=input]:hover{border-color:#bfc3cb;color:#484848}:host [part=button]{touch-action:manipulation}:host{--first-icon:previous;--last-icon:next;--previous-icon:left;--next-icon:right}:host [part=input]:focus{background-size:100% 2px,100% 1px!important;background-position:center bottom!important;border-color:#ffb266;border-style:dotted}');

package/lib/panel/index.d.ts

@@ -32,6 +32,11 @@ export declare class Panel extends BasicElement {
      */
     protected render(): TemplateResult;
 }
+declare global {
+    interface HTMLElementTagNameMap {
+        'ef-panel': Panel;
+    }
+}
 
 declare global {
   interface HTMLElementTagNameMap {