@refinitiv-ui/elements 5.9.0 → 5.10.1

package/lib/pagination/custom-elements.json

@@ -6,22 +6,14 @@
       "description": "Used to control and navigate through multiple pages",
       "attributes": [
         {
-          "name": "page",
-          "description": "Set current page",
-          "type": "string",
-          "default": "\"1\""
+          "name": "value",
+          "description": "Current page",
+          "type": "string"
         },
         {
-          "name": "page-size",
-          "description": "Number of item per page",
-          "type": "string",
-          "default": "\"10\""
-        },
-        {
-          "name": "total-items",
-          "description": "Total items",
-          "type": "string",
-          "default": "\"10\""
+          "name": "max",
+          "description": "Max page",
+          "type": "string"
         },
         {
           "name": "disabled",
@@ -32,25 +24,16 @@
       ],
       "properties": [
         {
-          "name": "page",
-          "attribute": "page",
-          "description": "Set current page",
-          "type": "string",
-          "default": "\"1\""
-        },
-        {
-          "name": "pageSize",
-          "attribute": "page-size",
-          "description": "Number of item per page",
-          "type": "string",
-          "default": "\"10\""
+          "name": "value",
+          "attribute": "value",
+          "description": "Current page",
+          "type": "string"
         },
         {
-          "name": "totalItems",
-          "attribute": "total-items",
-          "description": "Total items",
-          "type": "string",
-          "default": "\"10\""
+          "name": "max",
+          "attribute": "max",
+          "description": "Max page",
+          "type": "string"
         },
         {
           "name": "disabled",
@@ -62,8 +45,8 @@
       ],
       "events": [
         {
-          "name": "page-changed",
-          "description": "Fired when the `page` property is changed"
+          "name": "value-changed",
+          "description": "Fired when the `value` property is changed"
         }
       ],
       "methods": [

package/lib/pagination/custom-elements.md

@@ -4,12 +4,11 @@ Used to control and navigate through multiple pages
 
 ## Properties
 
-| Property     | Attribute     | Type      | Default | Description             |
-|--------------|---------------|-----------|---------|-------------------------|
-| `disabled`   | `disabled`    | `boolean` | false   | Set state to disable    |
-| `page`       | `page`        | `string`  | "1"     | Set current page        |
-| `pageSize`   | `page-size`   | `string`  | "10"    | Number of item per page |
-| `totalItems` | `total-items` | `string`  | "10"    | Total items             |
+| Property   | Attribute  | Type      | Default | Description          |
+|------------|------------|-----------|---------|----------------------|
+| `disabled` | `disabled` | `boolean` | false   | Set state to disable |
+| `max`      | `max`      | `string`  |         | Max page             |
+| `value`    | `value`    | `string`  |         | Current page         |
 
 ## Methods
 
@@ -22,6 +21,6 @@ Used to control and navigate through multiple pages
 
 ## Events
 
-| Event          | Description                               |
-|----------------|-------------------------------------------|
-| `page-changed` | Fired when the `page` property is changed |
+| Event           | Description                                |
+|-----------------|--------------------------------------------|
+| `value-changed` | Fired when the `value` property is changed |

package/lib/pagination/index.d.ts

@@ -8,7 +8,7 @@ import '@refinitiv-ui/phrasebook/lib/locale/en/pagination.js';
 import { Translate } from '@refinitiv-ui/translate';
 /**
  * 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
  */
 export declare class Pagination extends BasicElement {
     /**
@@ -17,126 +17,182 @@ export declare class Pagination extends BasicElement {
      */
     static get version(): string;
     /**
-     * A `CSSResultGroup` that will be used
-     * to style the host, slotted children
-     * and the internal template of the element.
-     * @return CSS template
+     * Current page internal current page value
      */
-    static get styles(): CSSResultGroup;
+    private _value;
+    /**
+     * Internal current page
+     * @returns current page
+     */
+    private get internalValue();
+    /**
+     * Current page
+     */
+    get value(): string;
+    /**
+     * Set current page
+     * @param value current page
+     */
+    set value(value: string);
+    /**
+     * Max page
+     */
+    protected _max: string;
+    /**
+     * Internal max page
+     * @returns max page
+     */
+    private get internalMax();
+    /**
+     * Max page
+     * @returns max page
+     */
+    get max(): string;
+    /**
+     * Set max page
+     * @param value max page
+     */
+    set max(value: string);
+    /**
+     * Current page
+     * @returns current page
+     * @deprecated
+     * @ignore
+     */
+    get page(): string;
     /**
      * Set current page
+     * @param value - Set current page
+     * @deprecated
+     * @ignore
      */
-    page: string;
+    set page(value: string);
     /**
      * Number of item per page
+     * @returns number of items per page
+     * @deprecated
+     * @ignore
      */
-    pageSize: string;
+    get pageSize(): string;
     /**
-     * Total items
+     * Set number of item per page
+     * @param value - number of item per page
+     * @deprecated
+     * @ignore
      */
-    totalItems: string;
+    set pageSize(value: string);
     /**
-     * Set state to disable
+     * Number of item per page internal value
+     * @deprecated
      */
-    disabled: boolean;
+    private _pageSize;
     /**
-     * Getter for info part
+     * Internal page size
+     * @deprecated
+     * @returns page size
      */
-    private infoElement;
+    private get internalPageSize();
     /**
-      * Getter for text field as input part
-      */
-    private input;
+     * Total items internal value
+     * @deprecated
+     */
+    private _totalItems;
     /**
-      * Getter for first button as first part
-      */
-    private firstPageButton;
+     * Internal total items
+     * @returns total items
+     * @deprecated
+     */
+    private get internalTotalitems();
     /**
-      * Getter for previous button as previous part
-      */
-    private previousPageButton;
+     * Total items
+     * @returns total items
+     * @deprecated
+     * @ignore
+     */
+    get totalItems(): string;
     /**
-    * Getter for next button as next part
-    */
-    private nextPageButton;
+     * Set total items
+     * @param value total items
+     * @deprecated
+     * @ignore
+     */
+    set totalItems(value: string);
     /**
-    * Getter for last button as last part
-    */
-    private lastPageButton;
+     * Set state to disable
+     */
+    disabled: boolean;
+    /**
+     * Get infinite pagination state
+     * @returns infinite pagination state
+     */
+    private get infinitePaginate();
+    /**
+     * Getter for text field as input part
+     */
+    private input;
     /**
      * Used for translations
      */
     protected t: Translate;
     /**
-     * Invoked whenever the element is updated
-     * @param changedProperties Map of changed properties with old values
-     * @returns {void}
+     * Getter for display text in the input
+     * @returns input text
      */
-    protected updated(changedProperties: PropertyValues): void;
+    protected get inputText(): string;
     /**
-     * Handle when page-size property changed
-     * @returns {void}
+     * State for check the input focus
      */
-    private pageSizeChanged;
+    private inputFocused;
     /**
-     * Handle when total-items property changed
-     * @returns {void}
+     * State for checking the first page button is available
      */
-    private totalItemsChanged;
+    protected get useFirstButton(): boolean;
     /**
-     * Handle when disabled property changed
-     * @returns {void}
+     * State for checking the previous page button is available
      */
-    private disabledChanged;
+    protected get usePreviousButton(): boolean;
     /**
-     * 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}
+     * State for checking the next page button is available
      */
-    private updateButtons;
+    protected get useNextButton(): boolean;
     /**
-     * Calculate and return total pages
-     * Total pages should never less than 1
-     * @returns {number} Number of total page
+     * State for checking the last page button is available
      */
-    private get totalPage();
+    protected get useLastButton(): boolean;
     /**
-     * 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
+     * @override
      */
-    private validatePage;
+    protected updated(changedProperties: PropertyValues): void;
     /**
-     * Get text to display in info part
-     * @returns {PageInfo} Used for translations
+     * Validate page value which returns true when value is valid
+     * @param value value
+     * @param warning show warning message when value is invalid
+     * @param propName property name to show in warning message
+     * @returns result of validation
      */
-    private get pageInfo();
+    private validatePage;
     /**
-     * Hide info part when it's too small
+     * Handles action when Enter and Tab key is press onto the input
+     * @param event Keyboard event
      * @returns {void}
      */
-    private onResize;
+    private onInputKeyDown;
     /**
-     * Handle when input is focus
+     * Handles action when input focused change
+     * @param event focus change event
      * @returns {void}
      */
-    private onInputFocus;
+    private onInputFocusedChanged;
     /**
-     * Handle when input lost focus
-     * @param event Event object
+     * Update page by using value from the input
      * @returns {void}
      */
-    private onInputBlur;
+    private updatePageInput;
     /**
-     * Handles action when Enter key is press onto the input
-     * @param event Keyboard event
-     * @returns {void}
+     * Select text in input when update element complete
+     * @returns returns a promise void
      */
-    private onInputKeyDown;
+    private selectInput;
     /**
      * Updates page value depending on direction
      * @param direction page value direction
@@ -144,6 +200,11 @@ export declare class Pagination extends BasicElement {
      * @returns {void}
      */
     private updatePage;
+    /**
+     * Fires event when value change
+     * @returns {void}
+     */
+    private notifyValueChange;
     /**
      * Go to the next page
      * @returns {void}
@@ -160,7 +221,7 @@ export declare class Pagination extends BasicElement {
      */
     previous(): void;
     /**
-     * Go to the previous page and fires evetn
+     * Go to the previous page and fires event
      * @returns {void}
      */
     private onPreviousTap;
@@ -184,10 +245,17 @@ export declare class Pagination extends BasicElement {
      * @returns {void}
      */
     private onLastTap;
+    /**
+     * A `CSSResultGroup` that will be used
+     * to style the host, slotted children
+     * and the internal template of the element.
+     * @return CSS template
+     */
+    static get styles(): CSSResultGroup;
     /**
      * A `TemplateResult` that will be used
      * to render the updated internal template.
-     * @return {TemplateResult} Render template
+     * @return Render template
      */
     protected render(): TemplateResult;
 }