@dosgato/dialog 1.2.7 → 1.3.0

package/dist/Button.svelte

@@ -1,15 +1,18 @@
-<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 lang="ts">
+  import type { IconifyIcon } from '@iconify/svelte'
+  import Icon from './Icon.svelte'
+
+  export let type: 'button' | 'submit' = 'button'
+  export let disabled = false
+  export let compact = false
+  export let cancel = false
+  export let destructive = false
+  export let secondary = false
+  export let describedby: string | undefined = undefined
+  export let element: HTMLElement | undefined = undefined
+  export let icon: IconifyIcon | undefined = undefined
+  let className: string | undefined = 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" inline /><span><slot /></span></button>
@@ -74,5 +77,4 @@ export { className as class };
     background-color: var(--dg-button-delete-hover-bg, rgb(240, 62, 62));
     color: var(--dg-button-delete-hover-text, white);
   }
-
 </style>

package/dist/ButtonGroup.svelte

@@ -1,44 +1,49 @@
-<script>import { modifierKey } from '@txstate-mws/svelte-components';
-import { createEventDispatcher } from 'svelte';
-export let name = undefined;
-export let choices;
-export let value = choices[0].value;
-export let groupid = undefined;
-export let messagesid = undefined;
-export let ariaControls = undefined;
-export let disabled = false;
-export let valid = false;
-export let invalid = false;
-const dispatch = createEventDispatcher();
-const elements = [];
-function update(newVal) {
-    value = newVal;
-    dispatch('change', value);
-}
-function onClick(choice, idx) {
+<script lang="ts">
+  import { modifierKey, type PopupMenuItem } from '@txstate-mws/svelte-components'
+  import { createEventDispatcher } from 'svelte'
+
+  export let name: string | undefined = undefined
+  export let choices: PopupMenuItem[]
+  export let value = choices[0].value
+  export let groupid: string | undefined = undefined
+  export let messagesid: string | undefined = undefined
+  export let ariaControls: string | undefined = undefined
+  export let disabled = false
+  export let valid = false
+  export let invalid = false
+
+  const dispatch = createEventDispatcher()
+
+  const elements: HTMLElement[] = []
+
+  function update (newVal: string) {
+    value = newVal
+    dispatch('change', value)
+  }
+
+  function onClick (choice: PopupMenuItem, idx: number) {
     return () => {
-        update(choice.value);
-        elements[idx].focus();
-    };
-}
-function onKeyDown(choice, idx) {
+      update(choice.value)
+      elements[idx].focus()
+    }
+  }
+
+  function onKeyDown (choice: PopupMenuItem, idx: number) {
     return e => {
-        if (modifierKey(e))
-            return;
-        if ((e.key === 'ArrowRight' || e.key === 'ArrowDown') && idx < choices.length - 1) {
-            e.preventDefault();
-            e.stopPropagation();
-            update(choices[idx + 1].value);
-            elements[idx + 1].focus();
-        }
-        else if ((e.key === 'ArrowLeft' || e.key === 'ArrowUp') && idx > 0) {
-            e.preventDefault();
-            e.stopPropagation();
-            update(choices[idx - 1].value);
-            elements[idx - 1].focus();
-        }
-    };
-}
+      if (modifierKey(e)) return
+      if ((e.key === 'ArrowRight' || e.key === 'ArrowDown') && idx < choices.length - 1) {
+        e.preventDefault()
+        e.stopPropagation()
+        update(choices[idx + 1].value)
+        elements[idx + 1].focus()
+      } else if ((e.key === 'ArrowLeft' || e.key === 'ArrowUp') && idx > 0) {
+        e.preventDefault()
+        e.stopPropagation()
+        update(choices[idx - 1].value)
+        elements[idx - 1].focus()
+      }
+    }
+  }
 </script>
 
 {#if name}
@@ -72,5 +77,4 @@ function onKeyDown(choice, idx) {
     background-color: var(--dialog-btngrp-active-bg, #333333);
     color: var(--dialog-btngrp-active-text, white);
   }
-
 </style>

package/dist/Checkbox.svelte

@@ -1,14 +1,16 @@
-<script>import { isNotBlank } from 'txstate-utils';
-export let id = undefined;
-export let name;
-export let value;
-export let onChange = undefined;
-export let onBlur = undefined;
-export let descid = undefined;
-export let disabled = false;
-export let valid = false;
-export let invalid = false;
-export let inputelement = undefined;
+<script lang="ts">
+  import { isNotBlank } from 'txstate-utils'
+
+  export let id: string | undefined = undefined
+  export let name: string
+  export let value: boolean
+  export let onChange: any = undefined
+  export let onBlur: any = undefined
+  export let descid: string | undefined = undefined
+  export let disabled = false
+  export let valid = false
+  export let invalid = false
+  export let inputelement: HTMLInputElement = undefined as any
 </script>
 
 <input bind:this={inputelement} {id} type="checkbox" {name} class:valid class:invalid {disabled} aria-describedby={descid} bind:checked={value} on:change={onChange} on:blur={onBlur}>
@@ -64,5 +66,4 @@ input[type="checkbox"]:disabled {
   color: var(--dialog-checkbox-color);
   cursor: not-allowed;
 }
-
 </style>

package/dist/Container.svelte

@@ -2,51 +2,56 @@
   The purpose of `<Container>` is to provide common rendering for helptext, screen reader support,
   and `Feedback` messages for its slotted components under a common `<div>` useful for form fields.
 -->
-<script>import { eq, resize, ScreenReaderOnly } from '@txstate-mws/svelte-components';
-import { randomid } from 'txstate-utils';
-import { getContext, onDestroy } from 'svelte';
-import { DG_DIALOG_FIELD_MULTIPLE } from './FieldMultiple.svelte';
-import InlineMessages from './InlineMessages.svelte';
-import { getDescribedBy, TAB_CONTEXT, TAB_NAME_CONTEXT } from './';
-export let path;
-/** A label for the Container `<div>`. */
-export let label;
-export let messages;
-/** If the input that's being built has an id pass it here so the label can point at it. */
-export let id = undefined;
-/** If `descid` is defined then this assumes you've made an outside label referenced to by descid `<div id={descid}`.
-Useful for things like checkboxes and radio buttons that have their own individual labels. */
-export let descid = undefined;
-export let helptext = undefined;
-/** Syntactic sugar that toggles a '*' to be appended to label. */
-export let required = false;
-export let related = 0;
-export let conditional = undefined;
-/** The `id` of `<div>` messages are rendered in. */
-let messagesid;
-const dgMultipleContext = getContext(DG_DIALOG_FIELD_MULTIPLE);
-const helptextid = randomid();
-$: descids = getDescribedBy([helptext ? helptextid : undefined, dgMultipleContext?.helptextid]);
-let showhelp = false;
-let helpelement;
-let needsShowHelp = false;
-function setNeedsShowHelp(..._) {
-    needsShowHelp = (helpelement?.getClientRects().length ?? 0) > 1;
-    if (!needsShowHelp)
-        showhelp = false;
-}
-$: setNeedsShowHelp(helpelement);
-const tabContext = getContext(TAB_CONTEXT);
-const tabNameStore = getContext(TAB_NAME_CONTEXT);
-$: if (messages.length && messages.some(m => m.type === 'error')) {
-    tabContext?.store.notifyErrorPath($tabNameStore, path);
-}
-else {
-    tabContext?.store.notifyErrorPathGone(path);
-}
-onDestroy(() => {
-    tabContext?.store.notifyErrorPathGone(path);
-});
+<script lang="ts">
+  import type { Feedback } from '@txstate-mws/svelte-forms'
+  import { eq, resize, ScreenReaderOnly } from '@txstate-mws/svelte-components'
+  import { getContext, onDestroy } from 'svelte'
+  import type { Writable } from 'svelte/store'
+  import { randomid } from 'txstate-utils'
+  import { DG_DIALOG_FIELD_MULTIPLE } from './FieldMultiple.svelte'
+  import InlineMessages from './InlineMessages.svelte'
+  import { getDescribedBy, type TabStore, TAB_CONTEXT, TAB_NAME_CONTEXT } from './'
+
+  export let path: string
+  /** A label for the Container `<div>`. */
+  export let label: string
+  export let messages: Feedback[]
+  /** If the input that's being built has an id pass it here so the label can point at it. */
+  export let id: string | undefined = undefined
+  /** If `descid` is defined then this assumes you've made an outside label referenced to by descid `<div id={descid}`.
+  Useful for things like checkboxes and radio buttons that have their own individual labels. */
+  export let descid: string | undefined = undefined
+  export let helptext: string | undefined = undefined
+  /** Syntactic sugar that toggles a '*' to be appended to label. */
+  export let required = false
+  export let related: true | number = 0
+  export let conditional: boolean | undefined = undefined
+  /** The `id` of `<div>` messages are rendered in. */
+  let messagesid: string | undefined
+
+  const dgMultipleContext = getContext<{ helptextid: string | undefined } | undefined>(DG_DIALOG_FIELD_MULTIPLE)
+
+  const helptextid = randomid()
+  $: descids = getDescribedBy([helptext ? helptextid : undefined, dgMultipleContext?.helptextid])
+  let showhelp = false
+  let helpelement: HTMLSpanElement
+  let needsShowHelp = false
+  function setNeedsShowHelp (..._: any[]) {
+    needsShowHelp = (helpelement?.getClientRects().length ?? 0) > 1
+    if (!needsShowHelp) showhelp = false
+  }
+  $: setNeedsShowHelp(helpelement)
+
+  const tabContext = getContext<{ store: TabStore } | undefined>(TAB_CONTEXT)
+  const tabNameStore = getContext<Writable<string> | undefined>(TAB_NAME_CONTEXT)
+  $: if (messages.length && messages.some(m => m.type === 'error')) {
+    tabContext?.store.notifyErrorPath($tabNameStore!, path)
+  } else {
+    tabContext?.store.notifyErrorPathGone(path)
+  }
+  onDestroy(() => {
+    tabContext?.store.notifyErrorPathGone(path)
+  })
 </script>
 
 {#if conditional !== false}
@@ -180,5 +185,4 @@ onDestroy(() => {
   .dialog-field-help-expand:hover {
     text-decoration: none;
   }
-
 </style>

package/dist/Dialog.svelte

@@ -1,41 +1,57 @@
-<script context="module">export const DIALOG_TABS_CONTEXT = {};
+<script context="module" lang="ts">
+  export const DIALOG_TABS_CONTEXT = {}
+  export interface DialogTabContext {
+    change: (..._: any) => void
+    hasTabs?: boolean
+    prevTitle?: string
+    nextTitle?: string
+    hasRequired?: boolean
+    onNext?: () => void
+    onPrev?: () => void
+  }
 </script>
-<script>import arrowLeft from '@iconify-icons/ph/arrow-left-bold';
-import arrowRight from '@iconify-icons/ph/arrow-right-bold';
-import xLight from '@iconify-icons/ph/x-light';
-import arrowsOutSimple from '@iconify-icons/ph/arrows-out-simple';
-import arrowsInSimple from '@iconify-icons/ph/arrows-in-simple';
-import { eq, 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 expandable = false;
-export let disabled = false;
-export let ignoreTabs = 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;
-let expanded = false;
-function onTabChange() {
-    ({ hasTabs, prevTitle, nextTitle, hasRequired, onPrev, onNext } = ctx);
-}
-setContext(DIALOG_TABS_CONTEXT, ctx);
-$: describedby = [title ? labelid : undefined, descid].filter(isNotBlank).join(' ');
+<script lang="ts">
+  import type { IconifyIcon } from '@iconify/svelte'
+  import arrowLeft from '@iconify-icons/ph/arrow-left-bold'
+  import arrowRight from '@iconify-icons/ph/arrow-right-bold'
+  import xLight from '@iconify-icons/ph/x-light'
+  import arrowsOutSimple from '@iconify-icons/ph/arrows-out-simple'
+  import arrowsInSimple from '@iconify-icons/ph/arrows-in-simple'
+  import { eq, 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: string | undefined = undefined
+  export let title = ''
+  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 continueIcon: IconifyIcon | undefined = undefined
+  export let escapable = isNotBlank(cancelText)
+  export let expandable: boolean = false
+  export let disabled = false
+  export let ignoreTabs = false
+
+  export let labelid = randomid()
+  export let descid = randomid()
+
+  const ctx: DialogTabContext = { change: onTabChange }
+  let hasTabs: boolean | undefined = false
+  let prevTitle: string | undefined
+  let nextTitle: string | undefined
+  let hasRequired: boolean | undefined = false
+  let onPrev: (() => void) | undefined
+  let onNext: (() => void) | undefined
+  let expanded: boolean = false
+  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} includeselector=".ck-body-wrapper" on:escape>
@@ -59,7 +75,7 @@ $: describedby = [title ? labelid : undefined, descid].filter(isNotBlank).join('
     <footer class="actions">
       <slot name="buttons" {nextTitle} {prevTitle} hasRequired={hasRequired && !ignoreTabs} onPrev={onPrev} onNext={onNext} {describedby}>
         {#if prevTitle && !ignoreTabs}
-          <Button class="prev" disabled={!prevTitle} on:click={onPrev}><Icon icon={arrowLeft} inline /> <span class="prev-next" aria-hidden="true">Previous</span><ScreenReaderOnly>Previous Tab ({prevTitle})</ScreenReaderOnly></Button>
+          <Button class="prev" disabled={!prevTitle} on:click={() => onPrev?.()}><Icon icon={arrowLeft} inline /> <span class="prev-next" aria-hidden="true">Previous</span><ScreenReaderOnly>Previous Tab ({prevTitle})</ScreenReaderOnly></Button>
         {/if}
         {#if isNotBlank(cancelText)}
           <Button cancel {describedby} on:click={() => dispatch('escape')}>{cancelText}</Button>
@@ -68,7 +84,7 @@ $: describedby = [title ? labelid : undefined, descid].filter(isNotBlank).join('
           <Button class="primary" disabled={disabled || (hasRequired && !ignoreTabs)} {describedby} on:click={() => dispatch('continue')}><Icon icon={continueIcon} inline /> {continueText}</Button>
         {/if}
         {#if nextTitle && !ignoreTabs}
-          <Button class="next" disabled={!nextTitle} on:click={onNext}><span class="prev-next" aria-hidden="true">Next</span><ScreenReaderOnly> Next Tab ({nextTitle})</ScreenReaderOnly> <Icon icon={arrowRight} inline /></Button>
+          <Button class="next" disabled={!nextTitle} on:click={() => onNext?.()}><span class="prev-next" aria-hidden="true">Next</span><ScreenReaderOnly> Next Tab ({nextTitle})</ScreenReaderOnly> <Icon icon={arrowRight} inline /></Button>
         {/if}
       </slot>
     </footer>
@@ -169,7 +185,7 @@ $: describedby = [title ? labelid : undefined, descid].filter(isNotBlank).join('
     margin-right: 0.5em;
   }
 
-  :global(.dialog-field-container) {
+  .dialog-content :global(.dialog-field-container) {
     background-color: transparent !important;
     border-bottom: 0px !important;
   }
@@ -197,5 +213,4 @@ $: describedby = [title ? labelid : undefined, descid].filter(isNotBlank).join('
     background: none;
     cursor: pointer;
   }
-
 </style>

package/dist/FieldAutocomplete.svelte

@@ -1,78 +1,85 @@
-<script>import { nullableSerialize, nullableDeserialize } from '@txstate-mws/svelte-forms';
-import FieldStandard from './FieldStandard.svelte';
-import { isBlank, isNotBlank, randomid } from 'txstate-utils';
-import { modifierKey, PopupMenu, ScreenReaderOnly } from '@txstate-mws/svelte-components';
-import { getDescribedBy } from './';
-import { onMount } from 'svelte';
-export let id = undefined;
-export let path;
-export let label = '';
-export let placeholder = 'Select' + (label ? ' ' + label : '');
-let className = '';
-export { className as class };
-export let notNull = false;
-export let disabled = false;
-export let choices;
-export let defaultValue = undefined;
-export let conditional = undefined;
-export let required = false;
-export let inputelement = undefined;
-export let related = 0;
-export let extradescid = undefined;
-export let helptext = undefined;
-let inputvalue = '';
-let popupvalue = undefined;
-let menuid;
-const liveTextId = randomid();
-$: finalserialize = !notNull ? nullableSerialize : v => v;
-$: finaldeserialize = !notNull ? nullableDeserialize : v => v;
-$: 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) => {
-    return item.label?.toLowerCase().includes(inputvalue.toLowerCase()) || item.value.toLowerCase().includes(inputvalue.toLowerCase());
-});
-let menushown = false;
-let savedVal = defaultValue;
-function onKeyUp(setVal) {
+<script lang="ts">
+  import { modifierKey, PopupMenu, ScreenReaderOnly, type PopupMenuItem } from '@txstate-mws/svelte-components'
+  import { nullableSerialize, nullableDeserialize } from '@txstate-mws/svelte-forms'
+  import { isBlank, isNotBlank, randomid } from 'txstate-utils'
+  import { getDescribedBy } from './'
+  import FieldStandard from './FieldStandard.svelte'
+
+  export let id: string | undefined = undefined
+  export let path: string
+  export let label: string = ''
+  export let placeholder: string = 'Select' + (label ? ' ' + label : '')
+  let className = ''
+  export { className as class }
+  export let notNull = false
+  export let disabled = false
+  export let choices: { label?: string, value: string, disabled?: boolean }[]
+  export let defaultValue: string | undefined = undefined
+  export let conditional: boolean | undefined = undefined
+  export let required = false
+  export let inputelement: HTMLInputElement = undefined as any
+  export let related: true | number = 0
+  export let extradescid: string | undefined = undefined
+  export let helptext: string | undefined = undefined
+
+  let inputvalue = ''
+  let popupvalue = undefined
+  let menuid: string
+
+  const liveTextId = randomid()
+  $: finalserialize = !notNull ? nullableSerialize : v => v
+  $: finaldeserialize = !notNull ? nullableDeserialize : v => v
+
+  $: 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())
+  })
+
+  let menushown = false
+  let savedVal = defaultValue
+  function onKeyUp (setVal: any) {
     return (e) => {
-        if (!modifierKey(e)) {
-            const val = labelToValue[inputvalue.trim()];
-            menushown = !val;
-            // we need to make sure the form state stays up to date with what's shown in the text field
-            // if the text field has only a substring of a valid label the form state value should remain
-            // empty, but once the text field has a valid label the form state should be updated
-            if (savedVal !== val) {
-                savedVal = val;
-                setVal(val);
-            }
+      if (!modifierKey(e)) {
+        const val = labelToValue[inputvalue.trim()]
+        menushown = !val
+        // we need to make sure the form state stays up to date with what's shown in the text field
+        // if the text field has only a substring of a valid label the form state value should remain
+        // empty, but once the text field has a valid label the form state should be updated
+        if (savedVal !== val) {
+          savedVal = val
+          setVal(val)
         }
-    };
-}
-function onchangepopup(setVal) {
+      }
+    }
+  }
+
+  function onchangepopup (setVal: any) {
     return (e) => {
-        inputvalue = e.detail.label || e.detail.value;
-        popupvalue = undefined;
-        savedVal = e.detail.value;
-        setVal(e.detail.value);
-    };
-}
-function reactToValue(value, setVal) {
-    const dsvalue = finaldeserialize(value);
+      inputvalue = e.detail.label || e.detail.value
+      popupvalue = undefined
+      savedVal = e.detail.value
+      setVal(e.detail.value)
+    }
+  }
+
+  function reactToValue (value: string, setVal: any) {
+    const dsvalue = finaldeserialize(value)
     if (dsvalue !== savedVal) {
-        const label = valueToLabel[dsvalue];
-        // if the form state value changes from the outside we need to replace the text field content
-        // with the new label
-        // if the new form state value is undefined, we should let them keep any half-finished typing they
-        // might have in the field, but if they have a fully valid entry in the field, it needs to disappear
-        // to reflect the new reality that the form value has gone away
-        if (label != null || (savedVal && valueToLabel[savedVal]))
-            inputvalue = label ?? '';
-        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(''));
+      const label = valueToLabel[dsvalue]
+
+      // if the form state value changes from the outside we need to replace the text field content
+      // with the new label
+      // if the new form state value is undefined, we should let them keep any half-finished typing they
+      // might have in the field, but if they have a fully valid entry in the field, it needs to disappear
+      // to reflect the new reality that the form value has gone away
+      if (label != null || (savedVal && valueToLabel[savedVal])) inputvalue = label ?? ''
+
+      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(''))
     }
-}
+  }
 </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>

package/dist/FieldCheckbox.svelte

@@ -1,26 +1,29 @@
-<script>import { randomid } from 'txstate-utils';
-import FieldStandard from './FieldStandard.svelte';
-import Checkbox from './Checkbox.svelte';
-import { getDescribedBy } from './';
-let className = '';
-export { className as class };
-export let id = undefined;
-export let path;
-export let label = '';
-export let boxLabel;
-export let defaultValue = undefined;
-export let conditional = undefined;
-export let required = false;
-export let inputelement = undefined;
-export let related = 0;
-export let extradescid = undefined;
-export let helptext = undefined;
-function onChange(setVal) {
+<script lang="ts">
+  import { randomid } from 'txstate-utils'
+  import FieldStandard from './FieldStandard.svelte'
+  import Checkbox from './Checkbox.svelte'
+  import { getDescribedBy } from './'
+  let className = ''
+  export { className as class }
+  export let id: string | undefined = undefined
+  export let path: string
+  export let label: string = ''
+  export let boxLabel: string
+  export let defaultValue: boolean | undefined = undefined
+  export let conditional: boolean | undefined = undefined
+  export let required = false
+  export let inputelement: HTMLInputElement = undefined as any
+  export let related: true | number = 0
+  export let extradescid: string | undefined = undefined
+  export let helptext: string | undefined = undefined
+
+  function onChange (setVal: (val: any) => void) {
     return function () {
-        setVal(this.checked);
-    };
-}
-const descid = randomid();
+      setVal(this.checked)
+    }
+  }
+
+  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>