@dosgato/dialog 0.0.15 → 0.0.17

package/Checkbox.svelte

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

package/Checkbox.svelte.d.ts

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

package/FieldAutocomplete.svelte

@@ -15,7 +15,7 @@ export let defaultValue = notNull ? choices[0].value : undefined;
 export let conditional = undefined;
 export let required = false;
 export let helptext = '';
-let inputelement;
+export let inputelement = undefined;
 let inputvalue = '';
 let popupvalue = undefined;
 let savedLabel = '';
@@ -58,7 +58,7 @@ function reactToInitialValue(value) {
 
 <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>
   {@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} {onBlur} {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={`${messagesid ?? ''} ${helptext.length ? 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>

package/FieldAutocomplete.svelte.d.ts

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

package/FieldCheckbox.svelte

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

package/FieldCheckbox.svelte.d.ts

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

package/FieldDate.svelte

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

package/FieldDate.svelte.d.ts

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

package/FieldNumber.svelte

@@ -13,8 +13,9 @@ export let max = undefined;
 export let step = undefined;
 export let conditional = undefined;
 export let required = false;
+export let inputelement = 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 type="number" name={path} {value} {id} class="dialog-input {className}" {onChange} {onBlur} {valid} {invalid} {min} {max} {step}></Input>
+  <Input bind:inputelement type="number" name={path} {value} {id} class="dialog-input {className}" {onChange} {onBlur} {valid} {invalid} {min} {max} {step}></Input>
 </FieldStandard>

package/FieldNumber.svelte.d.ts

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

package/FieldSelect.svelte

@@ -12,10 +12,11 @@ export let choices;
 export let defaultValue = notNull ? choices[0].value : undefined;
 export let conditional = undefined;
 export let required = false;
+export let inputelement = 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 {id} name={path} {disabled} class="dialog-input dialog-select {className}" on:change={onChange} on:blur={onBlur} class:valid class:invalid aria-describedby={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}>
     {#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

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

package/FieldText.svelte

@@ -14,8 +14,9 @@ export let maxlength = undefined;
 export let conditional = undefined;
 export let required = false;
 export let use = [];
+export let inputelement = 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 {type} name={path} {value} {id} class="dialog-input {className}" {allowlastpass} {onChange} {onBlur} {valid} {invalid} {maxlength} {messagesid} {use}></Input>
+  <Input bind:inputelement {type} name={path} {value} {id} class="dialog-input {className}" {allowlastpass} {onChange} {onBlur} {valid} {invalid} {maxlength} {messagesid} {use}></Input>
 </FieldStandard>

package/FieldText.svelte.d.ts

@@ -14,6 +14,7 @@ declare const __propDef: {
         conditional?: boolean | undefined;
         required?: boolean;
         use?: HTMLActionEntry[];
+        inputelement?: HTMLInputElement;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/FieldTextArea.svelte

@@ -13,10 +13,11 @@ export let rows = undefined;
 export let conditional = undefined;
 export let required = false;
 export let use = [];
+export let inputelement = 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>
-  <textarea name={path} {value} {id} {rows} class="dialog-input dialog-textarea {className}" class:valid class:invalid aria-invalid={invalid} aria-describedby={messagesid} on:change={onChange} on:blur={onBlur} on:keyup={onChange} on:paste {maxlength} use:passActions={use}></textarea>
+  <textarea bind:this={inputelement} name={path} {value} {id} {rows} class="dialog-input dialog-textarea {className}" class:valid class:invalid aria-invalid={invalid} aria-describedby={messagesid} on:change={onChange} on:blur={onBlur} on:keyup={onChange} on:paste {maxlength} use:passActions={use}></textarea>
 </FieldStandard>
 
 <style>

package/FieldTextArea.svelte.d.ts

@@ -13,6 +13,7 @@ declare const __propDef: {
         conditional?: boolean | undefined;
         required?: boolean;
         use?: HTMLActionEntry[];
+        inputelement?: HTMLTextAreaElement;
     };
     events: {
         paste: ClipboardEvent;

package/Input.svelte

@@ -19,6 +19,7 @@ export let onChange;
 export let onBlur;
 export let onSelect = undefined;
 export let use = [];
+export let inputelement = undefined;
 function resolveMinMax(dt) {
     if (typeof dt === 'undefined')
         return undefined;
@@ -32,4 +33,4 @@ $: minStr = resolveMinMax(min);
 $: maxStr = resolveMinMax(max);
 </script>
 
-<input {type} {id} class={className} autocomplete="off" data-lpignore={!allowlastpass} {name} {value} {disabled} {maxlength} min={minStr} max={maxStr} {step} class:valid class:invalid aria-invalid={invalid} aria-describedby={messagesid} on:change={onChange} on:select={onSelect} on:blur={onBlur} on:keyup={onChange} use:passActions={use}>
+<input bind:this={inputelement} {type} {id} class={className} autocomplete="off" data-lpignore={!allowlastpass} {name} {value} {disabled} {maxlength} min={minStr} max={maxStr} {step} class:valid class:invalid aria-invalid={invalid} aria-describedby={messagesid} on:change={onChange} on:select={onSelect} on:blur={onBlur} on:keyup={onChange} use:passActions={use}>

package/Input.svelte.d.ts

@@ -24,6 +24,7 @@ declare const __propDef: {
         onBlur: any;
         onSelect?: any;
         use?: HTMLActionEntry[];
+        inputelement?: HTMLInputElement;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@dosgato/dialog",
   "description": "A component library for building forms that edit a JSON document.",
-  "version": "0.0.15",
+  "version": "0.0.17",
   "dependencies": {
     "@txstate-mws/svelte-components": "^1.3.0",
     "@txstate-mws/svelte-forms": "^0.0.21",