@dosgato/dialog 0.0.19 → 0.0.20

package/Button.svelte

@@ -0,0 +1,77 @@
+<script>import Icon from './Icon.svelte';
+export let type = 'button';
+export let disabled = false;
+export let compact = false;
+export let cancel = false;
+export let destructive = false;
+export let secondary = false;
+export let describedby = undefined;
+export let element = undefined;
+export let icon = undefined;
+let className = undefined;
+export { className as class };
+</script>
+
+<button {disabled} bind:this={element} {type} class="reset {className ?? ''}" class:cancel class:destructive class:secondary class:compact aria-describedby={describedby} on:click><Icon {icon} width="1.3em" /><span><slot /></span></button>
+
+<style>
+  button.reset {
+    padding: 0.5em 1em;
+    border: 0;
+    border-radius: 0.25em;
+    background-color: var(--dg-button-bg, #501214);
+    color: var(--dg-button-text, white);
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    line-height: 1;
+  }
+  button.reset.compact {
+    padding: 0.1em;
+  }
+  button.reset[disabled] {
+    opacity: 0.6;
+    cursor: default;
+  }
+
+  button.reset > :global(svg:last-child) {
+    margin-left: 0.3em;
+    margin-right: -0.3em;
+  }
+  button.reset > :global(svg:first-child) {
+    margin-left: -0.3em;
+    margin-right: 0.3em;
+  }
+
+  button.reset:not([disabled]):hover {
+    background-color: var(--dg-button-hover-bg, #622a2c);
+    color: var(--dg-button-hover-text, white);
+  }
+
+  button.secondary {
+    background-color: var(--dg-button-secondary-bg, rgb(18, 184, 134));
+    color: var(--dg-button-secondary-text, white);
+  }
+  button.secondary:not([disabled]):hover {
+    background-color: var(--dg-button-secondary-hover-bg, rgb(12, 166, 120));
+    color: var(--dg-button-secondary-hover-text, white);
+  }
+
+  button.cancel {
+    background-color: var(--dg-button-cancel-bg, #808080);
+    color: var(--dg-button-cancel-text, white);
+  }
+  button.cancel:not([disabled]):hover {
+    background-color: var(--dg-button-cancel-hover-bg, #595959);
+    color: var(--dg-button-cancel-hover-text, white);
+  }
+
+  button.destructive {
+    background-color: var(--dg-button-delete-bg, rgb(250, 82, 82));
+    color: var(--dg-button-delete-text, white);
+  }
+  button.destructive:not([disabled]):hover {
+    background-color: var(--dg-button-delete-hover-bg, rgb(240, 62, 62));
+    color: var(--dg-button-delete-hover-text, white);
+  }
+</style>

package/Button.svelte.d.ts

@@ -0,0 +1,30 @@
+import { SvelteComponentTyped } from "svelte";
+import type { IconifyIcon } from '@iconify/svelte';
+declare const __propDef: {
+    props: {
+        type?: 'button' | 'submit';
+        disabled?: boolean;
+        compact?: boolean;
+        cancel?: boolean;
+        destructive?: boolean;
+        secondary?: boolean;
+        describedby?: string | undefined;
+        element?: HTMLElement | undefined;
+        icon?: IconifyIcon;
+        class?: string | undefined;
+    };
+    events: {
+        click: MouseEvent;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+};
+export declare type ButtonProps = typeof __propDef.props;
+export declare type ButtonEvents = typeof __propDef.events;
+export declare type ButtonSlots = typeof __propDef.slots;
+export default class Button extends SvelteComponentTyped<ButtonProps, ButtonEvents, ButtonSlots> {
+}
+export {};

package/Checkbox.svelte

@@ -10,7 +10,8 @@ export let disabled = false;
 export let valid = false;
 export let invalid = false;
 export let inputelement = undefined;
-$: descby = [descid, messagesid].filter(isNotBlank).join(' ');
+export let helptextid = undefined;
+$: descby = [descid, messagesid, helptextid].filter(isNotBlank).join(' ');
 </script>
 
 <input bind:this={inputelement} {id} type="checkbox" {name} class:valid class:invalid {disabled} aria-describedby={descby} bind:checked={value} on:change={onChange} on:blur={onBlur}>

package/Checkbox.svelte.d.ts

@@ -12,6 +12,7 @@ declare const __propDef: {
         valid?: boolean;
         invalid?: boolean;
         inputelement?: HTMLInputElement;
+        helptextid?: string | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/Container.svelte

@@ -1,11 +1,14 @@
 <script>import { eq } from '@txstate-mws/svelte-components';
 import InlineMessages from './InlineMessages.svelte';
+import { randomid } from 'txstate-utils';
 export let id = undefined;
 export let descid = undefined;
 export let label;
+export let helptext = undefined;
 export let messages;
 export let required = false;
 let messagesid;
+const helptextid = helptext ? randomid() : undefined;
 </script>
 
 <div use:eq class="dialog-field-container">
@@ -15,16 +18,16 @@ let messagesid;
     <div id={descid} class="dialog-field-label">{label}{#if required}&nbsp;*{/if}</div>
   {/if}
   <div class="dialog-field-content">
-    <slot {messagesid} />
+    {#if helptext}
+      <div id={helptextid} class="dialog-field-help">{helptext}</div>
+    {/if}
+    <slot {messagesid} {helptextid}/>
   </div>
   <InlineMessages bind:id={messagesid} {messages} />
 </div>
 
 <style>
   .dialog-field-container {
-    display: flex;
-    flex-wrap: wrap;
-    align-items: center;
     border-bottom: var(--dialog-container-border, 1px solid #999999);
     padding: var(--dialog-container-padding, 1em) 0;
     --dialog-container-tab-correct: calc(-1 * var(--tabs-panel-padding, 1em));
@@ -57,33 +60,29 @@ let messagesid;
   :global(.tabs-panel) .dialog-field-container :global(.dialog-field-container) {
     margin-left: 0;
   }
-  .dialog-field-content {
-    position: relative;
-    width: max(70%, calc(100% - 20em));
-  }
   .dialog-field-label {
-    width: min(30%, 20em);
-  }
-  :global([data-eq~="500px"]) .dialog-field-label {
-    width: 100%;
-    margin-bottom: 0.4em;
+    display: block;
+    margin-bottom: 0.3em;
+    font-weight: 500;
   }
-  :global([data-eq~="500px"]) .dialog-field-content {
-    width: 100%;
+  .dialog-field-content {
+    position: relative;
   }
   .dialog-field-container :global(.dialog-input) {
     width: 100%;
-    padding: 0.4em 0.6em;
+    padding: 0.3em 0.5em;
+    border: 0;
+    border-radius: 0;
   }
   .dialog-field-container: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-field-container:nth-of-type(odd) {
-    background-color: var(--dialog-field-bg2, #ffffff);
+    background-color: var(--dialog-field-bg2, transparent);
     color: var(--dialog-field-text2, inherit);
   }
-  .dialog-field-container :global(.field-help-text) {
+  .dialog-field-container :global(.dialog-field-help) {
     font-size: 0.9em;
     color: #595959;
   }

package/Container.svelte.d.ts

@@ -5,6 +5,7 @@ declare const __propDef: {
         id?: string | undefined;
         descid?: string | undefined;
         label: string;
+        helptext?: string | undefined;
         messages: Feedback[];
         required?: boolean;
     };
@@ -14,6 +15,7 @@ declare const __propDef: {
     slots: {
         default: {
             messagesid: any;
+            helptextid: string;
         };
     };
 };

package/Dialog.svelte

@@ -0,0 +1,137 @@
+<script context="module">export const DIALOG_TABS_CONTEXT = {};
+</script>
+<script>import arrowLeftLight from '@iconify-icons/ph/arrow-left-light';
+import arrowRightLight from '@iconify-icons/ph/arrow-right-light';
+import { Modal, ScreenReaderOnly } from '@txstate-mws/svelte-components';
+import { createEventDispatcher, setContext } from 'svelte';
+import { isNotBlank, randomid } from 'txstate-utils';
+import { Button, Icon } from './';
+const dispatch = createEventDispatcher();
+export let initialfocus = undefined;
+export let title = '';
+export let icon = undefined;
+export let size = 'normal';
+export let cancelText = undefined;
+export let continueText = 'Ok';
+export let continueIcon = undefined;
+export let escapable = isNotBlank(cancelText);
+export let disabled = false;
+export let labelid = randomid();
+export let descid = randomid();
+const ctx = { change: onTabChange };
+let hasTabs = false;
+let prevTitle;
+let nextTitle;
+let hasRequired = false;
+let onPrev;
+let onNext;
+function onTabChange() {
+    ({ hasTabs, prevTitle, nextTitle, hasRequired, onPrev, onNext } = ctx);
+}
+setContext(DIALOG_TABS_CONTEXT, ctx);
+$: describedby = [title ? labelid : undefined, descid].filter(isNotBlank).join(' ');
+</script>
+
+<Modal {escapable} {initialfocus} hidefocus={false} on:escape>
+  <section class="{size}">
+    {#if title || icon}
+      <header id={labelid}>
+        <Icon width="1.4em" {icon} inline />{title}
+      </header>
+    {/if}
+    <div id={descid} class="content">
+      <slot></slot>
+    </div>
+    <footer class="actions">
+      <slot name="buttons" {nextTitle} {prevTitle} {hasRequired} onPrev={onPrev} onNext={onNext}>
+        {#if prevTitle}
+          <Button class="prev" disabled={!prevTitle} on:click={onPrev}><Icon icon={arrowLeftLight} inline /> Previous<ScreenReaderOnly> Tab ({prevTitle})</ScreenReaderOnly></Button>
+        {/if}
+        {#if isNotBlank(cancelText)}
+          <Button cancel {describedby} on:click={() => dispatch('escape')}>{cancelText}</Button>
+        {/if}
+        <Button class="primary" disabled={disabled || hasRequired} {describedby} on:click={() => dispatch('continue')}><Icon icon={continueIcon} inline />{continueText}</Button>
+        {#if nextTitle}
+          <Button class="next" disabled={!nextTitle} on:click={onNext}>Next<ScreenReaderOnly> Tab ({nextTitle})</ScreenReaderOnly> <Icon width="1.2em" icon={arrowRightLight} inline /></Button>
+        {/if}
+      </slot>
+    </footer>
+  </section>
+</Modal>
+
+<style>
+  section {
+    position: relative;
+    background-color: #f4f4f4;
+    padding: 1em;
+    overflow: hidden;
+  }
+  section.tiny {
+    width: 30vw;
+    min-width: 200px;
+    max-width: 250px;
+  }
+  section.small {
+    width: 50vw;
+    min-width: 220px;
+    max-width: 400px;
+  }
+  section.normal {
+    width: 75vw;
+    min-width: 250px;
+    max-width: 650px;
+  }
+  section.large {
+    width: 90vw;
+    min-width: 300px;
+    max-width: 1000px;
+  }
+
+  header {
+    display: flex;
+    align-items: center;
+    font-size: 1.1em;
+    margin: -1em;
+    margin-bottom: 0;
+    padding: 0.5em calc(var(--tabs-padding-hori, 1em) + 0.9em - 3px);
+    background-color: var(--dg-dialog-header-bg, #DDDDDD);
+    color: var(--dg-dialog-header-text, black);
+  }
+
+  header :global(svg) {
+    margin-right: 0.4em;
+  }
+
+  .content {
+    margin: 0 -1em;
+    padding: 1em;
+    min-height: 5em;
+    overflow: auto;
+    background-color: var(--dg-dialog-content-bg, #f4f4f4);
+    max-height: calc(100vh - 7em);
+  }
+
+  footer {
+    display: flex;
+    align-items: center;
+    justify-content: flex-end;
+    flex-wrap: wrap;
+    background-color: var(--dg-dialog-footer-bg, #DDDDDD);
+    margin: -1em;
+    margin-top: 0;
+    padding: 0.5em 1em;
+  }
+
+  footer > :global(*:not(:last-child)) {
+    margin-right: 0.5em;
+  }
+
+  :global(.dialog-field-container) {
+    background-color: transparent !important;
+    border-bottom: 0px !important;
+  }
+
+  footer.actions :global(.prev) {
+    margin-right: auto;
+  }
+</style>

package/Dialog.svelte.d.ts

@@ -0,0 +1,49 @@
+import { SvelteComponentTyped } from "svelte";
+export declare const DIALOG_TABS_CONTEXT: {};
+export interface DialogTabContext {
+    change: (..._: any) => void;
+    hasTabs?: boolean;
+    prevTitle?: string;
+    nextTitle?: string;
+    hasRequired?: boolean;
+    onNext?: () => void;
+    onPrev?: () => void;
+}
+import type { IconifyIcon } from '@iconify/svelte';
+declare const __propDef: {
+    props: {
+        initialfocus?: string | undefined;
+        title?: string;
+        icon?: IconifyIcon;
+        size?: 'tiny' | 'small' | 'normal' | 'large';
+        cancelText?: string | undefined;
+        continueText?: string;
+        continueIcon?: IconifyIcon;
+        escapable?: boolean;
+        disabled?: boolean;
+        labelid?: string;
+        descid?: string;
+    };
+    events: {
+        escape: CustomEvent<any>;
+        continue: CustomEvent<any>;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+        buttons: {
+            nextTitle: string;
+            prevTitle: string;
+            hasRequired: boolean;
+            onPrev: () => void;
+            onNext: () => void;
+        };
+    };
+};
+export declare type DialogProps = typeof __propDef.props;
+export declare type DialogEvents = typeof __propDef.events;
+export declare type DialogSlots = typeof __propDef.slots;
+export default class Dialog extends SvelteComponentTyped<DialogProps, DialogEvents, DialogSlots> {
+}
+export {};

package/FieldAutocomplete.svelte

@@ -2,6 +2,7 @@
 import FieldStandard from './FieldStandard.svelte';
 import { randomid } from 'txstate-utils';
 import { PopupMenu, ScreenReaderOnly } from '@txstate-mws/svelte-components';
+import { getDescribedBy } from './';
 export let id = undefined;
 export let path;
 export let label = '';
@@ -14,15 +15,14 @@ export let choices;
 export let defaultValue = notNull ? choices[0].value : undefined;
 export let conditional = undefined;
 export let required = false;
-export let helptext = '';
 export let inputelement = undefined;
+export let helptext = undefined;
 let inputvalue = '';
 let popupvalue = undefined;
 let savedLabel = '';
 let changed = false;
 let menuid;
 const liveTextId = randomid();
-const helpTextId = randomid();
 $: filteredChoices = changed
     ? choices.filter((item) => {
         return item.label?.toLowerCase().includes(inputvalue.toLowerCase()) || item.value.toLowerCase().includes(inputvalue.toLowerCase());
@@ -56,13 +56,10 @@ function reactToInitialValue(value) {
 }
 </script>
 
-<FieldStandard bind:id {label} {path} {required} {defaultValue} {conditional} serialize={!notNull && nullableSerialize} deserialize={!notNull && nullableDeserialize} let:value let:setVal let:valid let:invalid let:id let:onBlur let:onChange let:messagesid>
+<FieldStandard bind:id {label} {path} {required} {defaultValue} {conditional} {helptext} serialize={!notNull && nullableSerialize} deserialize={!notNull && nullableDeserialize} let:value let:setVal let:valid let:invalid let:id let:onBlur let:onChange let:messagesid let:helptextid>
   {@const _ = reactToInitialValue(value)}
-  <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:change={onChange} autocapitalize="none" type="text" autocomplete="off" aria-autocomplete="list" role="combobox" {disabled} aria-describedby={`${messagesid ?? ''} ${helptext.length ? helpTextId : ''}`} on:keydown={checkifchanged}>
+  <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:change={onChange} autocapitalize="none" type="text" autocomplete="off" aria-autocomplete="list" role="combobox" {disabled} aria-describedby={getDescribedBy([messagesid, helptextid])} on:keydown={checkifchanged}>
   <PopupMenu bind:menuid align="bottomleft" items={filteredChoices} buttonelement={inputelement} bind:value={popupvalue} on:change={onchangepopup(setVal)} emptyText="No options available"/>
-  {#if helptext.length}
-    <span id={helpTextId} class="field-help-text">{helptext}</span>
-  {/if}
   <ScreenReaderOnly arialive="polite" ariaatomic={true} id={liveTextId}>
     {filteredChoices.length} {filteredChoices.length === 1 ? 'option' : 'options'} available.
   </ScreenReaderOnly>

package/FieldAutocomplete.svelte.d.ts

@@ -16,8 +16,8 @@ declare const __propDef: {
         defaultValue?: any;
         conditional?: boolean | undefined;
         required?: boolean;
-        helptext?: string;
         inputelement?: HTMLInputElement;
+        helptext?: string | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/FieldCheckbox.svelte

@@ -11,6 +11,7 @@ export let defaultValue = undefined;
 export let conditional = undefined;
 export let required = false;
 export let inputelement = undefined;
+export let helptext = undefined;
 function onChange(setVal) {
     return function () {
         setVal(this.checked);
@@ -19,10 +20,10 @@ function onChange(setVal) {
 const descid = randomid();
 </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} {helptext} {required} let:value let:messagesid let:helptextid let:valid let:invalid let:id let:onBlur let:setVal>
   <div class={className}>
     <label for={id}>
-      <Checkbox bind:inputelement {id} name={path} {value} {messagesid} {descid} {valid} {invalid} {onBlur} onChange={onChange(setVal)}></Checkbox>
+      <Checkbox bind:inputelement {id} name={path} {value} {messagesid} {helptextid} {descid} {valid} {invalid} {onBlur} onChange={onChange(setVal)}></Checkbox>
       <span>{boxLabel}</span>
     </label>
   </div>

package/FieldCheckbox.svelte.d.ts

@@ -5,11 +5,12 @@ declare const __propDef: {
         id?: string | undefined;
         path: string;
         label?: string;
-        boxLabel: any;
+        boxLabel: string;
         defaultValue?: boolean | undefined;
         conditional?: boolean | undefined;
         required?: boolean;
         inputelement?: HTMLInputElement;
+        helptext?: string | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/FieldChoices.svelte

@@ -14,6 +14,7 @@ export let defaultValue = [];
 export let conditional = undefined;
 export let maxwidth = 250;
 export let leftToRight = false;
+export let helptext = undefined;
 const store = getContext(FORM_CONTEXT);
 const currentWidth = derivedStore(store, 'width');
 $: cols = Math.min(Math.ceil($currentWidth / maxwidth), choices.length);
@@ -39,14 +40,14 @@ const descid = randomid();
 </script>
 
 <Field {path} {defaultValue} {conditional} let:path let:value let:onBlur let:setVal let:messages let:valid let:invalid>
-  <Container {id} {label} {messages} {descid} let:messagesid>
+  <Container {id} {label} {messages} {descid} {helptext} let:messagesid let:helptextid>
     <div class="dialog-choices {className}" class:valid class:invalid>
       {#each choices as choice, idx}
         {@const checkid = `${path}.${idx}`}
         {@const included = value && value.includes(choice.value)}
         {@const label = choice.label || (typeof choice.value === 'string' ? choice.value : '')}
         <label for={checkid} style:width style:order={orders[idx]}>
-          <Checkbox id={checkid} name={checkid} value={included} {messagesid} {descid} disabled={choice.disabled} onChange={() => onChangeCheckbox(setVal, choice, included)} {onBlur} />
+          <Checkbox id={checkid} name={checkid} value={included} {messagesid} {helptextid} {descid} disabled={choice.disabled} onChange={() => onChangeCheckbox(setVal, choice, included)} {onBlur} />
           <span>{label}</span>
         </label>
       {/each}

package/FieldChoices.svelte.d.ts

@@ -14,6 +14,7 @@ declare const __propDef: {
         conditional?: boolean | undefined;
         maxwidth?: number;
         leftToRight?: boolean;
+        helptext?: string | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/FieldChooserLink.svelte

@@ -7,6 +7,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 = '';
@@ -21,6 +22,7 @@ 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);
@@ -66,14 +68,14 @@ 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>
+  <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>
   {#if urlEntry && !folders && selectedAsset?.type !== 'folder'}
     <input type="text" value={selectedAsset?.url ?? ''} on:change={userUrlEntry}><br>
   {/if}

package/FieldChooserLink.svelte.d.ts

@@ -16,6 +16,7 @@ declare const __propDef: {
         initialType?: ChooserType | undefined;
         initialSource?: string | undefined;
         initialPath?: string | undefined;
+        helptext?: string | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;

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,6 +16,7 @@ declare const __propDef: {
         conditional?: boolean | undefined;
         required?: boolean;
         inputelement?: HTMLInputElement;
+        helptext?: string | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;

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,6 +15,7 @@ declare const __propDef: {
         step?: number | undefined;
         conditional?: boolean | undefined;
         required?: boolean;
+        helptext?: string | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;