feat: forward paste event to input/textarea elements (#1332)

* chore(deps-dev): upgrade sveld, svelte-check

* feat: forward paste event to input/textarea elements

* Run "yarn build:docs"

* test: assert paste event

tests/DatePicker.test.svelte

@@ -9,7 +9,7 @@
   flatpickrProps="{{ static: true }}"
   on:change
 >
-  <DatePickerInput labelText="Meeting date" placeholder="mm/dd/yyyy" />
+  <DatePickerInput labelText="Meeting date" placeholder="mm/dd/yyyy" on:paste />
 </DatePicker>
 
 <DatePicker

tests/HeaderSearch.svelte

@@ -73,6 +73,7 @@
       on:select="{(e) => {
         console.log('on:select', e.detail);
       }}"
+      on:paste
       let:result
       let:index
     >

tests/MultiSelect.test.svelte

@@ -20,6 +20,7 @@
   on:blur="{(e) => {
     e.detail; // number | FocusEvent
   }}"
+  on:paste
   translateWithId="{(id) => {
     console.log(id); // "open" | "close"
     return id;

tests/NumberInput.test.svelte

@@ -19,6 +19,7 @@
   on:change="{(e) => {
     console.log(e.detail); // null | number
   }}"
+  on:paste
 />
 
 <NumberInputSkeleton hideLabel />

tests/PasswordInput.test.svelte

@@ -9,6 +9,7 @@
   type="text"
   placeholder="Enter password..."
   value="as_lta0890sdfpo__!9901"
+  on:paste
 />
 
 <PasswordInput hideLabel labelText="Password" placeholder="Enter password..." />

tests/Search.test.svelte

@@ -2,7 +2,7 @@
   import { Search } from "../types";
 </script>
 
-<Search />
+<Search on:paste />
 
 <Search placeholder="Search catalog..." value="Cloud functions" />
 

tests/TextArea.test.svelte

@@ -2,45 +2,18 @@
   import { TextArea, TextAreaSkeleton } from "../types";
 </script>
 
-<TextArea labelText="App description" placeholder="Enter a description..." />
-
 <TextArea
+  value=""
+  hideLabel
+  light
+  rows="{10}"
   labelText="App description"
   helperText="A rich description helps us better recommend related products and services"
   placeholder="Enter a description..."
-/>
-
-<TextArea
-  hideLabel
-  labelText="App description"
-  placeholder="Enter a description..."
-/>
-
-<TextArea
-  light
-  labelText="App description"
-  placeholder="Enter a description..."
-/>
-
-<TextArea
-  rows="{10}"
-  labelText="App description"
-  placeholder="Enter a description..."
-/>
-
-<TextArea
   invalid
   invalidText="Only plain text characters are allowed"
-  labelText="App description"
-  placeholder="Enter a description..."
-/>
-
-<TextArea
   disabled
-  labelText="App description"
-  placeholder="Enter a description..."
+  on:paste
 />
 
-<TextAreaSkeleton />
-
 <TextAreaSkeleton hideLabel />

tests/TextInput.test.svelte

@@ -11,6 +11,7 @@
   bind:value
   on:input="{(e) => console.log(e.detail)}"
   on:change="{(e) => (value = e.detail)}"
+  on:paste="{(e) => console.log(e)}"
 />
 
 <TextInput

tests/TimePicker.test.svelte

@@ -2,7 +2,12 @@
   import { TimePicker, TimePickerSelect, SelectItem } from "../types";
 </script>
 
-<TimePicker spellcheck="{false}" labelText="Cron job" placeholder="hh:mm">
+<TimePicker
+  spellcheck="{false}"
+  labelText="Cron job"
+  placeholder="hh:mm"
+  on:paste
+>
   <TimePickerSelect value="PM">
     <SelectItem value="am" text="AM" />
     <SelectItem value="pm" text="PM" />