From 34000a1166d6e7e35a41fc9596508e72f3424d2f Mon Sep 17 00:00:00 2001
From: Eric Liu <ericyl.us@gmail.com>
Date: Sat, 5 Dec 2020 17:04:13 -0800
Subject: [PATCH] fix(number-input): type dispatched change event

---
 COMPONENT_INDEX.md                 | 16 ++++++++--------
 docs/src/COMPONENT_API.json        |  4 ++--
 src/NumberInput/NumberInput.svelte |  7 ++++---
 tests/NumberInput.test.svelte      |  7 ++++++-
 types/NumberInput/NumberInput.d.ts |  2 +-
 5 files changed, 21 insertions(+), 15 deletions(-)

diff --git a/COMPONENT_INDEX.md b/COMPONENT_INDEX.md
index 4613ec99..555720d5 100644
--- a/COMPONENT_INDEX.md
+++ b/COMPONENT_INDEX.md
@@ -2295,14 +2295,14 @@ export type NumberInputTranslationId = "increment" | "decrement";
 
 ### Events
 
-| Event name | Type       | Detail |
-| :--------- | :--------- | :----- |
-| click      | forwarded  | --     |
-| mouseover  | forwarded  | --     |
-| mouseenter | forwarded  | --     |
-| mouseleave | forwarded  | --     |
-| input      | forwarded  | --     |
-| change     | dispatched | --     |
+| Event name | Type       | Detail              |
+| :--------- | :--------- | :------------------ |
+| change     | dispatched | <code>number</code> |
+| click      | forwarded  | --                  |
+| mouseover  | forwarded  | --                  |
+| mouseenter | forwarded  | --                  |
+| mouseleave | forwarded  | --                  |
+| input      | forwarded  | --                  |
 
 ## `NumberInputSkeleton`
 
diff --git a/docs/src/COMPONENT_API.json b/docs/src/COMPONENT_API.json
index 2a188bac..001f522a 100644
--- a/docs/src/COMPONENT_API.json
+++ b/docs/src/COMPONENT_API.json
@@ -6134,12 +6134,12 @@
         }
       ],
       "events": [
+        { "type": "dispatched", "name": "change", "detail": "number" },
         { "type": "forwarded", "name": "click", "element": "div" },
         { "type": "forwarded", "name": "mouseover", "element": "div" },
         { "type": "forwarded", "name": "mouseenter", "element": "div" },
         { "type": "forwarded", "name": "mouseleave", "element": "div" },
-        { "type": "forwarded", "name": "input", "element": "input" },
-        { "type": "dispatched", "name": "change" }
+        { "type": "forwarded", "name": "input", "element": "input" }
       ],
       "typedefs": [
         {
diff --git a/src/NumberInput/NumberInput.svelte b/src/NumberInput/NumberInput.svelte
index 46df8b86..73e516a9 100644
--- a/src/NumberInput/NumberInput.svelte
+++ b/src/NumberInput/NumberInput.svelte
@@ -1,6 +1,7 @@
 <script>
   /**
    * @typedef {"increment" | "decrement"} NumberInputTranslationId
+   * @event {number} change
    */
 
   /**
@@ -91,9 +92,9 @@
   export let ref = null;
 
   import { createEventDispatcher, afterUpdate } from "svelte";
-  import CaretDownGlyph from "carbon-icons-svelte/lib/CaretDownGlyph";
-  import CaretUpGlyph from "carbon-icons-svelte/lib/CaretUpGlyph";
-  import WarningFilled16 from "carbon-icons-svelte/lib/WarningFilled16";
+  import CaretDownGlyph from "carbon-icons-svelte/lib/CaretDownGlyph/CaretDownGlyph.svelte";
+  import CaretUpGlyph from "carbon-icons-svelte/lib/CaretUpGlyph/CaretUpGlyph.svelte";
+  import WarningFilled16 from "carbon-icons-svelte/lib/WarningFilled16/WarningFilled16.svelte";
 
   const defaultTranslations = {
     [translationIds.increment]: "Increment number",
diff --git a/tests/NumberInput.test.svelte b/tests/NumberInput.test.svelte
index 8d91a7af..61a2a589 100644
--- a/tests/NumberInput.test.svelte
+++ b/tests/NumberInput.test.svelte
@@ -2,7 +2,12 @@
   import { NumberInput, NumberInputSkeleton } from "../types";
 </script>
 
-<NumberInput label="Clusters" />
+<NumberInput
+  label="Clusters"
+  on:change="{(e) => {
+    console.log(e.detail); // number
+  }}"
+/>
 
 <NumberInput
   label="Clusters"
diff --git a/types/NumberInput/NumberInput.d.ts b/types/NumberInput/NumberInput.d.ts
index 5b0c5c91..715560b9 100644
--- a/types/NumberInput/NumberInput.d.ts
+++ b/types/NumberInput/NumberInput.d.ts
@@ -133,11 +133,11 @@ export default class NumberInput {
     label: {};
   };
 
+  $on(eventname: "change", cb: (event: CustomEvent<number>) => void): () => void;
   $on(eventname: "click", cb: (event: WindowEventMap["click"]) => void): () => void;
   $on(eventname: "mouseover", cb: (event: WindowEventMap["mouseover"]) => void): () => void;
   $on(eventname: "mouseenter", cb: (event: WindowEventMap["mouseenter"]) => void): () => void;
   $on(eventname: "mouseleave", cb: (event: WindowEventMap["mouseleave"]) => void): () => void;
   $on(eventname: "input", cb: (event: WindowEventMap["input"]) => void): () => void;
-  $on(eventname: "change", cb: (event: CustomEvent<any>) => void): () => void;
   $on(eventname: string, cb: (event: Event) => void): () => void;
 }