fix(pagination-nav)!: use 1-indexing to be consistent with Pagination (#1518)

Fixes #1513

src/PaginationNav/PaginationNav.svelte

@@ -1,12 +1,12 @@
 <script>
   /**
-   * @event {{ page: number; }} change
+   * @event {{ page: number; }} change - fires after every user interaction
    * @event {{ page: number; }} click:button--previous
    * @event {{ page: number; }} click:button--next
    */
 
   /** Specify the current page index */
-  export let page = 0;
+  export let page = 1;
 
   /** Specify the total number of pages */
   export let total = 10;
@@ -23,7 +23,7 @@
   /** Specify the backward button text */
   export let backwardText = "Previous page";
 
-  import { afterUpdate, createEventDispatcher } from "svelte";
+  import { createEventDispatcher } from "svelte";
   import CaretLeft from "../icons/CaretLeft.svelte";
   import CaretRight from "../icons/CaretRight.svelte";
   import PaginationItem from "./PaginationItem.svelte";
@@ -33,13 +33,13 @@
   const dispatch = createEventDispatcher();
   const MIN = 4;
 
-  afterUpdate(() => {
-    dispatch("change", { page });
-  });
-
+  // number of overflow pages near the beginning of the nav
   let front = 0;
+
+  // number of overflow pages near the end of the nav
   let back = 0;
 
+  // number of nav overflow or items that may appear
   $: fit = shown >= MIN ? shown : MIN;
   $: startOffset = fit <= MIN && page > 1 ? 0 : 1;
   $: if (fit >= total) {
@@ -49,8 +49,8 @@
   $: if (fit < total) {
     const split = Math.ceil(fit / 2) - 1;
 
-    front = page - split + 1;
-    back = total - page - (fit - split) + 1;
+    front = page - split;
+    back = total - page - (fit - split) + 2;
 
     if (front <= 1) {
       back -= front <= 0 ? Math.abs(front) + 1 : 0;
@@ -62,6 +62,9 @@
       back = 0;
     }
   }
+
+  // all enumerable items to render in between
+  // overflow menus
   $: items = Array.from({ length: total })
     .map((e, i) => i)
     .slice(startOffset + front, (back + 1) * -1);
@@ -75,37 +78,47 @@
         tooltipAlignment="center"
         tooltipPosition="bottom"
         iconDescription="{backwardText}"
-        disabled="{!loop && page === 0}"
+        disabled="{!loop && page === 1}"
         icon="{CaretLeft}"
         on:click="{() => {
-          if (page - 1 < 0) {
-            if (loop) page = total - 1;
+          if (page <= 1) {
+            if (loop) page = total;
           } else {
             page--;
           }
           dispatch('click:button--previous', { page });
+          dispatch('change', { page });
         }}"
       />
     </li>
     {#if fit > MIN || (fit <= MIN && page <= 1)}
       <PaginationItem
         page="{1}"
-        active="{page === 0}"
-        on:click="{() => (page = 0)}"
+        active="{page === 1}"
+        on:click="{() => {
+          page = 1;
+          dispatch('change', { page });
+        }}"
       >
-        {page === 0 ? "Active, Page" : "Page"}
+        {page === 1 ? "Active, Page" : "Page"}
       </PaginationItem>
     {/if}
     <PaginationOverflow
       fromIndex="{startOffset}"
       count="{front}"
-      on:select="{({ detail }) => (page = detail.index)}"
+      on:select="{({ detail }) => {
+        page = detail.index;
+        dispatch('change', { page });
+      }}"
     />
     {#each items as item}
       <PaginationItem
         page="{item + 1}"
-        active="{page === item}"
-        on:click="{() => (page = item)}"
+        active="{page === item + 1}"
+        on:click="{() => {
+          page = item + 1;
+          dispatch('change', { page });
+        }}"
       >
         {page === item ? "Active, Page" : "Page"}
       </PaginationItem>
@@ -115,15 +128,19 @@
       count="{back}"
       on:select="{({ detail }) => {
         page = detail.index;
+        dispatch('change', { page });
       }}"
     />
     {#if total > 1}
       <PaginationItem
         page="{total}"
-        active="{page === total - 1}"
-        on:click="{() => (page = total - 1)}"
+        active="{page === total}"
+        on:click="{() => {
+          page = total;
+          dispatch('change', { page });
+        }}"
       >
-        {page === total - 1 ? "Active, Page" : "Page"}
+        {page === total ? "Active, Page" : "Page"}
       </PaginationItem>
     {/if}
     <li class:bx--pagination-nav__list-item="{true}">
@@ -132,15 +149,16 @@
         tooltipAlignment="center"
         tooltipPosition="bottom"
         iconDescription="{forwardText}"
-        disabled="{!loop && page === total - 1}"
+        disabled="{!loop && page === total}"
         icon="{CaretRight}"
         on:click="{() => {
-          if (page + 1 >= total) {
-            if (loop) page = 0;
+          if (page >= total) {
+            if (loop) page = 1;
           } else {
             page++;
           }
           dispatch('click:button--next', { page });
+          dispatch('change', { page });
         }}"
       />
     </li>