feat(searchableSelect): add showError prop to searchableSelect and expose blur and change events

Author: hobbitronics

components/custom/SearchableSelect/SearchableSelect.svelte

@@ -18,6 +18,8 @@ export let maxlength = 255
 export let disabled = false
 /** @type {boolean} if the input is required or not */
 export let required = false
+/** @type {boolean} applies the showError using error themes*/
+export let showError = false
 
 let element = {}
 let randomId = generateRandomID('dataList-')
@@ -74,6 +76,10 @@ const onChange = (e) => {
   font-size: 10px;
   color: #222;
 }
+.showError {
+  border-color: var(--mdc-theme-status-error, var(--mdc-theme-error));
+  color: var(--mdc-theme-status-error, var(--mdc-theme-error));
+}
 </style>
 
 <label class="custom-field" style="--field-padding: {padding}; {$$props.class || ''}">
@@ -82,14 +88,17 @@ const onChange = (e) => {
     {disabled}
     {maxlength}
     class="fs-14 {$$props.class || ''}"
+    class:showError
     style="width: {width}"
     {required}
     list={randomId}
     placeholder="&nbsp;"
     bind:this={element}
     value={choice}
     on:change={onChange}
+    on:change
     on:blur={(e) => dispatch('check', e.target.value)}
+    on:blur
     on:focus
   />
   <span class="placeholder">{placeholder}</span>

stories/SearchableSelect.stories.svelte

@@ -19,6 +19,7 @@ const args = {
   required: false,
   width: '232px',
   maxlength: 255,
+  showError: false,
   'on:chosen': (e) => setNotice(e.detail + ' chosen (accessed by event.detail)'),
   'on:check': (e) => {
     !args.options[e.detail] && setNotice(e.detail + ' not available')
@@ -57,3 +58,4 @@ setTimeout(() => {
   name="required"
   args={copyAndModifyArgs(args, { required: true, 'on:check': () => console.log('this is required') })}
 />
+<Story name="showError" args={copyAndModifyArgs(args, { showError: true })} />