From 95901c270fddbfdf1508899353a880c55bcbb904 Mon Sep 17 00:00:00 2001
From: Eric Liu <ericyl.us@gmail.com>
Date: Sat, 5 Dec 2020 16:51:55 -0800
Subject: [PATCH] fix(pagination-nav): type dispatched events

---
 COMPONENT_INDEX.md                          | 10 +++++-----
 docs/src/COMPONENT_API.json                 | 18 +++++++++++++++---
 src/PaginationNav/PaginationNav.svelte      | 12 +++++++++---
 src/PaginationNav/PaginationOverflow.svelte |  6 +++++-
 tests/PaginationNav.test.svelte             | 14 +++++++++++++-
 types/PaginationNav/PaginationNav.d.ts      |  6 +++---
 6 files changed, 50 insertions(+), 16 deletions(-)

diff --git a/COMPONENT_INDEX.md b/COMPONENT_INDEX.md
index 8d8ac207..7f672802 100644
--- a/COMPONENT_INDEX.md
+++ b/COMPONENT_INDEX.md
@@ -2467,11 +2467,11 @@ None.
 
 ### Events
 
-| Event name             | Type       | Detail |
-| :--------------------- | :--------- | :----- |
-| click:button--previous | dispatched | --     |
-| click:button--next     | dispatched | --     |
-| change                 | dispatched | --     |
+| Event name             | Type       | Detail                         |
+| :--------------------- | :--------- | :----------------------------- |
+| change                 | dispatched | <code>{ page: number; }</code> |
+| click:button--previous | dispatched | <code>{ page: number; }</code> |
+| click:button--next     | dispatched | <code>{ page: number; }</code> |
 
 ## `PaginationSkeleton`
 
diff --git a/docs/src/COMPONENT_API.json b/docs/src/COMPONENT_API.json
index 65c2cc59..cb34b90b 100644
--- a/docs/src/COMPONENT_API.json
+++ b/docs/src/COMPONENT_API.json
@@ -6712,9 +6712,21 @@
       ],
       "slots": [],
       "events": [
-        { "type": "dispatched", "name": "click:button--previous" },
-        { "type": "dispatched", "name": "click:button--next" },
-        { "type": "dispatched", "name": "change" }
+        {
+          "type": "dispatched",
+          "name": "change",
+          "detail": "{ page: number; }"
+        },
+        {
+          "type": "dispatched",
+          "name": "click:button--previous",
+          "detail": "{ page: number; }"
+        },
+        {
+          "type": "dispatched",
+          "name": "click:button--next",
+          "detail": "{ page: number; }"
+        }
       ],
       "typedefs": [],
       "rest_props": { "type": "Element", "name": "nav" }
diff --git a/src/PaginationNav/PaginationNav.svelte b/src/PaginationNav/PaginationNav.svelte
index 1e97b5e9..9d76a61b 100644
--- a/src/PaginationNav/PaginationNav.svelte
+++ b/src/PaginationNav/PaginationNav.svelte
@@ -1,4 +1,10 @@
 <script>
+  /**
+   * @event {{ page: number; }} change
+   * @event {{ page: number; }} click:button--previous
+   * @event {{ page: number; }} click:button--next
+   */
+
   /** Specify the current page index */
   export let page = 0;
 
@@ -18,11 +24,11 @@
   export let backwardText = "Previous page";
 
   import { afterUpdate, createEventDispatcher } from "svelte";
-  import CaretLeft16 from "carbon-icons-svelte/lib/CaretLeft16";
-  import CaretRight16 from "carbon-icons-svelte/lib/CaretRight16";
+  import CaretLeft16 from "carbon-icons-svelte/lib/CaretLeft16/CaretLeft16.svelte";
+  import CaretRight16 from "carbon-icons-svelte/lib/CaretRight16/CaretRight16.svelte";
   import PaginationItem from "./PaginationItem.svelte";
   import PaginationOverflow from "./PaginationOverflow.svelte";
-  import { Button } from "../Button";
+  import Button from "../Button/Button.svelte";
 
   const dispatch = createEventDispatcher();
   const MIN = 4;
diff --git a/src/PaginationNav/PaginationOverflow.svelte b/src/PaginationNav/PaginationOverflow.svelte
index e142866e..7f4ccb5c 100644
--- a/src/PaginationNav/PaginationOverflow.svelte
+++ b/src/PaginationNav/PaginationOverflow.svelte
@@ -1,4 +1,8 @@
 <script>
+  /**
+   * @event {{ index: number; }} select
+   */
+
   /** Specify the pivot start index */
   export let fromIndex = 0;
 
@@ -6,7 +10,7 @@
   export let count = 0;
 
   import { createEventDispatcher } from "svelte";
-  import OverflowMenuHorizontal16 from "carbon-icons-svelte/lib/OverflowMenuHorizontal16";
+  import OverflowMenuHorizontal16 from "carbon-icons-svelte/lib/OverflowMenuHorizontal16/OverflowMenuHorizontal16.svelte";
   import PaginationItem from "./PaginationItem.svelte";
 
   const dispatch = createEventDispatcher();
diff --git a/tests/PaginationNav.test.svelte b/tests/PaginationNav.test.svelte
index a67c8552..d7e65fdb 100644
--- a/tests/PaginationNav.test.svelte
+++ b/tests/PaginationNav.test.svelte
@@ -4,4 +4,16 @@
 
 <PaginationNav />
 
-<PaginationNav total="{3}" loop />
+<PaginationNav
+  total="{3}"
+  loop
+  on:change="{(e) => {
+    console.log(e.detail); // { page: number; }
+  }}"
+  on:click:button--next="{(e) => {
+    console.log(e.detail); // { page: number; }
+  }}"
+  on:click:button--previous="{(e) => {
+    console.log(e.detail); // { page: number; }
+  }}"
+/>
diff --git a/types/PaginationNav/PaginationNav.d.ts b/types/PaginationNav/PaginationNav.d.ts
index faaa7180..be771e8f 100644
--- a/types/PaginationNav/PaginationNav.d.ts
+++ b/types/PaginationNav/PaginationNav.d.ts
@@ -42,8 +42,8 @@ export default class PaginationNav {
   $$prop_def: PaginationNavProps;
   $$slot_def: {};
 
-  $on(eventname: "click:button--previous", cb: (event: CustomEvent<any>) => void): () => void;
-  $on(eventname: "click:button--next", cb: (event: CustomEvent<any>) => void): () => void;
-  $on(eventname: "change", cb: (event: CustomEvent<any>) => void): () => void;
+  $on(eventname: "change", cb: (event: CustomEvent<{ page: number }>) => void): () => void;
+  $on(eventname: "click:button--previous", cb: (event: CustomEvent<{ page: number }>) => void): () => void;
+  $on(eventname: "click:button--next", cb: (event: CustomEvent<{ page: number }>) => void): () => void;
   $on(eventname: string, cb: (event: Event) => void): () => void;
 }