@refinitiv-ui/elements 5.9.1 → 5.10.0

package/lib/pagination/index.js

@@ -1,7 +1,8 @@
 import { __decorate } from "tslib";
-import { BasicElement, html, css } from '@refinitiv-ui/core';
+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 { VERSION } from '../version.js';
 import '../button/index.js';
@@ -10,29 +11,42 @@ import '../layout/index.js';
 import '../text-field/index.js';
 import '@refinitiv-ui/phrasebook/lib/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.');
 /**
  * Used to control and navigate through multiple pages
- * @fires page-changed - Fired when the `page` property is changed
+ * @fires value-changed - Fired when the `value` property is changed
  */
 let Pagination = class Pagination extends BasicElement {
     constructor() {
         super(...arguments);
         /**
-         * Set current page
+         * Current page internal current page value
          */
-        this.page = '1';
+        this._value = '';
         /**
-         * Number of item per page
+         * Max page
          */
-        this.pageSize = '10';
+        this._max = '';
         /**
-         * Total items
+         * Number of item per page internal value
+         * @deprecated
          */
-        this.totalItems = '10';
+        this._pageSize = '';
+        /**
+         * Total items internal value
+         * @deprecated
+         */
+        this._totalItems = '';
         /**
          * Set state to disable
          */
         this.disabled = false;
+        /**
+         * State for check the input focus
+         */
+        this.inputFocused = false;
     }
     /**
      * Element version number
@@ -42,209 +56,335 @@ let Pagination = class Pagination extends BasicElement {
         return VERSION;
     }
     /**
-     * A `CSSResultGroup` that will be used
-     * to style the host, slotted children
-     * and the internal template of the element.
-     * @return CSS template
+     * Internal current page
+     * @returns current page
      */
-    static get styles() {
-        return css `
-      :host {
-        display: block;
-        --responsive-width: 450;
-      }
-    `;
+    get internalValue() {
+        let value = parseInt(this._value, 10) || 0;
+        if (value <= 0) {
+            value = 1;
+        }
+        return value;
     }
     /**
-     * Invoked whenever the element is updated
-     * @param changedProperties Map of changed properties with old values
-     * @returns {void}
+     * Current page
      */
-    updated(changedProperties) {
-        super.updated(changedProperties);
-        if (changedProperties.has('disabled')) {
-            this.disabledChanged();
+    get value() {
+        return this._value;
+    }
+    /**
+     * Set current page
+     * @param value current page
+     */
+    set value(value) {
+        let newValue = value;
+        if (!newValue || !this.validatePage(newValue, true, 'value')) {
+            newValue = '';
         }
-        if (changedProperties.has('page')) {
-            const previousPage = changedProperties.get('page');
-            this.page = this.validatePage(previousPage, this.page);
-            this.updateButtons();
+        const oldValue = this._value;
+        if (oldValue !== newValue) {
+            this._value = newValue.toString();
         }
-        if (changedProperties.has('pageSize')) {
-            this.pageSizeChanged();
+        this.requestUpdate('value', oldValue);
+    }
+    /**
+     * Internal max page
+     * @returns max page
+     */
+    get internalMax() {
+        const max = parseInt(this._max, 10) || 0;
+        const pageSize = this.internalPageSize;
+        const totalItems = this.internalTotalitems;
+        if (!max && !totalItems) {
+            return Infinity;
         }
-        if (changedProperties.has('totalItems')) {
-            this.totalItemsChanged();
+        else if (max >= 1) {
+            return max;
         }
+        if (pageSize > 0) {
+            const totalPage = Math.ceil(totalItems / pageSize);
+            return totalPage >= 1 ? totalPage : 1;
+        }
+        return 1;
     }
     /**
-     * Handle when page-size property changed
-     * @returns {void}
+     * Max page
+     * @returns max page
+     */
+    get max() {
+        return this._max;
+    }
+    /**
+     * Set max page
+     * @param value max page
      */
-    pageSizeChanged() {
-        const page = Number.parseInt(this.page, 10);
-        const pageSize = Number.parseInt(this.pageSize, 10);
-        // page must have at least 1 item
-        if (pageSize < 1) {
-            this.pageSize = '1';
+    set max(value) {
+        let newValue = value;
+        if (!newValue || !this.validatePage(value, true, 'max')) {
+            newValue = '';
         }
-        if (page > this.totalPage) {
-            this.page = this.totalPage.toString();
+        const oldValue = this._max;
+        if (oldValue !== newValue) {
+            this._max = newValue.toString();
         }
-        this.updateButtons();
+        this.requestUpdate('max', oldValue);
     }
     /**
-     * Handle when total-items property changed
-     * @returns {void}
+     * Current page
+     * @returns current page
+     * @deprecated
+     * @ignore
+     */
+    get page() {
+        pageDeprecation.once();
+        return this._value;
+    }
+    /**
+     * Set current page
+     * @param value - Set current page
+     * @deprecated
+     * @ignore
      */
-    totalItemsChanged() {
-        const page = Number.parseInt(this.page, 10);
-        const totalItems = Number.parseInt(this.totalItems, 10);
-        // handle if someone doesn't know how to count
-        if (totalItems < 1) {
-            this.totalItems = '0';
-            this.page = '1';
+    set page(value) {
+        pageDeprecation.show();
+        let newValue = value;
+        if (!newValue || !this.validatePage(value, true, 'page')) {
+            newValue = '';
         }
-        else if (page > this.totalPage) {
-            this.page = this.totalPage.toString();
+        const oldValue = this._value;
+        if (oldValue !== newValue) {
+            this._value = newValue.toString();
         }
-        this.updateButtons();
+        this.requestUpdate('page', oldValue);
     }
     /**
-     * Handle when disabled property changed
-     * @returns {void}
+     * 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
      */
-    disabledChanged() {
-        if (this.disabled) {
-            this.infoElement.setAttribute('disabled', '');
+    set pageSize(value) {
+        pageSizeDeprecation.show();
+        let newValue = value;
+        if (!newValue || !this.validatePage(value, true, 'page-size')) {
+            newValue = '';
         }
-        else {
-            this.infoElement.removeAttribute('disabled');
+        // 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.input.disabled = this.disabled;
-        // recalculate button state
-        this.updateButtons();
+        this.requestUpdate('pageSize', oldValue);
     }
     /**
-     * Update disable/enable state of first, previous, next, and last
-     * First and previous should be disabled if showing first page
-     * Next and last should be disabled if showing last page
-     * @returns {void}
+     * Internal page size
+     * @deprecated
+     * @returns page size
      */
-    updateButtons() {
-        const page = Number.parseInt(this.page, 10);
-        const firstPage = this.disabled || page <= 1;
-        const lastPage = this.disabled || page >= this.totalPage;
-        this.previousPageButton.disabled = firstPage;
-        this.firstPageButton.disabled = firstPage;
-        this.nextPageButton.disabled = lastPage;
-        this.lastPageButton.disabled = lastPage;
+    get internalPageSize() {
+        return parseInt(this._pageSize, 10);
     }
     /**
-     * Calculate and return total pages
-     * Total pages should never less than 1
-     * @returns {number} Number of total page
+     * Internal total items
+     * @returns total items
+     * @deprecated
      */
-    get totalPage() {
-        const pageSize = Number.parseInt(this.pageSize, 10);
-        const totalItems = Number.parseInt(this.totalItems, 10);
-        if (pageSize > 0) {
-            const totalPage = Math.ceil(totalItems / pageSize);
-            return totalPage > 0 ? totalPage : 1;
-        }
-        return 1;
+    get internalTotalitems() {
+        const totalItems = parseInt(this._totalItems, 10) || 0;
+        return totalItems >= 1 ? totalItems : 0;
     }
     /**
-     * Check a new page value to be usable
-     * if a new page value is allow then return newPage
-     * Condition to be old value is null or NaN or undefined or string or less than 1
-     * @param oldPage a old page value
-     * @param newPage a new page value
-     * @return return a new page value
+     * Total items
+     * @returns total items
+     * @deprecated
+     * @ignore
      */
-    validatePage(oldPage, newPage) {
-        let page = Number.parseInt(newPage, 10);
-        if (!page || isNaN(Number(newPage)) || isNaN(page)) {
-            page = Number.parseInt(oldPage, 10);
+    get totalItems() {
+        totalItemsDeprecation.once();
+        return this._totalItems;
+    }
+    /**
+     * Set total items
+     * @param value total items
+     * @deprecated
+     * @ignore
+     */
+    set totalItems(value) {
+        totalItemsDeprecation.show();
+        let newValue = value;
+        if (!newValue || !this.validatePage(value, true, 'total-items')) {
+            newValue = '';
         }
-        else if (page > this.totalPage) {
-            page = this.totalPage;
+        // 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();
         }
-        else if (page < 1) {
-            page = 1;
+        const oldValue = this._totalItems;
+        if (oldValue !== newValue) {
+            this._totalItems = newValue;
         }
-        return page.toString();
+        this.requestUpdate('totalItems', oldValue);
     }
     /**
-     * Get text to display in info part
-     * @returns {PageInfo} Used for translations
+     * Get infinite pagination state
+     * @returns infinite pagination state
      */
-    get pageInfo() {
-        const page = Number.parseInt(this.page, 10);
-        const pageSize = Number.parseInt(this.pageSize, 10);
-        const totalCount = Number.parseInt(this.totalItems, 10);
-        const from = ((page - 1) * pageSize) + 1;
-        const to = page * pageSize > totalCount ? totalCount : page * pageSize;
-        return {
-            from,
-            to,
-            totalCount,
-            pageSize
-        };
+    get infinitePaginate() {
+        return this.internalMax === Infinity; // internalMax always returns 1-Infinity
     }
     /**
-     * Hide info part when it's too small
-     * @returns {void}
+     * Getter for display text in the input
+     * @returns input text
      */
-    onResize() {
-        const display = this.clientWidth < Number.parseInt(this.getComputedVariable('--responsive-width'), 10) ? 'none' : 'block';
-        this.infoElement.style.display = display;
+    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 }));
+        }
     }
     /**
-     * Handle when input is focus
-     * @returns {void}
+     * State for checking the first page button is available
      */
-    onInputFocus() {
-        this.input.value = this.page;
-        setTimeout(() => {
-            this.input.select();
-        });
+    get useFirstButton() {
+        return !this.disabled && this.internalValue >= 2;
     }
     /**
-     * Handle when input lost focus
-     * @param event Event object
-     * @returns {void}
+     * State for checking the previous page button is available
+     */
+    get usePreviousButton() {
+        return this.useFirstButton;
+    }
+    /**
+     * State for checking the next page button is available
+     */
+    get useNextButton() {
+        return !this.disabled && this.internalValue < this.internalMax;
+    }
+    /**
+     * State for checking the last page button is available
      */
-    onInputBlur(event) {
-        const oldPageValue = this.page;
-        this.page = this.validatePage(this.page, event.target.value);
-        // need this to update input text
-        this.requestUpdate();
-        if (this.page !== oldPageValue) {
-            this.notifyPropertyChange('page', this.page);
+    get useLastButton() {
+        return this.useNextButton && !this.infinitePaginate;
+    }
+    /**
+     * @override
+     */
+    updated(changedProperties) {
+        super.updated(changedProperties);
+        if (this.inputFocused && changedProperties.has('inputFocused')) {
+            void this.selectInput();
+        }
+    }
+    /**
+     * Validate integer value
+     * @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
+     */
+    validatePage(value, warning = false, propName = '') {
+        if ((/^[1-9]([0-9]+)?$/).test(value)) {
+            return true;
+        }
+        else {
+            if (value !== null && warning && propName) {
+                new WarningNotice(`${this.localName} : The specified value "${value}" of ${propName} property is not valid, The value must be integer and greater than 0.`).show();
+            }
+            return false;
         }
     }
     /**
-     * Handles action when Enter key is press onto the input
+     * Handles action when Enter and Tab key is press onto the input
      * @param event Keyboard event
      * @returns {void}
      */
     onInputKeyDown(event) {
         var _a, _b;
-        if (event.key === 'Enter' || event.keyCode === 13) {
-            /*
-            * 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);
-            event.preventDefault();
+        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
+     * @returns {void}
+     */
+    updatePageInput() {
+        // Prevent update page to the same value
+        if (this.value === this.input.value) {
+            return;
+        }
+        const oldValue = this.value;
+        let newValue = parseInt(this.input.value, 10);
+        // Reset input and boundary value into supported range.
+        if (this.validatePage(this.input.value)) {
+            if (newValue <= 0) {
+                newValue = 1;
+            }
+            else if (newValue > this.internalMax) {
+                newValue = this.internalMax;
+            }
+            this.value = newValue.toString();
+        }
+        else if (!isNaN(newValue)) {
+            this.value = '1';
+        }
+        if (this.value !== oldValue) {
+            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
@@ -252,21 +392,35 @@ let Pagination = class Pagination extends BasicElement {
      * @returns {void}
      */
     updatePage(direction, event = false) {
-        const page = parseInt(this.page, 10);
-        const limit = direction === 'increment' ? page < this.totalPage : page > 1;
-        if (limit) {
-            this.page = direction === 'increment' ? (page + 1).toString() : (page - 1).toString();
+        /**
+         * Handle in case the value of max property is greater than value of value/page property,
+         * which it might happen by using developer API.
+         */
+        let page = this.internalValue;
+        if (page > this.internalMax) {
+            page = this.internalMax + 1;
+        }
+        const limit = direction === 'increment' ? page >= this.internalMax : page <= 1;
+        if (!limit) {
+            this.value = direction === 'increment' ? (page + 1).toString() : (page - 1).toString();
             if (event) {
-                this.notifyPropertyChange('page', this.page);
+                this.notifyValueChange();
             }
         }
     }
+    /**
+     * Fires event when value change
+     * @returns {void}
+     */
+    notifyValueChange() {
+        this.notifyPropertyChange('value', this.value);
+        this.notifyPropertyChange('page', this.value); // deprecated. support backwards compatibility.
+    }
     /**
      * Go to the next page
      * @returns {void}
      */
     next() {
-        this.input.blur();
         this.updatePage('increment');
     }
     /**
@@ -274,7 +428,6 @@ let Pagination = class Pagination extends BasicElement {
      * @returns {void}
      */
     onNextTap() {
-        this.input.blur();
         this.updatePage('increment', true);
     }
     /**
@@ -282,15 +435,13 @@ let Pagination = class Pagination extends BasicElement {
      * @returns {void}
      */
     previous() {
-        this.input.blur();
         this.updatePage('decrement');
     }
     /**
-     * Go to the previous page and fires evetn
+     * Go to the previous page and fires event
      * @returns {void}
      */
     onPreviousTap() {
-        this.input.blur();
         this.updatePage('decrement', true);
     }
     /**
@@ -298,8 +449,7 @@ let Pagination = class Pagination extends BasicElement {
      * @returns {void}
      */
     first() {
-        this.input.blur();
-        this.page = '1';
+        this.value = '1';
     }
     /**
      * Go to the first page and fires event
@@ -307,15 +457,18 @@ let Pagination = class Pagination extends BasicElement {
      */
     onFirstTap() {
         this.first();
-        this.notifyPropertyChange('page', this.page);
+        this.notifyValueChange();
     }
     /**
      * Go to the last page
      * @returns {void}
      */
     last() {
-        this.input.blur();
-        this.page = this.totalPage.toString();
+        if (this.infinitePaginate) {
+            new WarningNotice(`${this.localName}: Cannot call "last()" when "max" attribute/property is unset.`).show();
+            return;
+        }
+        this.value = this.internalMax.toString();
     }
     /**
      * Go to the last page and fires event
@@ -323,35 +476,44 @@ let Pagination = class Pagination extends BasicElement {
      */
     onLastTap() {
         this.last();
-        this.notifyPropertyChange('page', this.page);
+        this.notifyValueChange();
+    }
+    /**
+     * 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() {
+        return css `
+      :host {
+        display: inline-block;
+      }
+    `;
     }
     /**
      * A `TemplateResult` that will be used
      * to render the updated internal template.
-     * @return {TemplateResult} Render template
+     * @return Render template
      */
     render() {
         return html `
-      <ef-layout part="container" flex nowrap @resize="${this.onResize}">
-        <div id="info" part="info">${this.t('ITEM_INFO', this.pageInfo)}</div>
+      <ef-layout part="container" flex nowrap>
         <ef-button-bar part="buttons">
-          <ef-button id="first" icon="skip-to-start" @tap="${this.onFirstTap}"></ef-button>
-          <ef-button id="previous" icon="left" @tap="${this.onPreviousTap}"></ef-button>
+          <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
           id="input"
           part="input"
-          @focus="${this.onInputFocus}"
-          @blur="${this.onInputBlur}"
-          @keydown="${this.onInputKeyDown}"
-          .value="${this.t('PAGE_OF', {
-            page: this.page,
-            pageTotal: this.totalPage
-        })}"
+          @focused-changed=${this.onInputFocusedChanged}
+          @keydown=${this.onInputKeyDown}
+          .value=${this.inputText}
+          .disabled=${this.disabled}
           no-spinner></ef-text-field>
         <ef-button-bar part="buttons">
-          <ef-button id="next" icon="right" @tap="${this.onNextTap}"></ef-button>
-          <ef-button id="last" icon="skip-to-end" @tap="${this.onLastTap}"></ef-button>
+          <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>
       </ef-layout>
     `;
@@ -359,37 +521,31 @@ let Pagination = class Pagination extends BasicElement {
 };
 __decorate([
     property({ type: String })
-], Pagination.prototype, "page", void 0);
+], Pagination.prototype, "value", null);
+__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", void 0);
+], Pagination.prototype, "pageSize", null);
 __decorate([
     property({ type: String, attribute: 'total-items' })
-], Pagination.prototype, "totalItems", void 0);
+], Pagination.prototype, "totalItems", null);
 __decorate([
     property({ type: Boolean, reflect: true })
 ], Pagination.prototype, "disabled", void 0);
-__decorate([
-    query('#info')
-], Pagination.prototype, "infoElement", void 0);
 __decorate([
     query('#input')
 ], Pagination.prototype, "input", void 0);
-__decorate([
-    query('#first')
-], Pagination.prototype, "firstPageButton", void 0);
-__decorate([
-    query('#previous')
-], Pagination.prototype, "previousPageButton", void 0);
-__decorate([
-    query('#next')
-], Pagination.prototype, "nextPageButton", void 0);
-__decorate([
-    query('#last')
-], Pagination.prototype, "lastPageButton", void 0);
 __decorate([
     translate()
 ], Pagination.prototype, "t", void 0);
+__decorate([
+    state()
+], Pagination.prototype, "inputFocused", void 0);
 Pagination = __decorate([
     customElement('ef-pagination', {
         alias: 'emerald-pagination'