@dosgato/dialog 0.0.19 → 0.0.21

package/FieldChooserLink.svelte

@@ -1,5 +1,3 @@
-<script context="module">export {};
-</script>
 <script>import { FORM_CONTEXT } from '@txstate-mws/svelte-forms';
 import { getContext } from 'svelte';
 import { randomid } from 'txstate-utils';
@@ -7,6 +5,7 @@ import { Chooser, ChooserStore, CHOOSER_API_CONTEXT } from './chooser';
 import Details from './chooser/Details.svelte';
 import Thumbnail from './chooser/Thumbnail.svelte';
 import FieldStandard from './FieldStandard.svelte';
+import { getDescribedBy } from './';
 export let id = undefined;
 export let path;
 export let label = '';
@@ -18,9 +17,9 @@ export let pages = false;
 export let assets = images;
 export let folders = false;
 export let urlEntry = false;
-export let initialType = undefined;
 export let initialSource = undefined;
 export let initialPath = undefined;
+export let helptext = undefined;
 const formStore = getContext(FORM_CONTEXT);
 const value = formStore.getField(path);
 const chooserClient = getContext(CHOOSER_API_CONTEXT);
@@ -29,7 +28,7 @@ const descid = randomid();
 let modalshown = false;
 async function show() {
     if (selectedAsset && selectedAsset.type !== 'raw')
-        store.preview(selectedAsset);
+        store.setPreview(selectedAsset);
     modalshown = true;
 }
 function hide() {
@@ -38,7 +37,7 @@ function hide() {
 function onChange(setVal) {
     return (e) => {
         selectedAsset = e.detail;
-        setVal(e.detail.id);
+        setVal(selectedAsset?.id);
         hide();
     };
 }
@@ -47,7 +46,7 @@ async function userUrlEntry() {
     if (chooserClient.findByUrl) {
         const item = await chooserClient.findByUrl(url);
         if (item)
-            return store.preview(item);
+            return store.setPreview(item);
     }
     store.clearPreview();
     const newVal = chooserClient.urlToValue?.(url) ?? url;
@@ -66,19 +65,21 @@ async function updateSelected(..._) {
 $: updateSelected($value);
 </script>
 
-<FieldStandard bind:id {path} {descid} {label} {defaultValue} {conditional} {required} let:value let:messagesid let:valid let:invalid let:id let:onBlur let:setVal>
+<FieldStandard bind:id {path} {descid} {label} {defaultValue} {conditional} {required} {helptext} let:value let:messagesid let:helptextid let:valid let:invalid let:id let:onBlur let:setVal>
   {#if selectedAsset}
     <div class="dialog-chooser-container">
       <Thumbnail item={selectedAsset} />
       <Details item={selectedAsset} />
     </div>
   {/if}
-  <button type="button" on:click={show} aria-describedby={messagesid}>Select {#if value}New{/if} {#if assets && pages}Link Target{:else if images}Image{:else if assets}Asset{:else}Page{/if}</button>
-  {#if urlEntry && !folders && selectedAsset?.type !== 'folder'}
-    <input type="text" value={selectedAsset?.url ?? ''} on:change={userUrlEntry}><br>
-  {/if}
+  <div class="dialog-chooser-entry">
+    {#if urlEntry && !folders && selectedAsset?.type !== 'folder'}
+      <input type="text" value={selectedAsset?.url ?? ''} on:change={userUrlEntry}>
+    {/if}
+    <button type="button" on:click={show} aria-describedby={getDescribedBy([descid, messagesid, helptextid])}>Select {#if value}New{/if} {#if assets && pages}Link Target{:else if images}Image{:else if assets}Asset{:else}Page{/if}</button>
+  </div>
   {#if modalshown}
-    <Chooser {store} {label} {initialType} {pages} {assets} {images} {initialSource} {initialPath} {folders} on:change={onChange(setVal)} on:escape={hide} />
+    <Chooser {store} {label} {pages} {assets} {images} {initialSource} {initialPath} {folders} {required} on:change={onChange(setVal)} on:escape={hide} />
   {/if}
 </FieldStandard>
 
@@ -93,7 +94,10 @@ $: updateSelected($value);
     padding-top: 0;
     height: 5em;
   }
+  .dialog-chooser-entry {
+    display: flex;
+  }
   input {
-    width: 100%;
+    flex-grow: 1;
   }
 </style>

package/FieldChooserLink.svelte.d.ts

@@ -1,5 +1,4 @@
 import { SvelteComponentTyped } from "svelte";
-import type { ChooserType } from './chooser/ChooserAPI';
 declare const __propDef: {
     props: {
         id?: string | undefined;
@@ -13,18 +12,18 @@ declare const __propDef: {
         assets?: boolean;
         folders?: boolean;
         urlEntry?: boolean;
-        initialType?: ChooserType | undefined;
         initialSource?: string | undefined;
         initialPath?: string | undefined;
+        helptext?: string | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;
     };
     slots: {};
 };
-export declare type FieldChooserLinkProps = typeof __propDef.props;
-export declare type FieldChooserLinkEvents = typeof __propDef.events;
-export declare type FieldChooserLinkSlots = typeof __propDef.slots;
+export type FieldChooserLinkProps = typeof __propDef.props;
+export type FieldChooserLinkEvents = typeof __propDef.events;
+export type FieldChooserLinkSlots = typeof __propDef.slots;
 export default class FieldChooserLink extends SvelteComponentTyped<FieldChooserLinkProps, FieldChooserLinkEvents, FieldChooserLinkSlots> {
 }
 export {};

package/FieldDate.svelte

@@ -13,8 +13,9 @@ export let step = undefined;
 export let conditional = undefined;
 export let required = false;
 export let inputelement = undefined;
+export let helptext = undefined;
 </script>
 
-<FieldStandard bind:id {label} {path} {required} {defaultValue} {conditional} serialize={dateSerialize} deserialize={dateDeserialize} let:value let:valid let:invalid let:id let:onBlur let:onChange let:messagesid>
-  <Input bind:inputelement type="date" name={path} {value} {id} class="dialog-input {className}" {onChange} {onBlur} {valid} {invalid} {min} {max} {step} {messagesid} />
+<FieldStandard bind:id {label} {path} {required} {defaultValue} {conditional} {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} {messagesid} {helptextid}/>
 </FieldStandard>

package/FieldDate.svelte.d.ts

@@ -16,15 +16,16 @@ declare const __propDef: {
         conditional?: boolean | undefined;
         required?: boolean;
         inputelement?: HTMLInputElement;
+        helptext?: string | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;
     };
     slots: {};
 };
-export declare type FieldDateProps = typeof __propDef.props;
-export declare type FieldDateEvents = typeof __propDef.events;
-export declare type FieldDateSlots = typeof __propDef.slots;
+export type FieldDateProps = typeof __propDef.props;
+export type FieldDateEvents = typeof __propDef.events;
+export type FieldDateSlots = typeof __propDef.slots;
 export default class FieldDate extends SvelteComponentTyped<FieldDateProps, FieldDateEvents, FieldDateSlots> {
 }
 export {};

package/FieldDateTime.svelte

@@ -12,8 +12,9 @@ export let max = undefined;
 export let step = undefined;
 export let conditional = undefined;
 export let required = false;
+export let helptext = undefined;
 </script>
 
-<FieldStandard bind:id {label} {path} {required} {defaultValue} {conditional} serialize={datetimeSerialize} deserialize={datetimeDeserialize} let:value let:valid let:invalid let:id let:onBlur let:onChange>
-  <Input type="datetime-local" name={path} {value} {id} class="dialog-input {className}" {onChange} {onBlur} {valid} {invalid} {min} {max} {step} />
+<FieldStandard bind:id {label} {path} {required} {defaultValue} {conditional} {helptext} serialize={datetimeSerialize} deserialize={datetimeDeserialize} let:value let:valid let:invalid let:id let:onBlur let:onChange let:helptextid>
+  <Input type="datetime-local" name={path} {value} {id} class="dialog-input {className}" {onChange} {onBlur} {valid} {invalid} {min} {max} {step} {helptextid}/>
 </FieldStandard>

package/FieldDateTime.svelte.d.ts

@@ -15,15 +15,16 @@ declare const __propDef: {
         step?: number | undefined;
         conditional?: boolean | undefined;
         required?: boolean;
+        helptext?: string | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;
     };
     slots: {};
 };
-export declare type FieldDateTimeProps = typeof __propDef.props;
-export declare type FieldDateTimeEvents = typeof __propDef.events;
-export declare type FieldDateTimeSlots = typeof __propDef.slots;
+export type FieldDateTimeProps = typeof __propDef.props;
+export type FieldDateTimeEvents = typeof __propDef.events;
+export type FieldDateTimeSlots = typeof __propDef.slots;
 export default class FieldDateTime extends SvelteComponentTyped<FieldDateTimeProps, FieldDateTimeEvents, FieldDateTimeSlots> {
 }
 export {};

package/FieldDualListbox.svelte.d.ts

@@ -18,9 +18,9 @@ declare const __propDef: {
     };
     slots: {};
 };
-export declare type FieldDualListboxProps = typeof __propDef.props;
-export declare type FieldDualListboxEvents = typeof __propDef.events;
-export declare type FieldDualListboxSlots = typeof __propDef.slots;
+export type FieldDualListboxProps = typeof __propDef.props;
+export type FieldDualListboxEvents = typeof __propDef.events;
+export type FieldDualListboxSlots = typeof __propDef.slots;
 export default class FieldDualListbox extends SvelteComponentTyped<FieldDualListboxProps, FieldDualListboxEvents, FieldDualListboxSlots> {
 }
 export {};

package/FieldHidden.svelte.d.ts

@@ -12,9 +12,9 @@ declare const __propDef: {
     };
     slots: {};
 };
-export declare type FieldHiddenProps = typeof __propDef.props;
-export declare type FieldHiddenEvents = typeof __propDef.events;
-export declare type FieldHiddenSlots = typeof __propDef.slots;
+export type FieldHiddenProps = typeof __propDef.props;
+export type FieldHiddenEvents = typeof __propDef.events;
+export type FieldHiddenSlots = typeof __propDef.slots;
 export default class FieldHidden extends SvelteComponentTyped<FieldHiddenProps, FieldHiddenEvents, FieldHiddenSlots> {
 }
 export {};

package/FieldIdentifier.svelte.d.ts

@@ -9,9 +9,9 @@ declare const __propDef: {
     };
     slots: {};
 };
-export declare type FieldIdentifierProps = typeof __propDef.props;
-export declare type FieldIdentifierEvents = typeof __propDef.events;
-export declare type FieldIdentifierSlots = typeof __propDef.slots;
+export type FieldIdentifierProps = typeof __propDef.props;
+export type FieldIdentifierEvents = typeof __propDef.events;
+export type FieldIdentifierSlots = typeof __propDef.slots;
 export default class FieldIdentifier extends SvelteComponentTyped<FieldIdentifierProps, FieldIdentifierEvents, FieldIdentifierSlots> {
 }
 export {};

package/FieldMultiple.svelte

@@ -1,7 +1,9 @@
-<script>import { AddMore, FORM_CONTEXT, FORM_INHERITED_PATH } from '@txstate-mws/svelte-forms';
+<script>import plusCircleLight from '@iconify-icons/ph/plus-circle-light';
+import { AddMore, FORM_CONTEXT, FORM_INHERITED_PATH } from '@txstate-mws/svelte-forms';
 import { derivedStore } from '@txstate-mws/svelte-store';
 import { getContext } from 'svelte';
 import { isNotNull } from 'txstate-utils';
+import Button from './Button.svelte';
 import Container from './Container.svelte';
 export let path;
 export let label;
@@ -12,6 +14,9 @@ export let compact = false;
 export let removable = false;
 export let reorder = false;
 export let conditional = undefined;
+export let addMoreText = 'Add';
+export let maxedText = addMoreText;
+export let addMoreClass = undefined;
 const inheritedPath = getContext(FORM_INHERITED_PATH);
 const finalPath = [inheritedPath, path].filter(isNotNull).join('.');
 const store = getContext(FORM_CONTEXT);
@@ -27,7 +32,7 @@ $: messages = compact ? $messageStore : [];
 </script>
 
 <Container {label} {messages}>
-  <AddMore {path} {initialState} {minLength} {maxLength} {conditional} addMoreClass="dialog-multiple-button" let:path let:currentLength let:maxLength let:index let:minned let:maxed let:value let:onDelete let:onMoveUp>
+  <AddMore {path} {initialState} {minLength} {maxLength} {conditional} let:path let:currentLength let:maxLength let:index let:minned let:maxed let:value let:onDelete let:onMoveUp>
     {@const showDelete = removable && !minned}
     {@const showMove = reorder && index > 0}
     <div class="dialog-multiple" class:has-delete-icon={showDelete}>
@@ -39,29 +44,31 @@ $: messages = compact ? $messageStore : [];
         {#if showDelete}<button class="dialog-multiple-delete" type="button" on:click|preventDefault|stopPropagation={onDelete}>X</button>{/if}
       </div>{/if}
     </div>
+    <svelte:fragment slot="addbutton" let:maxed let:onClick>
+      <Button type="button" icon={plusCircleLight} class="{addMoreClass} dialog-multiple-button" disabled={maxed} on:click={onClick}>{maxed ? maxedText : addMoreText}</Button>
+    </svelte:fragment>
   </AddMore>
 </Container>
 
 <style>
   .dialog-multiple {
     position: relative;
-    border: var(--dialog-container-border, 1px solid #999999);
+    border: var(--dialog-container-border, 0);
     padding: var(--dialog-container-padding, 1em);
   }
   .dialog-multiple:not(:first-child) {
     border-top: 0;
   }
   .dialog-multiple:nth-of-type(even) {
-    background-color: var(--dialog-field-bg1, #e6e6e6);
+    background-color: var(--dialog-field-bg1, transparent);
     color: var(--dialog-field-text1, inherit);
   }
   .dialog-multiple:nth-of-type(odd) {
-    background-color: var(--dialog-field-bg2, #ffffff);
+    background-color: var(--dialog-field-bg2, transparent);
     color: var(--dialog-field-text2, inherit);
   }
   :global(.dialog-multiple-button) {
-    padding: 0.3em 0.4em;
-    margin-top: 0.5em;
+    margin-left: var(--dialog-container-padding, 1em);
   }
   .dialog-multiple.has-delete-icon {
     display: flex;

package/FieldMultiple.svelte.d.ts

@@ -10,6 +10,9 @@ declare const __propDef: {
         removable?: boolean;
         reorder?: boolean;
         conditional?: boolean | undefined;
+        addMoreText?: string;
+        maxedText?: string;
+        addMoreClass?: string;
     };
     events: {
         [evt: string]: CustomEvent<any>;
@@ -25,9 +28,9 @@ declare const __propDef: {
         };
     };
 };
-export declare type FieldMultipleProps = typeof __propDef.props;
-export declare type FieldMultipleEvents = typeof __propDef.events;
-export declare type FieldMultipleSlots = typeof __propDef.slots;
+export type FieldMultipleProps = typeof __propDef.props;
+export type FieldMultipleEvents = typeof __propDef.events;
+export type FieldMultipleSlots = typeof __propDef.slots;
 export default class FieldMultiple extends SvelteComponentTyped<FieldMultipleProps, FieldMultipleEvents, FieldMultipleSlots> {
 }
 export {};

package/FieldMultiselect.svelte

@@ -1,5 +1,8 @@
 <script>import { MultiSelect } from '@txstate-mws/svelte-components';
+import { Store } from '@txstate-mws/svelte-store';
 import FieldStandard from './FieldStandard.svelte';
+import { onMount } from 'svelte';
+import { isNotBlank } from 'txstate-utils';
 export let id = undefined;
 export let path;
 export let label = '';
@@ -11,42 +14,46 @@ export let required = false;
 export let getOptions;
 // each time we run getOptions we will save the value -> label mappings
 // that it finds, so that we can display labels on pills
-let valueToLabel = {};
+const valueToLabel = {};
 async function wrapGetOptions(search) {
-    let opts = await getOptions(search);
+    const opts = await getOptions(search);
     // if no options are returned with the search term, we can end up with an infinite loop
     // the first time reactToValue calls wrapGetOptions
-    if (opts.length === 0) {
-        opts = await getOptions('');
-    }
-    for (const opt of opts)
+    // if (opts.length === 0) {
+    //   opts = await getOptions('')
+    // }
+    for (const opt of opts) {
         valueToLabel[opt.value] = opt.label || opt.value;
-    valueToLabel = valueToLabel;
+    }
     return opts;
 }
-function valueToSelected(value, valueToLabel) {
-    return value.map(v => ({ value: v, label: valueToLabel[v] }));
-}
+const selectedStore = new Store([]);
+let hasInit = !defaultValue.length;
+onMount(async () => {
+    await reactToValue(defaultValue);
+    hasInit = true;
+});
 // if we get a value from the form that we haven't seen in the popup menu
 // yet, we won't have a label for it
 // this function runs getOptions on any selected values for which the label
 // is currently unknown
-function reactToValue(value) {
-    if (value == null)
-        return;
-    for (const v of value) {
+async function reactToValue(value) {
+    await Promise.all(value.map(async (v) => {
         if (!valueToLabel[v])
-            wrapGetOptions(v).catch(console.debug);
-    }
+            await wrapGetOptions(v);
+    }));
+    selectedStore.set(value.map(v => ({ value: v, label: valueToLabel[v] })).filter(v => isNotBlank(v.label)));
 }
 </script>
 
-<FieldStandard bind:id {label} {path} {required} {defaultValue} {conditional} let:value let:valid let:invalid let:id let:onBlur let:setVal>
-  {@const _ = reactToValue(value)}
-  <div class:valid class:invalid>
-    <MultiSelect {id} name={path} {disabled} selected={valueToSelected(value, valueToLabel)} {placeholder} getOptions={wrapGetOptions} on:change={e => setVal(e.detail.map(itm => itm.value))} on:blur={onBlur}></MultiSelect>
-  </div>
-</FieldStandard>
+{#if hasInit}
+  <FieldStandard bind:id {label} {path} {required} {defaultValue} {conditional} let:value let:valid let:invalid let:id let:onBlur let:setVal>
+    {@const _ = reactToValue(value)}
+    <div class:valid class:invalid>
+      <MultiSelect {id} name={path} {disabled} selected={$selectedStore} {placeholder} getOptions={wrapGetOptions} on:change={e => setVal(e.detail.map(itm => itm.value))} on:blur={onBlur}></MultiSelect>
+    </div>
+  </FieldStandard>
+{/if}
 
 <style>
   .invalid {

package/FieldMultiselect.svelte.d.ts

@@ -17,9 +17,9 @@ declare const __propDef: {
     };
     slots: {};
 };
-export declare type FieldMultiselectProps = typeof __propDef.props;
-export declare type FieldMultiselectEvents = typeof __propDef.events;
-export declare type FieldMultiselectSlots = typeof __propDef.slots;
+export type FieldMultiselectProps = typeof __propDef.props;
+export type FieldMultiselectEvents = typeof __propDef.events;
+export type FieldMultiselectSlots = typeof __propDef.slots;
 export default class FieldMultiselect extends SvelteComponentTyped<FieldMultiselectProps, FieldMultiselectEvents, FieldMultiselectSlots> {
 }
 export {};

package/FieldNumber.svelte

@@ -14,8 +14,9 @@ export let step = undefined;
 export let conditional = undefined;
 export let required = false;
 export let inputelement = undefined;
+export let helptext = undefined;
 </script>
 
-<FieldStandard bind:id {label} {path} {required} {defaultValue} {conditional} serialize={numberSerialize} deserialize={nullable ? numberNullableDeserialize : numberDeserialize} let:value let:valid let:invalid let:id let:onBlur let:onChange>
-  <Input bind:inputelement type="number" name={path} {value} {id} class="dialog-input {className}" {onChange} {onBlur} {valid} {invalid} {min} {max} {step}></Input>
+<FieldStandard bind:id {label} {path} {required} {defaultValue} {conditional} {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}></Input>
 </FieldStandard>

package/FieldNumber.svelte.d.ts

@@ -13,15 +13,16 @@ declare const __propDef: {
         conditional?: boolean | undefined;
         required?: boolean;
         inputelement?: HTMLInputElement;
+        helptext?: string | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;
     };
     slots: {};
 };
-export declare type FieldNumberProps = typeof __propDef.props;
-export declare type FieldNumberEvents = typeof __propDef.events;
-export declare type FieldNumberSlots = typeof __propDef.slots;
+export type FieldNumberProps = typeof __propDef.props;
+export type FieldNumberEvents = typeof __propDef.events;
+export type FieldNumberSlots = typeof __propDef.slots;
 export default class FieldNumber extends SvelteComponentTyped<FieldNumberProps, FieldNumberEvents, FieldNumberSlots> {
 }
 export {};

package/FieldRadio.svelte

@@ -1,5 +1,4 @@
-<script>import { nullableSerialize, nullableDeserialize } from '@txstate-mws/svelte-forms';
-import { randomid } from 'txstate-utils';
+<script>import { randomid } from 'txstate-utils';
 import FieldStandard from './FieldStandard.svelte';
 import Radio from './Radio.svelte';
 let className = '';
@@ -13,16 +12,22 @@ export let defaultValue = notNull ? choices[0].value : undefined;
 export let conditional = undefined;
 export let required = false;
 export let horizontal = false;
+export let helptext = undefined;
+export let number = false;
+export let date = false;
+export let datetime = false;
+export let serialize = undefined;
+export let deserialize = undefined;
 const groupid = randomid();
 const width = '100%';
 </script>
 
-<FieldStandard bind:id descid={groupid} {label} {path} {required} {defaultValue} {conditional} serialize={!notNull && nullableSerialize} deserialize={!notNull && nullableDeserialize} let:value let:valid let:invalid let:onBlur let:onChange>
+<FieldStandard bind:id descid={groupid} {label} {path} {required} {defaultValue} {conditional} {helptext} {notNull} {number} {date} {datetime} {serialize} {deserialize} let:value let:valid let:invalid let:onBlur let:onChange let:helptextid>
   <div class="dialog-radio {className}" class:horizontal role="radiogroup" aria-labelledby={groupid} class:invalid>
     {#each choices as choice, idx}
       {@const radioid = `${path}.${idx}`}
       <label for={radioid} style:width>
-        <Radio id={radioid} name={path} value={choice.value} selected={value === choice.value} disabled={choice.disabled} {onChange} {onBlur} />
+        <Radio id={radioid} name={path} value={choice.value} selected={value === choice.value} disabled={choice.disabled} {onChange} {onBlur} {helptextid}/>
         <span>{choice.label || (typeof choice.value === 'string' ? choice.value : '')}</span>
       </label>
     {/each}

package/FieldRadio.svelte.d.ts

@@ -15,15 +15,21 @@ declare const __propDef: {
         conditional?: boolean | undefined;
         required?: boolean;
         horizontal?: boolean;
+        helptext?: string | undefined;
+        number?: boolean;
+        date?: boolean;
+        datetime?: boolean;
+        serialize?: (value: any) => string;
+        deserialize?: (value: string) => any;
     };
     events: {
         [evt: string]: CustomEvent<any>;
     };
     slots: {};
 };
-export declare type FieldRadioProps = typeof __propDef.props;
-export declare type FieldRadioEvents = typeof __propDef.events;
-export declare type FieldRadioSlots = typeof __propDef.slots;
+export type FieldRadioProps = typeof __propDef.props;
+export type FieldRadioEvents = typeof __propDef.events;
+export type FieldRadioSlots = typeof __propDef.slots;
 export default class FieldRadio extends SvelteComponentTyped<FieldRadioProps, FieldRadioEvents, FieldRadioSlots> {
 }
 export {};

package/FieldSelect.svelte

@@ -1,4 +1,4 @@
-<script>import { nullableSerialize, nullableDeserialize } from '@txstate-mws/svelte-forms';
+<script>import { getDescribedBy } from './';
 import FieldStandard from './FieldStandard.svelte';
 let className = '';
 export { className as class };
@@ -13,10 +13,16 @@ export let defaultValue = notNull ? choices[0].value : undefined;
 export let conditional = undefined;
 export let required = false;
 export let inputelement = undefined;
+export let helptext = undefined;
+export let number = false;
+export let date = false;
+export let datetime = false;
+export let serialize = undefined;
+export let deserialize = undefined;
 </script>
 
-<FieldStandard bind:id {label} {path} {required} {defaultValue} {conditional} serialize={!notNull && nullableSerialize} deserialize={!notNull && nullableDeserialize} let:value let:valid let:invalid let:id let:onBlur let:onChange let:messagesid>
-  <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={messagesid}>
+<FieldStandard bind:id {label} {path} {required} {defaultValue} {conditional} {helptext} {notNull} {number} {date} {datetime} {serialize} {deserialize} let:value let:valid let:invalid let:id let:onBlur let:onChange let:messagesid let:helptextid>
+  <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])}>
     {#if !notNull}<option value="" selected={!value}>{placeholder}</option>{/if}
     {#each choices as choice (choice.value)}
       <option value={choice.value} disabled={choice.disabled} selected={value === choice.value}>{choice.label || choice.value}</option>

package/FieldSelect.svelte.d.ts

@@ -17,15 +17,21 @@ declare const __propDef: {
         conditional?: boolean | undefined;
         required?: boolean;
         inputelement?: HTMLSelectElement;
+        helptext?: string | undefined;
+        number?: boolean;
+        date?: boolean;
+        datetime?: boolean;
+        serialize?: (value: any) => string;
+        deserialize?: (value: string) => any;
     };
     events: {
         [evt: string]: CustomEvent<any>;
     };
     slots: {};
 };
-export declare type FieldSelectProps = typeof __propDef.props;
-export declare type FieldSelectEvents = typeof __propDef.events;
-export declare type FieldSelectSlots = typeof __propDef.slots;
+export type FieldSelectProps = typeof __propDef.props;
+export type FieldSelectEvents = typeof __propDef.events;
+export type FieldSelectSlots = typeof __propDef.slots;
 export default class FieldSelect extends SvelteComponentTyped<FieldSelectProps, FieldSelectEvents, FieldSelectSlots> {
 }
 export {};

package/FieldStandard.svelte

@@ -6,14 +6,19 @@ export let descid = undefined;
 export let path;
 export let defaultValue = undefined;
 export let label;
+export let notNull = false;
+export let number = false;
+export let date = false;
+export let datetime = false;
 export let serialize = undefined;
 export let deserialize = undefined;
 export let conditional = undefined;
 export let required = false;
+export let helptext = undefined;
 </script>
 
-<Field {path} {defaultValue} {conditional} {serialize} {deserialize} let:path let:value let:onBlur let:onChange let:setVal let:messages let:valid let:invalid>
-  <Container {id} {label} {messages} {descid} {required} let:messagesid>
-    <slot {id} {path} {value} {onBlur} {onChange} {setVal} {valid} {invalid} {messagesid} />
+<Field {path} {defaultValue} {conditional} {notNull} {number} {date} {datetime} {serialize} {deserialize} let:path let:value let:onBlur let:onChange let:setVal let:messages let:valid let:invalid>
+  <Container {id} {label} {messages} {descid} {required} {helptext} let:messagesid let:helptextid>
+    <slot {id} {path} {value} {onBlur} {onChange} {setVal} {valid} {invalid} {messagesid} {helptextid}/>
   </Container>
 </Field>

package/FieldStandard.svelte.d.ts

@@ -6,10 +6,15 @@ declare const __propDef: {
         path: string;
         defaultValue?: any;
         label: string;
+        notNull?: boolean;
+        number?: boolean;
+        date?: boolean;
+        datetime?: boolean;
         serialize?: (value: any) => string;
         deserialize?: (value: string) => any;
         conditional?: boolean | undefined;
         required?: boolean;
+        helptext?: string | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;
@@ -25,12 +30,13 @@ declare const __propDef: {
             valid: boolean;
             invalid: boolean;
             messagesid: any;
+            helptextid: string;
         };
     };
 };
-export declare type FieldStandardProps = typeof __propDef.props;
-export declare type FieldStandardEvents = typeof __propDef.events;
-export declare type FieldStandardSlots = typeof __propDef.slots;
+export type FieldStandardProps = typeof __propDef.props;
+export type FieldStandardEvents = typeof __propDef.events;
+export type FieldStandardSlots = typeof __propDef.slots;
 export default class FieldStandard extends SvelteComponentTyped<FieldStandardProps, FieldStandardEvents, FieldStandardSlots> {
 }
 export {};

package/FieldText.svelte

@@ -15,8 +15,9 @@ export let conditional = undefined;
 export let required = false;
 export let use = [];
 export let inputelement = undefined;
+export let helptext = undefined;
 </script>
 
-<FieldStandard bind:id {label} {path} {required} {defaultValue} {conditional} serialize={!notNull && nullableSerialize} deserialize={!notNull && nullableDeserialize} let:value let:valid let:invalid let:id let:onBlur let:onChange let:messagesid>
-  <Input bind:inputelement {type} name={path} {value} {id} class="dialog-input {className}" {allowlastpass} {onChange} {onBlur} {valid} {invalid} {maxlength} {messagesid} {use}></Input>
+<FieldStandard bind:id {label} {path} {required} {defaultValue} {conditional} {helptext} serialize={!notNull && nullableSerialize} deserialize={!notNull && nullableDeserialize} let:value let:valid let:invalid let:id let:onBlur let:onChange let:messagesid let:helptextid>
+  <Input bind:inputelement {type} name={path} {value} {id} class="dialog-input {className}" {allowlastpass} {onChange} {onBlur} {valid} {invalid} {maxlength} {messagesid} {helptextid} {use}></Input>
 </FieldStandard>