fix(core/pagination): select and overflow behavior (#486)

Co-authored-by: Daniel Leroux <[email protected]>

packages/core/src/components/pagination/pagination.scss

@@ -45,7 +45,7 @@
     margin-inline-start: $large-space;
 
     ix-select {
-      width: 4.125rem;
+      width: 4.5rem;
       margin-inline-start: $large-space;
     }
   }

packages/core/src/components/pagination/pagination.tsx

@@ -7,7 +7,15 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import { Component, Event, EventEmitter, h, Host, Prop } from '@stencil/core';
+import {
+  Component,
+  Element,
+  Event,
+  EventEmitter,
+  h,
+  Host,
+  Prop,
+} from '@stencil/core';
 
 /**
  * @since 1.5.0
@@ -20,6 +28,8 @@ import { Component, Event, EventEmitter, h, Host, Prop } from '@stencil/core';
 export class Pagination {
   private readonly maxCountPages = 7;
 
+  @Element() hostElement!: HTMLIxPaginationElement;
+
   /**
    * Advanced mode
    */
@@ -72,14 +82,22 @@ export class Pagination {
    */
   @Event() itemCountChanged: EventEmitter<number>;
 
+  get pageInput() {
+    return this.hostElement.querySelector(
+      '.advanced-pagination input.form-control'
+    );
+  }
+
   private selectPage(index: number) {
-    if (index < 0 || index >= this.count) {
-      console.warn(`ix-pagination - invalid index ${index}`);
-      return;
+    if (index < 0) {
+      this.selectedPage = 0;
+    } else if (index > this.count - 1) {
+      this.selectedPage = this.count - 1;
+    } else {
+      this.selectedPage = index;
     }
 
-    this.selectedPage = index;
-    this.pageSelected.emit(index);
+    this.pageSelected.emit(this.selectedPage);
   }
 
   private increase() {
@@ -204,10 +222,12 @@ export class Pagination {
             <input
               class="form-control"
               type="number"
-              value={this.selectedPage}
+              min="1"
+              max={this.count}
+              value={this.selectedPage + 1}
               onChange={(e) => {
                 const index = Number.parseInt(e.target['value']);
-                this.selectPage(index);
+                this.selectPage(index - 1);
               }}
             />
             <span class="total-count">

packages/core/src/components/pagination/test/pagination.spec.tsx

@@ -17,9 +17,7 @@ describe('ix-pagination', () => {
       html: `<ix-pagination count="10"></ix-pagination>`,
     });
     const pagination = page.doc.querySelector('ix-pagination');
-    const button = page.doc.querySelectorAll(
-      'ix-index-button'
-    )[5] as HTMLIxIndexButtonElement;
+    const button = page.doc.querySelectorAll('ix-index-button')[5];
     button.click();
     expect(pagination.selectedPage).toBe(6);
   });
@@ -30,24 +28,20 @@ describe('ix-pagination', () => {
       html: `<ix-pagination count="10" selected-page="4"></ix-pagination>`,
     });
     const pagination = page.doc.querySelector('ix-pagination');
-    const button = page.doc.querySelectorAll(
-      'ix-index-button'
-    )[6] as HTMLIxIndexButtonElement;
+    const button = page.doc.querySelectorAll('ix-index-button')[6];
     button.click();
     expect(pagination.selectedPage).toBe(9);
   });
 
   it('overflow both select lower page', async () => {
     const page = await newSpecPage({
       components: [Pagination],
-      html: `<ix-pagination count="10" selected-page="4"></ix-pagination>`,
+      html: `<ix-pagination count="10" selected-page="5"></ix-pagination>`,
     });
     const pagination = page.doc.querySelector('ix-pagination');
-    const button = page.doc.querySelectorAll(
-      'ix-index-button'
-    )[1] as HTMLIxIndexButtonElement;
+    const button = page.doc.querySelectorAll('ix-index-button')[1];
     button.click();
-    expect(pagination.selectedPage).toBe(1);
+    expect(pagination.selectedPage).toBe(2);
   });
 
   it('overflow start select lower page', async () => {
@@ -56,9 +50,7 @@ describe('ix-pagination', () => {
       html: `<ix-pagination count="10" selected-page="9"></ix-pagination>`,
     });
     const pagination = page.doc.querySelector('ix-pagination');
-    const button = page.doc.querySelectorAll(
-      'ix-index-button'
-    )[1] as HTMLIxIndexButtonElement;
+    const button = page.doc.querySelectorAll('ix-index-button')[1];
     button.click();
     expect(pagination.selectedPage).toBe(3);
   });