@dosgato/dialog 1.4.5 → 1.5.0

package/dist/Dialog.svelte

@@ -28,10 +28,10 @@
   export let icon: IconifyIcon | undefined = undefined
   export let size: 'tiny' | 'small' | 'normal' | 'large' | 'xl' = 'normal'
   export let cancelText: string | undefined = undefined
-  export let continueText: string = 'Ok'
+  export let continueText = 'Ok'
   export let continueIcon: IconifyIcon | undefined = undefined
   export let escapable = isNotBlank(cancelText)
-  export let expandable: boolean = false
+  export let expandable = false
   export let disabled = false
   export let ignoreTabs = false
 
@@ -45,7 +45,7 @@
   let hasRequired: boolean | undefined = false
   let onPrev: (() => void) | undefined
   let onNext: (() => void) | undefined
-  let expanded: boolean = false
+  let expanded = false
   function onTabChange () {
     ({ hasTabs, prevTitle, nextTitle, hasRequired, onPrev, onNext } = ctx)
   }

package/dist/FieldAutocomplete.svelte

@@ -1,13 +1,14 @@
 <script lang="ts">
   import { modifierKey, PopupMenu, ScreenReaderOnly, type PopupMenuItem } from '@txstate-mws/svelte-components'
-  import { nullableSerialize, nullableDeserialize } from '@txstate-mws/svelte-forms'
+  import { FORM_CONTEXT, FORM_INHERITED_PATH, type FormStore } from '@txstate-mws/svelte-forms'
   import { isBlank, isNotBlank, randomid } from 'txstate-utils'
   import { getDescribedBy } from './'
   import FieldStandard from './FieldStandard.svelte'
+  import { getContext } from 'svelte'
 
   export let id: string | undefined = undefined
   export let path: string
-  export let label: string = ''
+  export let label = ''
   export let placeholder: string = 'Select' + (label ? ' ' + label : '')
   let className = ''
   export { className as class }
@@ -27,19 +28,21 @@
   let menuid: string
 
   const liveTextId = randomid()
-  $: finalserialize = !notNull ? nullableSerialize : v => v
-  $: finaldeserialize = !notNull ? nullableDeserialize : v => v
+  let finalDeserialize: (value: string) => any
+
+  const store = getContext<FormStore>(FORM_CONTEXT)
+  const inheritedPath = getContext<string>(FORM_INHERITED_PATH)
+  const finalPath = [inheritedPath, path].filter(isNotBlank).join('.')
+  const val = store.getField<string>(finalPath)
 
   $: valueToLabel = Object.fromEntries(choices.map(c => [c.value, c.label || c.value]))
   $: labelToValue = Object.fromEntries(choices.map(c => [c.label || c.value, c.value]))
-  $: filteredChoices = choices.filter((item: PopupMenuItem) => {
-    return item.label?.toLowerCase().includes(inputvalue.toLowerCase()) || item.value.toLowerCase().includes(inputvalue.toLowerCase())
-  })
+  $: filteredChoices = choices.filter((item: PopupMenuItem) => item.label?.toLowerCase().includes(inputvalue.toLowerCase()) || item.value.toLowerCase().includes(inputvalue.toLowerCase()))
 
   let menushown = false
   let savedVal = defaultValue
   function onKeyUp (setVal: any) {
-    return (e) => {
+    return e => {
       if (!modifierKey(e)) {
         const val = labelToValue[inputvalue.trim()]
         menushown = !val
@@ -55,7 +58,7 @@
   }
 
   function onchangepopup (setVal: any) {
-    return (e) => {
+    return e => {
       inputvalue = e.detail.label || e.detail.value
       popupvalue = undefined
       savedVal = e.detail.value
@@ -63,8 +66,9 @@
     }
   }
 
-  function reactToValue (value: string, setVal: any) {
-    const dsvalue = finaldeserialize(value)
+  async function reactToValue (value: string) {
+    if (!finalDeserialize) return
+    const dsvalue = finalDeserialize(value)
     if (dsvalue !== savedVal) {
       const label = valueToLabel[dsvalue]
 
@@ -77,14 +81,14 @@
 
       savedVal = dsvalue
       // if the form state value changes from the outside to an invalid value, we have to clear it out
-      if (isNotBlank(dsvalue) && isBlank(label)) setVal(finaldeserialize(''))
+      if (isNotBlank(dsvalue) && isBlank(label)) await store.setField(finalPath, finalDeserialize(''), { notDirty: true })
     }
   }
+  $: reactToValue($val).catch(console.error)
 </script>
 
-<FieldStandard bind:id {label} {path} {required} {defaultValue} {conditional} {related} {helptext} serialize={finalserialize} deserialize={finaldeserialize} let:value let:setVal let:valid let:invalid let:id let:onBlur let:messagesid let:helptextid>
-  {@const _ = reactToValue(value, setVal)}
-  <input bind:this={inputelement} bind:value={inputvalue} {id} {placeholder} class="dialog-input {className}" class:valid class:invalid aria-invalid={invalid} aria-expanded={false} aria-controls={menuid} on:blur={onBlur} on:keyup={onKeyUp(setVal)} autocapitalize="none" type="text" autocomplete="off" aria-autocomplete="list" role="combobox" {disabled} aria-describedby={getDescribedBy([messagesid, helptextid, extradescid])}>
+<FieldStandard bind:id {label} {path} {required} {defaultValue} {conditional} {related} {helptext} {notNull} bind:finalDeserialize let:setVal let:valid let:invalid let:id={fieldid} let:onBlur let:messagesid let:helptextid>
+  <input bind:this={inputelement} bind:value={inputvalue} id={fieldid} {placeholder} class="dialog-input {className}" class:valid class:invalid aria-invalid={invalid} aria-expanded={false} aria-controls={menuid} on:blur={onBlur} on:keyup={onKeyUp(setVal)} autocapitalize="none" type="text" autocomplete="off" aria-autocomplete="list" role="combobox" {disabled} aria-describedby={getDescribedBy([messagesid, helptextid, extradescid])}>
   <PopupMenu bind:menushown bind:menuid align="bottomleft" items={filteredChoices} buttonelement={inputelement} bind:value={popupvalue} on:change={onchangepopup(setVal)} emptyText="No options available"/>
   <ScreenReaderOnly arialive="polite" ariaatomic={true} id={liveTextId}>
     {filteredChoices.length} {filteredChoices.length === 1 ? 'option' : 'options'} available.

package/dist/FieldCheckbox.svelte

@@ -7,7 +7,7 @@
   export { className as class }
   export let id: string | undefined = undefined
   export let path: string
-  export let label: string = ''
+  export let label = ''
   export let boxLabel: string
   export let defaultValue: boolean | undefined = undefined
   export let conditional: boolean | undefined = undefined
@@ -26,10 +26,10 @@
   const descid = randomid()
 </script>
 
-<FieldStandard bind:id {path} {descid} {label} {defaultValue} {conditional} {related} {helptext} {required} let:value let:messagesid let:helptextid let:valid let:invalid let:id let:onBlur let:setVal>
+<FieldStandard bind:id {path} {descid} {label} {defaultValue} {conditional} {related} {helptext} {required} let:value let:messagesid let:helptextid let:valid let:invalid let:id={fieldid} let:onBlur let:setVal>
   <div class={className}>
-    <label for={id}>
-      <Checkbox bind:inputelement {id} name={path} {value} descid={getDescribedBy([descid, messagesid, helptextid, extradescid])} {valid} {invalid} {onBlur} onChange={onChange(setVal)}></Checkbox>
+    <label for={fieldid}>
+      <Checkbox bind:inputelement id={fieldid} name={path} {value} descid={getDescribedBy([descid, messagesid, helptextid, extradescid])} {valid} {invalid} {onBlur} onChange={onChange(setVal)}></Checkbox>
       <span>{boxLabel}</span>
     </label>
   </div>

package/dist/FieldChoices.svelte

@@ -18,7 +18,7 @@
   export { className as class }
   export let id: string | undefined = undefined
   export let path: string
-  export let label: string = ''
+  export let label = ''
   export let choices: { label?: string, value: any, disabled?: boolean }[]
   export let defaultValue: any = []
   export let conditional: boolean | undefined = undefined
@@ -27,12 +27,12 @@
   export let related: true | number = 0
   export let extradescid: string | undefined = undefined
   export let helptext: string | undefined = undefined
-  export let selectAll: boolean = false
+  export let selectAll = false
 
   const store = getContext<FormStore>(FORM_CONTEXT)
   const inheritedPath = getContext<string>(FORM_INHERITED_PATH)
   const finalPath = [inheritedPath, path].filter(isNotBlank).join('.')
-  const valStore = store.getField<any[]>(finalPath)
+  const val = store.getField<any[]>(finalPath)
   const currentWidth = derivedStore(store, 'width')
   $: cols = Math.min(Math.ceil($currentWidth / maxwidth), choices.length)
 
@@ -53,7 +53,11 @@
     })
   }
 
-  $: selected = new Set($valStore ?? [])
+  let selected = new Set<any>()
+  function reactToValue (value: any[]) {
+    selected = new Set(value ?? [])
+  }
+  $: reactToValue($val)
 
   let selectAllElement: HTMLInputElement | undefined
   const selectAllId = randomid()
@@ -83,8 +87,8 @@
   onMount(reactToChoices)
 </script>
 
-<Field {path} {defaultValue} {conditional} let:path let:value let:onBlur let:setVal let:messages let:valid let:invalid serialize={arraySerialize}>
-  <Container {path} {id} {label} {messages} {descid} {related} {helptext} let:messagesid let:helptextid>
+<Field {path} {defaultValue} {conditional} let:path={fullpath} let:value let:onBlur let:setVal let:messages let:valid let:invalid serialize={arraySerialize}>
+  <Container path={fullpath} {id} {label} {messages} {descid} {related} {helptext} let:messagesid let:helptextid>
     <div class="dialog-choices {className}" class:valid class:invalid>
       {#if selectAll}
         <label for={selectAllId} style:width>
@@ -93,7 +97,7 @@
         </label>
       {/if}
       {#each choices as choice, idx (choice.value)}
-        {@const checkid = `${path}.${idx}`}
+        {@const checkid = `${fullpath}.${idx}`}
         {@const included = value?.includes(choice.value)}
         {@const label = choice.label || (typeof choice.value === 'string' ? choice.value : '')}
         <label for={checkid} style:width style:order={orders[idx]}>

package/dist/FieldChooserLink.svelte

@@ -14,7 +14,7 @@
 
   export let id: string | undefined = undefined
   export let path: string
-  export let label: string = ''
+  export let label = ''
   export let defaultValue: boolean | undefined = undefined
   export let conditional: boolean | undefined = undefined
   export let required = false
@@ -29,9 +29,9 @@
   export let extradescid: string | undefined = undefined
   export let helptext: string | undefined = undefined
   export let selectedAsset: AnyItem | RawURL | BrokenURL | undefined = undefined
-  export let altTextPath : string | undefined = undefined
-  export let altTextRequired: boolean = false
-  export let altTextHelp: string = 'Describes the asset for visually-impaired users and search engines.'
+  export let altTextPath: string | undefined = undefined
+  export let altTextRequired = false
+  export let altTextHelp = 'Describes the asset for visually-impaired users and search engines.'
 
   // TODO: add a mime type acceptance prop, maybe a regex or function, to prevent users from
   // choosing unacceptable mime types
@@ -56,13 +56,13 @@
     modalshown = false
   }
   function onChange (setVal: any) {
-    return (e) => {
+    return e => {
       selectedAsset = e.detail.preview
       if (
-        finalAltTextPath &&
-        e.detail.copyAltText &&
-        selectedAsset?.type === 'asset' &&
-        selectedAsset?.image?.altText
+        finalAltTextPath
+        && e.detail.copyAltText
+        && selectedAsset?.type === 'asset'
+        && selectedAsset?.image?.altText
       ) {
         formStore.setField(finalAltTextPath, selectedAsset.image.altText).catch(console.error)
       }
@@ -98,10 +98,10 @@
       if (item) {
         found = true
         if (
-          (item.type === 'page' && !pages) || // they typed the URL for a page but we don't allow pages right now
-          (item.type === 'folder' && !folders) || // they typed the URL for an asset folder but not allowed
-          (item.type === 'asset' && !assets) || // they typed the URL for an asset but not allowed
-          (item.type === 'asset' && !item.image && images) // they typed the URL for a non-image asset but we only want images
+          (item.type === 'page' && !pages) // they typed the URL for a page but we don't allow pages right now
+          || (item.type === 'folder' && !folders) // they typed the URL for an asset folder but not allowed
+          || (item.type === 'asset' && !assets) // they typed the URL for an asset but not allowed
+          || (item.type === 'asset' && !item.image && images) // they typed the URL for a non-image asset but we only want images
         ) {
           // they entered something that is recognized but not allowed
           // they can keep the typing they've done, but the id must be 'undefined' so that nothing
@@ -119,18 +119,16 @@
     if (!found) {
       if (urlToValueCache[url]) {
         selectedAsset = { type: 'raw', id: urlToValueCache[url], url }
-      } else {
-        if (isBlank(cleanedUrl) || cleanedUrl.startsWith('/')) {
+      } else if (isBlank(cleanedUrl) || cleanedUrl.startsWith('/')) {
           // here we "select" a raw url so that we do not interrupt the users' typing, but
           // we set its id to 'undefined' so that nothing makes it into the form until it's
           // a valid URL
-          selectedAsset = { type: 'raw', id: undefined, url }
-        } else {
-          selectedAsset = {
-            type: 'raw',
-            id: chooserClient.urlToValue?.(cleanedUrl) ?? cleanedUrl,
-            url
-          }
+        selectedAsset = { type: 'raw', id: undefined, url }
+      } else {
+        selectedAsset = {
+          type: 'raw',
+          id: chooserClient.urlToValue?.(cleanedUrl) ?? cleanedUrl,
+          url
         }
       }
     }
@@ -174,17 +172,17 @@
   }
   $: void updateSelected($value)
  function onClickRemove (setVal: any) {
-      return (e) => {
-        selectedAsset = undefined
-        setVal(undefined)
-        if (finalAltTextPath) {
-          formStore.setField(finalAltTextPath, undefined).catch(console.error)
-        }
-      }
-    }
+   return e => {
+     selectedAsset = undefined
+     setVal(undefined)
+     if (finalAltTextPath) {
+       formStore.setField(finalAltTextPath, undefined).catch(console.error)
+     }
+   }
+ }
 </script>
 
-<FieldStandard bind:id {path} {descid} {label} {defaultValue} {conditional} {required} {related} {helptext} let:value let:messagesid let:helptextid let:valid let:invalid let:id let:onBlur let:setVal>
+<FieldStandard bind:id {path} {descid} {label} {defaultValue} {conditional} {required} {related} {helptext} let:value let:messagesid let:helptextid let:valid let:invalid let:id={fieldid} let:onBlur let:setVal>
   {#if selectedAsset?.id}
     {#if selectedAsset?.type === 'asset'}
       <div class="asset-chooser-container">
@@ -237,7 +235,7 @@
     <div class="dialog-chooser-entry">
       {#if urlEntry}
         <div class="dialog-chooser-entry-input">
-          <input bind:this={urlEntryInput} {id} type="text" data-lpignore="true" value={selectedAsset?.url ?? ''} on:change={userUrlEntry} on:input={userUrlEntry} on:blur={onBlur}>
+          <input bind:this={urlEntryInput} id={fieldid} type="text" data-lpignore="true" value={selectedAsset?.url ?? ''} on:change={userUrlEntry} on:input={userUrlEntry} on:blur={onBlur}>
           <button type="button" on:click={clearUrlEntry}><Icon icon={xCircle} hiddenLabel="clear input" inline/></button>
         </div>
       {/if}

package/dist/FieldDate.svelte

@@ -6,7 +6,7 @@
   export { className as class }
   export let id: string | undefined = undefined
   export let path: string
-  export let label: string = ''
+  export let label = ''
   export let defaultValue: any = undefined
   export let min: Date | { toJSDate: () => Date } | undefined = undefined
   export let max: Date | { toJSDate: () => Date } | undefined = undefined
@@ -19,6 +19,6 @@
   export let helptext: string | undefined = undefined
 </script>
 
-<FieldStandard bind:id {label} {path} {required} {defaultValue} {conditional} {related} {helptext} serialize={dateSerialize} deserialize={dateDeserialize} let:value let:valid let:invalid let:id let:onBlur let:onChange let:messagesid let:helptextid>
-  <Input bind:inputelement type="date" name={path} {value} {id} class="dialog-input {className}" {onChange} {onBlur} {valid} {invalid} {min} {max} {step} {extradescid} {messagesid} {helptextid}/>
+<FieldStandard bind:id {label} {path} {required} {defaultValue} {conditional} {related} {helptext} serialize={dateSerialize} deserialize={dateDeserialize} let:value let:valid let:invalid let:id={fieldid} let:onBlur let:onChange let:messagesid let:helptextid>
+  <Input bind:inputelement type="date" name={path} {value} id={fieldid} class="dialog-input {className}" {onChange} {onBlur} {valid} {invalid} {min} {max} {step} {extradescid} {messagesid} {helptextid}/>
 </FieldStandard>

package/dist/FieldDateTime.svelte

@@ -7,7 +7,7 @@
   export { className as class }
   export let id: string | undefined = undefined
   export let path: string
-  export let label: string = ''
+  export let label = ''
   export let defaultValue: any = undefined
   export let min: Date | { toJSDate: () => Date } | undefined = undefined
   export let max: Date | { toJSDate: () => Date } | undefined = undefined
@@ -38,7 +38,6 @@
   }
 </script>
 
-<FieldStandard bind:id {label} {path} {required} {defaultValue} {conditional} {related} {helptext} serialize={datetimeSerialize} deserialize={datetimeDeserialize} let:value let:valid let:invalid let:id let:onBlur let:helptextid let:messagesid let:setVal>
-  <Input bind:inputelement={inputelement} type="datetime-local" name={path} {value} {id} class="dialog-input {className}" {onBlur} onChange={onChange(setVal)} {valid} {invalid} {min} {max} {step} {extradescid} {messagesid} {helptextid}/>
+<FieldStandard bind:id {label} {path} {required} {defaultValue} {conditional} {related} {helptext} serialize={datetimeSerialize} deserialize={datetimeDeserialize} let:value let:valid let:invalid let:id={fieldid} let:onBlur let:helptextid let:messagesid let:setVal>
+  <Input bind:inputelement={inputelement} type="datetime-local" name={path} {value} id={fieldid} class="dialog-input {className}" {onBlur} onChange={onChange(setVal)} {valid} {invalid} {min} {max} {step} {extradescid} {messagesid} {helptextid}/>
 </FieldStandard>
-

package/dist/FieldDualListbox.svelte

@@ -11,10 +11,10 @@
 
   export let id: string | undefined = undefined
   export let path: string
-  export let label: string = ''
-  export let sourceLabel: string = 'Available'
-  export let selectedLabel: string = 'Selected'
-  export let multiselect: boolean = false
+  export let label = ''
+  export let sourceLabel = 'Available'
+  export let selectedLabel = 'Selected'
+  export let multiselect = false
   export let choices: PopupMenuItem[]
   export let defaultValue: string[] = []
   export let conditional: boolean | undefined = undefined
@@ -25,7 +25,7 @@
 
   let itemsToAdd: PopupMenuItem[] = [] // the items selected in the left listbox
   let itemsToRemove: PopupMenuItem[] = [] // the items selected in the right listbox
-  let instructions: string = 'test'
+  let instructions = ''
 
   $: {
     if (itemsToAdd.length === 1) instructions = `Press right arrow key to move selected ${sourceLabel} items to ${selectedLabel} items list.`
@@ -71,7 +71,7 @@
   }
 
   function onkeydown (value: string[], setVal: (val: any) => void) {
-    return (e) => {
+    return e => {
       if (modifierKey(e)) return
       if (e.key === 'ArrowRight') {
         e.preventDefault()
@@ -86,12 +86,10 @@
   }
 </script>
 
-<FieldStandard bind:id {label} {path} {required} {defaultValue} {conditional} {descid} {related} {helptext} let:value let:valid let:invalid let:id let:onBlur let:setVal let:helptextid let:messagesid serialize={arraySerialize}>
+<FieldStandard bind:id {label} {path} {required} {defaultValue} {conditional} {descid} {related} {helptext} let:value let:valid let:invalid let:id={fieldid} let:onBlur let:setVal let:helptextid let:messagesid serialize={arraySerialize}>
   <!-- svelte-ignore a11y-no-noninteractive-element-interactions -->
-  <div {id} role="group" class="dual-list-container" on:keydown={onkeydown(value, setVal)}>
-    <ScreenReaderOnly>
-      <span aria-live="polite">{instructions}</span>
-    </ScreenReaderOnly>
+  <div id={fieldid} role="group" class="dual-list-container" on:keydown={onkeydown(value, setVal)}>
+    <ScreenReaderOnly arialive="polite">{instructions}</ScreenReaderOnly>
     <Listbox label={sourceLabel} multiselect={multiselect} items={getAvailable(value)} descid={getDescribedBy([descid, messagesid, helptextid, extradescid])} {valid} {invalid} on:change={e => { itemsToAdd = e.detail }} selected={itemsToAdd} on:blur={onBlur}/>
     <div class="toolbar">
       <button type="button" class="toolbar-button" title="Move selection to {selectedLabel}" disabled={itemsToAdd.length === 0} on:click={addToSelected(value, setVal)}>

package/dist/FieldIdentifier.svelte

@@ -5,7 +5,7 @@
 
   export let path: string
   export let conditional: boolean | undefined = undefined
-  export let length: number = 10
+  export let length = 10
 
   const store = getContext<FormStore>(FORM_CONTEXT)
   const inheritedPath = getContext<string>(FORM_INHERITED_PATH)
@@ -13,7 +13,7 @@
   const valueStore = store.getField<string | null>(finalPath)
 
   onMount(() => {
-    if (!$valueStore) store.setField(finalPath, randomid(length), { notDirty: true })
+    if (!$valueStore) void store.setField(finalPath, randomid(length), { notDirty: true })
   })
 </script>
 

package/dist/FieldMultiple.svelte

@@ -9,13 +9,13 @@
   import xCircle from '@iconify-icons/ph/x-circle-fill'
   import { AddMore, type Feedback } from '@txstate-mws/svelte-forms'
   import { setContext } from 'svelte'
-  import { writable } from 'svelte/store'
   import Button from './Button.svelte'
   import Container from './Container.svelte'
   import Icon from './Icon.svelte'
 
   export let path: string
   export let label: string
+  // eslint-disable-next-line @typescript-eslint/no-redundant-type-constituents -- it's weird but helps with understanding
   export let initialState: any | ((index: number) => any) = undefined
   export let minLength = 1
   export let maxLength: number | undefined = undefined
@@ -65,8 +65,9 @@
 
   function confirmedDelete (onDelete: () => void, item: any) {
     return () => {
-      if (confirmDelete == null) return onDelete()
+      if (confirmDelete == null) { onDelete(); return }
       const msg = typeof confirmDelete === 'string' ? confirmDelete : confirmDelete(item)
+      // eslint-disable-next-line no-alert -- I don't have a better way to do this at the moment
       if (confirm(msg)) onDelete()
     }
   }
@@ -76,12 +77,12 @@
 
 <Container {path} {label} {messages} {conditional} {related} {helptext} let:helptextid>
   {noOp(fieldMultipleContext.helptextid = helptextid)}
-  <AddMore bind:messages {path} {initialState} {minLength} {maxLength} {conditional} let:path let:currentLength let:maxLength let:index let:minned let:maxed let:value let:onDelete let:onMoveUp let:onMoveDown>
+  <AddMore bind:messages {path} {initialState} {minLength} {maxLength} {conditional} let:path={fullpath} let:currentLength let:maxLength={resolvedMaxLength} let:index let:minned let:maxed let:value let:onDelete let:onMoveUp let:onMoveDown>
     {@const showDelete = removable && !minned}
     {@const showMove = reorder && currentLength > 1}
     <div class="dialog-multiple" class:has-delete-icon={showDelete} class:has-move-icon={showMove} class:first={index === 0}>
       <div class="dialog-multiple-content">
-        <slot {path} {index} {value} {maxed} {maxLength} {currentLength}/>
+        <slot path={fullpath} {index} {value} {maxed} maxLength={resolvedMaxLength} {currentLength}/>
       </div>
       {#if showDelete || showMove}<div class="dialog-multiple-buttons">
         {#if showMove}
@@ -92,7 +93,7 @@
       </div>{/if}
     </div>
     <svelte:fragment slot="addbutton" let:maxed let:onClick>
-      {#if !maxed || (maxed && maxLength > 1)}
+      {#if !maxed || (maxed && resolvedMaxLength > 1)}
         <Button type="button" icon={plusCircleLight} class="{addMoreClass} dialog-multiple-button" disabled={maxed} on:click={onClick}>{maxed ? maxedText : addMoreText}</Button>
       {/if}
     </svelte:fragment>

package/dist/FieldMultiselect.svelte

@@ -24,7 +24,7 @@
   `PopupMenuItem[]` by `getOptions`. */
   export let getOptions: (search: string) => Promise<PopupMenuItem[]>
   export let id: string | undefined = undefined
-  export let label: string = ''
+  export let label = ''
   /** Text to display in the text input when it's empty. */
   export let placeholder = ''
   /** When there are no items (e.g. it's a filtered search and there were no results), we still display one
@@ -36,7 +36,7 @@
   export let required = false
   /** Max number of selections to be allowed before disabling the input - 0 for unlimited. */
   export let maxSelections = 0
-  export let lookupByValue: (val: string) => Promise<PopupMenuItem | undefined> = async (val) => { const options = await getOptions(val); return options.find((opt) => opt.value === val) }
+  export let lookupByValue: (val: string) => Promise<PopupMenuItem | undefined> = async val => { const options = await getOptions(val); return options.find(opt => opt.value === val) }
   export let related: true | number = 0
   export let extradescid: string | undefined = undefined
   export let helptext: string | undefined = undefined
@@ -50,7 +50,7 @@
   /** Show a confirmation message before clearing all selections */
   export let confirmDelete: string | undefined = undefined
 
-  export let selectedItemLabel: ((item: PopupMenuItem) => string) | undefined = (item) => item.label || item.value
+  export let selectedItemLabel: ((item: PopupMenuItem) => string) | undefined = item => item.label || item.value
 
   /** Each time we run getOptions we will save the value -> label mappings that it finds, so that we can display labels on pills. */
   const valueToLabel: Record<string, string> = {}
@@ -96,10 +96,10 @@
 
 <div bind:this={inputelement}></div>
 {#if hasInit}
-  <FieldStandard bind:id {label} {path} {required} {defaultValue} {conditional} {related} {helptext} let:value let:valid let:invalid let:id let:onBlur let:setVal let:messagesid let:helptextid serialize={arraySerialize}>
+  <FieldStandard bind:id {label} {path} {required} {defaultValue} {conditional} {related} {helptext} let:value let:valid let:invalid let:id={fieldid} let:onBlur let:setVal let:messagesid let:helptextid serialize={arraySerialize}>
     {@const _ = reactToValue(value)}
     <div class:valid class:invalid>
-      <MultiSelect {id} name={path} descid={getDescribedBy([messagesid, helptextid, extradescid])}
+      <MultiSelect id={fieldid} name={path} descid={getDescribedBy([messagesid, helptextid, extradescid])}
         {disabled} {maxSelections} selected={$selectedStore} {placeholder} {emptyText} getOptions={wrapGetOptions}
         inputClass='multiselect-input'
         on:change={e => setVal(e.detail.map(itm => itm.value))} on:blur={onBlur}

package/dist/FieldNumber.svelte

@@ -6,7 +6,7 @@
   export { className as class }
   export let id: string | undefined = undefined
   export let path: string
-  export let label: string = ''
+  export let label = ''
   export let defaultValue: number | undefined = undefined
   export let nullable = false
   export let min: number | undefined = undefined
@@ -20,6 +20,6 @@
   export let helptext: string | undefined = undefined
 </script>
 
-<FieldStandard bind:id {label} {path} {required} {defaultValue} {conditional} {related} {helptext} serialize={numberSerialize} deserialize={nullable ? numberNullableDeserialize : numberDeserialize} let:value let:valid let:invalid let:id let:onBlur let:onChange let:helptextid>
-  <Input bind:inputelement type="number" name={path} {value} {id} class="dialog-input {className}" {onChange} {onBlur} {valid} {invalid} {min} {max} {step} {helptextid} {extradescid}></Input>
+<FieldStandard bind:id {label} {path} {required} {defaultValue} {conditional} {related} {helptext} serialize={numberSerialize} deserialize={nullable ? numberNullableDeserialize : numberDeserialize} let:value let:valid let:invalid let:id={fieldid} let:onBlur let:onChange let:helptextid>
+  <Input bind:inputelement type="number" name={path} {value} id={fieldid} class="dialog-input {className}" {onChange} {onBlur} {valid} {invalid} {min} {max} {step} {helptextid} {extradescid}></Input>
 </FieldStandard>

package/dist/FieldRadio.svelte

@@ -7,7 +7,7 @@
   export { className as class }
   export let id: string | undefined = undefined
   export let path: string
-  export let label: string = ''
+  export let label = ''
   export let notNull = false
   export let choices: { label?: string, value: any, disabled?: boolean }[]
   export let defaultValue: any = notNull ? choices[0].value : undefined
@@ -29,9 +29,6 @@
   const finalPath = [inheritedPath, path].filter(isNotBlank).join('.')
 
   let finalDeserialize: (value: string) => any
-  function updateDeserialize (fDes: any) {
-    finalDeserialize = fDes
-  }
   async function reactToChoices (..._: any[]) {
     if (!finalDeserialize) return
     if (!choices.length) {
@@ -44,7 +41,6 @@
   onMount(reactToChoices)
 </script>
 
-<Field {path} {defaultValue} {conditional} {notNull} {number} {date} {datetime} {boolean} {serialize} {deserialize} let:value let:valid let:invalid let:onBlur let:onChange let:messages let:serialize let:deserialize>
-  {@const _ = updateDeserialize(deserialize)}
-  <Switcher bind:id {path} class={className} name={finalPath} {horizontal} {label} iptValue={value} {valid} {invalid} {required} {related} {extradescid} {helptext} {messages} on:change={onChange} {onBlur} choices={choices.map(c => ({ ...c, value: serialize(c.value) }))} />
+<Field {path} {defaultValue} {conditional} {notNull} {number} {date} {datetime} {boolean} {serialize} {deserialize} bind:finalDeserialize let:serialize={finalSerialize} let:value let:valid let:invalid let:onBlur let:onChange let:messages>
+  <Switcher bind:id {path} class={className} name={finalPath} {horizontal} {label} iptValue={value} {valid} {invalid} {required} {related} {extradescid} {helptext} {messages} on:change={onChange} {onBlur} choices={choices.map(c => ({ ...c, value: finalSerialize(c.value) }))} />
 </Field>

package/dist/FieldSelect.svelte

@@ -8,7 +8,7 @@
   export { className as class }
   export let id: string | undefined = undefined
   export let path: string
-  export let label: string = ''
+  export let label = ''
   export let placeholder: string = 'Select' + (label ? ' ' + label : '')
   export let notNull = false
   export let disabled = false
@@ -32,9 +32,6 @@
   const finalPath = [inheritedPath, path].filter(isNotBlank).join('.')
 
   let finalDeserialize: (value: string) => any
-  function updateDeserialize (fDes: any) {
-    finalDeserialize = fDes
-  }
   async function reactToChoices (..._: any[]) {
     if (!finalDeserialize) return
     if (!choices.length) {
@@ -47,12 +44,11 @@
   onMount(reactToChoices)
 </script>
 
-<FieldStandard bind:id {label} {path} {required} {defaultValue} {conditional} {related} {helptext} {notNull} {number} {date} {datetime} {boolean} {serialize} {deserialize} let:value let:valid let:invalid let:id let:onBlur let:onChange let:messagesid let:helptextid let:serialize let:deserialize>
-  {@const _ = updateDeserialize(deserialize)}
-  <select bind:this={inputelement} {id} name={path} {disabled} class="dialog-input dialog-select {className}" on:change={onChange} on:blur={onBlur} class:valid class:invalid aria-describedby={getDescribedBy([messagesid, helptextid, extradescid])}>
+<FieldStandard bind:id {label} {path} {required} {defaultValue} {conditional} {related} {helptext} {notNull} {number} {date} {datetime} {boolean} {serialize} {deserialize} bind:finalDeserialize let:serialize={finalSerialize} let:value let:valid let:invalid let:id={fieldid} let:onBlur let:onChange let:messagesid let:helptextid>
+  <select bind:this={inputelement} id={fieldid} name={path} {disabled} class="dialog-input dialog-select {className}" on:change={onChange} on:blur={onBlur} class:valid class:invalid aria-describedby={getDescribedBy([messagesid, helptextid, extradescid])}>
     {#if !notNull}<option value="" selected={!value}>{placeholder}</option>{/if}
     {#each choices as choice (choice.value)}
-      {@const serializedValue = serialize(choice.value)}
+      {@const serializedValue = finalSerialize?.(choice.value)}
       <option value={serializedValue} disabled={choice.disabled} selected={value === serializedValue}>{choice.label || serializedValue}</option>
     {/each}
   </select>

package/dist/FieldStandard.svelte

@@ -34,10 +34,12 @@
   export let required = false
   export let related: true | number = 0
   export let helptext: string | undefined = undefined
+  export let finalSerialize: ((value: any) => string) | undefined = undefined
+  export let finalDeserialize: ((value: string) => any) | undefined = undefined
 </script>
 
-<Field {path} {defaultValue} {conditional} {notNull} {number} {date} {datetime} {boolean} {serialize} {deserialize} {initialize} {finalize} let:path let:value let:onBlur let:onChange let:setVal let:messages let:valid let:invalid let:serialize let:deserialize>
-  <Container {path} {id} {label} {messages} {descid} {required} {related} {helptext} let:messagesid let:helptextid>
-    <slot {id} {path} {value} {onBlur} {onChange} {setVal} {valid} {invalid} {messagesid} {helptextid} {serialize} {deserialize} />
+<Field {path} {defaultValue} {conditional} {notNull} {number} {date} {datetime} {boolean} {serialize} {deserialize} bind:finalSerialize bind:finalDeserialize {initialize} {finalize} let:path={fullpath} let:value let:onBlur let:onChange let:setVal let:messages let:valid let:invalid>
+  <Container path={fullpath} {id} {label} {messages} {descid} {required} {related} {helptext} let:messagesid let:helptextid>
+    <slot {id} path={fullpath} {value} {onBlur} {onChange} {setVal} {valid} {invalid} {messagesid} {helptextid} serialize={finalSerialize} deserialize={finalDeserialize} />
   </Container>
 </Field>

package/dist/FieldStandard.svelte.d.ts

@@ -20,6 +20,8 @@ declare const __propDef: {
         required?: boolean;
         related?: true | number;
         helptext?: string | undefined;
+        finalSerialize?: ((value: any) => string) | undefined;
+        finalDeserialize?: ((value: string) => any) | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;
@@ -36,8 +38,8 @@ declare const __propDef: {
             invalid: boolean;
             messagesid: string | undefined;
             helptextid: string | undefined;
-            serialize: (value: any) => string;
-            deserialize: (value: string) => any;
+            serialize: ((value: any) => string) | undefined;
+            deserialize: ((value: string) => any) | undefined;
         };
     };
 };