feat(number-input): forward focus, blur events to input (#1033)

COMPONENT_INDEX.md

@@ -2603,6 +2603,8 @@ export type NumberInputTranslationId = "increment" | "decrement";
 | mouseenter | forwarded  | --                  |
 | mouseleave | forwarded  | --                  |
 | input      | forwarded  | --                  |
+| focus      | forwarded  | --                  |
+| blur       | forwarded  | --                  |
 
 ## `NumberInputSkeleton`
 

docs/src/COMPONENT_API.json

@@ -7232,7 +7232,9 @@
         { "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": "forwarded", "name": "input", "element": "input" },
+        { "type": "forwarded", "name": "focus", "element": "input" },
+        { "type": "forwarded", "name": "blur", "element": "input" }
       ],
       "typedefs": [
         {

src/NumberInput/NumberInput.svelte

@@ -215,6 +215,8 @@
           on:input="{({ target }) => {
             inputValue = target.value;
           }}"
+          on:focus
+          on:blur
         />
         <button
           type="button"
@@ -268,6 +270,8 @@
           on:input="{({ target }) => {
             inputValue = target.value;
           }}"
+          on:focus
+          on:blur
         />
         {#if invalid}
           <WarningFilled16 class="bx--number__invalid" />

types/NumberInput/NumberInput.svelte.d.ts

@@ -153,6 +153,8 @@ export default class NumberInput extends SvelteComponentTyped<
     mouseenter: WindowEventMap["mouseenter"];
     mouseleave: WindowEventMap["mouseleave"];
     input: WindowEventMap["input"];
+    focus: WindowEventMap["focus"];
+    blur: WindowEventMap["blur"];
   },
   { label: {} }
 > {