@dosgato/dialog 1.0.7 → 1.1.0

package/dist/Container.svelte

@@ -47,6 +47,7 @@ $: setNeedsShowHelp(helpelement);
   <div class="dialog-field-content">
     {#if helptext}
       <!-- svelte-ignore a11y-click-events-have-key-events -->
+      <!-- svelte-ignore a11y-no-static-element-interactions -->
       <div use:resize={{ debounce: 10 }} on:resize={setNeedsShowHelp} id={helptextid} class="dialog-field-help" class:needsShowHelp class:expanded={showhelp} on:click={() => { if (needsShowHelp) showhelp = !showhelp }}>
         <span bind:this={helpelement}>{@html helptext}</span>
         {#if needsShowHelp}
@@ -69,6 +70,7 @@ $: setNeedsShowHelp(helpelement);
   .dialog-field-container[data-related~="1"] {
     padding-top: 0;
     padding-left: calc(var(--dialog-container-padding, 1em) + var(--dialog-related-padding, 1em));
+    margin-top: -0.5em;
   }
   .dialog-field-container[data-related~="2"] {
     padding-left: calc(var(--dialog-container-padding, 1em) + (2 * var(--dialog-related-padding, 1em)));

package/dist/Dialog.svelte

@@ -130,6 +130,10 @@ $: describedby = [title ? labelid : undefined, descid].filter(isNotBlank).join('
     margin-right: 0.4em;
   }
 
+  .header-buttons button {
+    color: black;
+  }
+
   .dialog-content {
     position: relative;
     padding: 2em;

package/dist/FieldChoices.svelte

@@ -69,7 +69,7 @@ onMount(reactToChoices);
     <div class="dialog-choices {className}" class:valid class:invalid>
       {#each choices as choice, idx (choice.value)}
         {@const checkid = `${path}.${idx}`}
-        {@const included = value && value.includes(choice.value)}
+        {@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]}>
           <Checkbox id={checkid} name={checkid} value={included} descid={getDescribedBy([descid, messagesid, helptextid, extradescid])} disabled={choice.disabled} onChange={() => onChangeCheckbox(setVal, choice, included)} {onBlur} />

package/dist/FieldChooserLink.svelte

@@ -66,7 +66,7 @@ async function userUrlEntryDebounced() {
     store.clearPreview();
     if (isBlank(url)) {
         selectedAsset = undefined;
-        formStore.setField(finalPath, undefined);
+        void formStore.setField(finalPath, undefined);
         return;
     }
     let found = false;
@@ -117,7 +117,7 @@ async function userUrlEntryDebounced() {
             }
         }
     }
-    formStore.setField(finalPath, selectedAsset?.id);
+    void formStore.setField(finalPath, selectedAsset?.id);
     formStore.dirtyField(finalPath);
 }
 const urlToValueCache = {};
@@ -159,7 +159,7 @@ async function updateSelected(..._) {
         }
     }
 }
-$: updateSelected($value);
+$: void updateSelected($value);
 </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>
@@ -243,6 +243,11 @@ $: updateSelected($value);
     align-items: flex-start;
     margin-top: 0.2em;
   }
+  .dialog-chooser-entry > button {
+    border-radius: 0.25em;
+    border: 1px solid #808080;
+    color: black;
+  }
   .dialog-chooser-entry-input {
     position: relative;
     flex-grow: 1;
@@ -261,6 +266,7 @@ $: updateSelected($value);
     transform: translateY(-50%);
     cursor: pointer;
     line-height: 1;
+    color: black;
   }
   :global([data-eq~="400px"] .dialog-chooser-container .dialog-chooser-thumbnail img) {
     object-position: left;

package/dist/FieldDateTime.svelte

@@ -15,8 +15,24 @@ export let required = false;
 export let related = 0;
 export let extradescid = undefined;
 export let helptext = undefined;
+export let inputelement = undefined;
+let showBadInputMessage = false;
+function wrapOnBlur(onBlur) {
+    const date = new Date(inputelement.value);
+    showBadInputMessage = inputelement.validity.badInput || !(date instanceof Date && !isNaN(date.valueOf()));
+    onBlur();
+}
 </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:onChange let:helptextid let:messagesid>
-  <Input type="datetime-local" name={path} {value} {id} class="dialog-input {className}" {onChange} {onBlur} {valid} {invalid} {min} {max} {step} {extradescid} {messagesid} {helptextid}/>
+  {#if showBadInputMessage}<div class="bad-input-warning" aria-live='polite'>{`Field ${label}`} must include both a date and time</div>{/if}
+  <Input bind:inputelement={inputelement} type="datetime-local" name={path} {value} {id} class="dialog-input {className}" onBlur={() => { wrapOnBlur(onBlur) }} {onChange} {valid} {invalid} {min} {max} {step} {extradescid} {messagesid} {helptextid}/>
 </FieldStandard>
+
+<style>
+  .bad-input-warning {
+    margin-bottom: 0.3em;
+    color: var(--dg-danger-bg, #9a3332);
+  }
+
+</style>

package/dist/FieldDateTime.svelte.d.ts

@@ -18,6 +18,7 @@ declare const __propDef: {
         related?: number | true | undefined;
         extradescid?: string | undefined;
         helptext?: string | undefined;
+        inputelement?: HTMLInputElement | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/dist/FieldDualListbox.svelte

@@ -62,7 +62,7 @@ function valueToSelectedChoices(value) {
     return ret;
 }
 function getAvailable(value) {
-    return choices.filter(choice => value.indexOf(choice.value) === -1);
+    return choices.filter(choice => !value.includes(choice.value));
 }
 function onkeydown(value, setVal) {
     return (e) => {
@@ -85,6 +85,7 @@ function onkeydown(value, setVal) {
 </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}>
+  <!-- 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>

package/dist/FieldHidden.svelte

@@ -1,4 +1,4 @@
-<script>import { Field, nullableSerialize, nullableDeserialize, FormStore, FORM_CONTEXT, FORM_INHERITED_PATH } from '@txstate-mws/svelte-forms';
+<script>import { Field, nullableSerialize, nullableDeserialize, FORM_CONTEXT, FORM_INHERITED_PATH } from '@txstate-mws/svelte-forms';
 import { getContext } from 'svelte';
 import { isNotBlank } from 'txstate-utils';
 export let id = undefined;
@@ -11,7 +11,7 @@ export let conditional = undefined;
 const store = getContext(FORM_CONTEXT);
 const inheritedPath = getContext(FORM_INHERITED_PATH);
 const finalPath = [inheritedPath, path].filter(isNotBlank).join('.');
-$: store.setField(finalPath, value);
+$: void store.setField(finalPath, value);
 </script>
 
 <Field {path} {conditional} {boolean} {number} serialize={!notNull ? nullableSerialize : undefined} deserialize={!notNull ? nullableDeserialize : undefined} let:value>

package/dist/FieldMultiple.svelte

@@ -111,6 +111,10 @@ $: messages = compact ? $messageStore : [];
     padding: 0.15em;
     cursor: pointer;
     font-size: 1.3em;
+    color: black;
+  }
+  .dialog-multiple-buttons button:disabled {
+    color: #6d6d6d;
   }
 
 </style>

package/dist/FieldSelect.svelte

@@ -53,3 +53,10 @@ onMount(reactToChoices);
     {/each}
   </select>
 </FieldStandard>
+
+<style>
+  select {
+    color: black;
+  }
+
+</style>

package/dist/Form.svelte

@@ -1,4 +1,4 @@
-<script>import { Form, FormStore } from '@txstate-mws/svelte-forms';
+<script>import { Form } from '@txstate-mws/svelte-forms';
 import { setContext } from 'svelte';
 import { CHOOSER_API_CONTEXT } from './chooser';
 let className = '';

package/dist/Listbox.svelte

@@ -26,7 +26,7 @@ async function reactToItems(..._) {
     if (listboxElement)
         listboxElement.removeAttribute('aria-activedescendant');
 }
-$: reactToItems(items);
+$: void reactToItems(items);
 const selectItem = (item, index) => (e) => {
     e.stopPropagation();
     e.preventDefault();

package/dist/MaxLength.svelte

@@ -33,4 +33,4 @@ function getMaxlengthMessage(length) {
     font-weight: bold;
   }
 
-</style>
+</style>

package/dist/Tab.svelte

@@ -1,7 +1,7 @@
 <script>import { derivedStore } from '@txstate-mws/svelte-store';
 import { getContext } from 'svelte';
 import Icon from './Icon.svelte';
-import { TabStore, TAB_CONTEXT } from './TabStore';
+import { TAB_CONTEXT } from './TabStore';
 export let name;
 const { store, onClick, onKeyDown, tabelements } = getContext(TAB_CONTEXT);
 const accordion = store.accordion();

package/dist/Tabs.svelte

@@ -1,10 +1,11 @@
-<script>import { modifierKey, resize, offset } from '@txstate-mws/svelte-components';
+<script>import { modifierKey, resize, offset, PopupMenu } from '@txstate-mws/svelte-components';
 import { Store } from '@txstate-mws/svelte-store';
-import { getContext, onMount, setContext } from 'svelte';
+import { getContext, onMount, setContext, tick } from 'svelte';
 import { roundTo } from 'txstate-utils';
 import { DIALOG_TABS_CONTEXT } from './Dialog.svelte';
 import Icon from './Icon.svelte';
 import { TabStore, TAB_CONTEXT } from './TabStore';
+import caretRightFill from '@iconify-icons/ph/caret-right-fill';
 export let tabs;
 export let active = undefined;
 export let store = new TabStore(tabs, active);
@@ -13,7 +14,9 @@ export let accordionOnMobile = true;
 $: store.update(v => ({ ...v, tabs, accordionOnMobile }));
 const activeStore = new Store({});
 const tabelements = [];
+let tabOverflowButton;
 let activeelement;
+let hiddenTabs = [];
 setContext(TAB_CONTEXT, { store, onClick, onKeyDown, tabelements });
 const dialogContext = (disableDialogControl ? undefined : getContext(DIALOG_TABS_CONTEXT)) ?? { change: () => { } };
 dialogContext.onNext = () => { store.right(); };
@@ -47,18 +50,22 @@ function onKeyDown(idx) {
         }
         else if (e.key === 'ArrowLeft' && $store.current > 0) {
             store.left();
+            await tick();
             tabelements[$store.current].focus();
         }
         else if (e.key === 'ArrowRight' && $store.current < $store.tabs.length - 1) {
             store.right();
+            await tick();
             tabelements[$store.current].focus();
         }
         else if (e.key === 'Home' && $store.current > 0) {
             store.home();
+            await tick();
             tabelements[$store.current].focus();
         }
         else if (e.key === 'End' && $store.current < $store.tabs.length - 1) {
             store.end();
+            await tick();
             tabelements[$store.current].focus();
         }
     };
@@ -66,6 +73,17 @@ function onKeyDown(idx) {
 function isActive(idx, activeidx) {
     return idx === (activeidx ?? 0);
 }
+function onOverflowChange(e) {
+    store.activateName(e.detail.value);
+}
+function tabIsHidden(index) {
+    if (!wrapping)
+        return false;
+    const left = Math.max($currentIdx - cols + 1, 0);
+    const right = Math.min(left + cols - 1);
+    // return (index !== $currentIdx && index >= cols) || (index === cols - 1 && $currentIdx > cols - 1)
+    return (index !== $currentIdx) && ((index < left) || (index > right));
+}
 const activeOversize = 2;
 async function reactToCurrent(..._) {
     if (!activeelement)
@@ -80,9 +98,10 @@ async function reactToCurrent(..._) {
     const width = span.offsetWidth + (activeOversize * 2);
     activeelement.style.transform = `translateX(${left}px)`;
     activeelement.style.width = `${width}px`;
+    hiddenTabs = $store.tabs.filter((tab, idx) => { return tabIsHidden(idx); });
 }
 $: active = $currentName;
-$: reactToCurrent($activeStore);
+$: void reactToCurrent($activeStore);
 onMount(reactToCurrent);
 </script>
 
@@ -92,9 +111,13 @@ onMount(reactToCurrent);
     <ul use:resize={{ store }} class="tabs-buttons" role="tablist">
       {#each $store.tabs as tab, idx (tab.name)}
         {@const active = isActive(idx, $store.current)}
-        {@const left = idx % cols === 0}
-        <li bind:this={tabelements[idx]} use:offset={{ store: active ? activeStore : undefined }} id={$store.tabids[tab.name]} class="tabs-tab" class:left class:wrapping class:active style:font-size="{scalefactor}em" style:line-height={1.2 / scalefactor} aria-selected={active} aria-controls={$store.panelids[tab.name]} role="tab" tabindex={active ? 0 : -1} on:click={onClick(idx)} on:keydown={onKeyDown(idx)}><span><Icon icon={tab.icon} inline />{tab.title}</span></li>
+        {@const left = idx === 0}
+        <li bind:this={tabelements[idx]} use:offset={{ store: active ? activeStore : undefined }} id={$store.tabids[tab.name]} class="tabs-tab" class:left class:wrapping class:active class:hidden={tabIsHidden(idx)} style:font-size="{scalefactor}em" style:line-height={1.2 / scalefactor} aria-selected={active} aria-controls={$store.panelids[tab.name]} role="tab" tabindex={active ? 0 : -1} on:click={onClick(idx)} on:keydown={onKeyDown(idx)}><span><Icon icon={tab.icon} inline />{tab.title}</span></li>
       {/each}
+      {#if cols < $store.tabs.length}
+        <li class="overflow" role="presentation"><button bind:this={tabOverflowButton} type="button" tabindex="-1"><Icon icon={caretRightFill} hiddenLabel="More Tabs Menu" inline /></button></li>
+        <PopupMenu buttonelement={tabOverflowButton} items={hiddenTabs.map(t => ({ value: t.name }))} on:change={onOverflowChange}/>
+      {/if}
     </ul>
     <div bind:this={activeelement} class="tabs-active"></div>
     <slot current={$store.current} />
@@ -135,6 +158,22 @@ onMount(reactToCurrent);
     font-weight: 500;
     color: var(--tabs-text, #363534)
   }
+  :global(.tabs-tab.hidden) {
+    display: none;
+  }
+  li.overflow {
+    min-width: 2em;
+    display: flex;
+    align-items: center;
+    background-color: transparent !important;
+    padding: 0;
+  }
+  li.overflow button {
+    background: none;
+    cursor: pointer;
+    border: 0;
+    color: black;
+  }
   li:not(.left) {
     margin-left: -1px;
   }
@@ -158,20 +197,4 @@ onMount(reactToCurrent);
     border-radius: 2px;
   }
 
-  /* .tabs-active {
-    background: var(--dg-tabs-active, var(--dg-button-bg, #501214));
-    height: 3px;
-    border-radius: 2px;
-    overflow: hidden;
-    width: 0px;
-    margin-top: calc(-1 * var(--tabs-padding-vert, 0.7em));
-    margin-bottom: var(--tabs-padding-vert, 0.7em);
-    transition: 0.2s transform;
-  }
-  @media (prefers-reduced-motion) {
-    .tabs-active {
-      transition: none;
-    }
-  } */
-
 </style>

package/dist/chooser/ChooserPreview.svelte

@@ -142,4 +142,4 @@ $: reactToPreview($preview);
     }
   }
 
-</style>
+</style>

package/dist/colorpicker/FieldColorPicker.svelte

@@ -33,7 +33,7 @@ onMount(reactToOptions);
 </script>
 
 <FieldStandard bind:id descid={groupid} {path} {label} {required} {defaultValue} {conditional} {helptext} let:value let:valid let:invalid let:onBlur let:onChange let:messagesid let:helptextid let:setVal>
-  {@const _ = updateValue(value, setVal)}
+  {@const _ = void updateValue(value, setVal)}
   <div class="container-query-wrapper">
     <div class="color-container {className}" role="radiogroup" aria-labelledby={groupid} class:invalid class:valid>
       {#if addAllOption}

package/dist/cropper/FieldCropper.svelte

@@ -112,6 +112,7 @@ let focusWithin = false;
   {@const _ = init(value, setVal)}
   {#if isNotBlank(imageSrc)}
     <div on:focusin={() => { focusWithin = true }} on:focusout={() => { focusWithin = false }}>
+      <!-- svelte-ignore a11y-no-static-element-interactions -->
       <div bind:this={container} use:resize on:resize={() => updateRect()} class="crop-image-container" on:mousedown={onMouseDown} on:touchstart={onMouseDown} on:touchmove={onMouseMove} style:cursor={$store.cursor}>
         <img class="crop-image" src={imageSrc} alt="" />
         {#if $selection && $outputPct}
@@ -119,6 +120,7 @@ let focusWithin = false;
             <img class='crop-image clipped' src={imageSrc} alt="" style:clip-path="polygon({$outputPct.left}% {$outputPct.top}%, {100 - $outputPct.right}% {$outputPct.top}%, {100 - $outputPct.right}% {100 - $outputPct.bottom}%, {$outputPct.left}% {100 - $outputPct.bottom}%, {$outputPct.left}% {$outputPct.top}%)" />
           </div>
           <!-- svelte-ignore a11y-no-noninteractive-tabindex -->
+          <!-- svelte-ignore a11y-no-static-element-interactions -->
           <div class='selectionHilite' {id} tabindex="0" on:keydown={onKeyDown('move')}
             aria-labelledby={descid}
             aria-describedby="{movedescid} {helptextid ?? ''}"
@@ -132,24 +134,28 @@ let focusWithin = false;
               <ScreenReaderOnly arialive="polite">top left x y coordinate is ({Math.round($selection.left)}, {Math.round($selection.top)}) bottom right x y coordinate is ({Math.round($selection.right)}, {Math.round($selection.bottom)})</ScreenReaderOnly>
               <ScreenReaderOnly arialive="polite">crop area is {Math.round($store.width)} pixels wide by {Math.round($store.height)} pixels tall</ScreenReaderOnly>
             {/if}
+            <!-- svelte-ignore a11y-no-static-element-interactions -->
             <div class='selectionCorner tl'
               tabindex="0"
               on:keydown={onKeyDown('tl')}
             >
               <ScreenReaderOnly>arrows adjust crop size, bottom right is fixed, hold shift and/or cmd/alt for bigger steps</ScreenReaderOnly>
             </div>
+            <!-- svelte-ignore a11y-no-static-element-interactions -->
             <div class='selectionCorner tr'
               tabindex="0"
               on:keydown={onKeyDown('tr')}
             >
               <ScreenReaderOnly>arrows adjust crop size, bottom left is fixed, hold shift and/or cmd/alt for bigger steps</ScreenReaderOnly>
             </div>
+            <!-- svelte-ignore a11y-no-static-element-interactions -->
             <div class='selectionCorner bl'
               tabindex="0"
               on:keydown={onKeyDown('bl')}
             >
               <ScreenReaderOnly>arrows adjust crop size, top right is fixed, hold shift and/or cmd/alt for bigger steps</ScreenReaderOnly>
             </div>
+            <!-- svelte-ignore a11y-no-static-element-interactions -->
             <div class='selectionCorner br'
               tabindex="0"
               on:keydown={onKeyDown('br')}

package/dist/iconpicker/FieldIconPicker.svelte

@@ -18,7 +18,7 @@ let selected = defaultValue;
 const iconToPrefix = {};
 const categoriesToIcons = keyby(IconCategories, 'key');
 for (const icon of FontAwesomeIcons) {
-    iconToPrefix[icon.class] = icon.free.indexOf('brands') > -1 ? 'fab' : 'fas';
+    iconToPrefix[icon.class] = icon.free.includes('brands') ? 'fab' : 'fas';
 }
 const iconElements = [];
 let visibleIcons = FontAwesomeIcons;
@@ -104,8 +104,8 @@ function onKeyDown(e) {
 </script>
 
 <FieldStandard bind:id {path} {descid} {label} {required} {defaultValue} {conditional} {helptext} let:value let:valid let:invalid let:id let:onBlur let:setVal let:messagesid let:helptextid>
-  <Icon icon={`${value.prefix === 'fab' ? 'fa-brands' : 'fa-solid'}:${value.icon?.slice(3) ?? 'graduation-cap'}`}/>
-  <button type="button" id="btnSelectIcon" on:click={() => { modalOpen = true }} aria-describedby={getDescribedBy([descid, messagesid, helptextid])}>Select New Icon</button>
+  <Icon icon={`${value.prefix === 'fab' ? 'fa6-brands' : 'fa6-solid'}:${value.icon?.slice(3) ?? 'graduation-cap'}`}/>
+  <button type="button" id="btnSelectIcon" class="select-icon" on:click={() => { modalOpen = true }} aria-describedby={getDescribedBy([descid, messagesid, helptextid])}>Select New Icon</button>
   {#if modalOpen}
   <Modal>
     <section>
@@ -130,8 +130,9 @@ function onKeyDown(e) {
             <ScreenReaderOnly><legend class="sr-only">Icons</legend></ScreenReaderOnly>
             <div class="icon-picker-items" role="radiogroup">
               {#each visibleIcons as icon, idx (icon.class)}
-                <div bind:this={iconElements[idx]} id={icon.class} class="icon-picker-item" role="radio" aria-checked={icon.class === selected.icon} tabindex={icon.class === selected.icon ? 0 : -1} data-index={idx} on:click={() => onSelectIcon(icon.class)}  on:keydown={onKeyDown}>
-                  <Icon icon={`${iconToPrefix[icon.class] === 'fab' ? 'fa-brands' : 'fa-solid'}:${icon.class.slice(3)}`}/>
+
+                <div bind:this={iconElements[idx]} id={icon.class} class="icon-picker-item" role="radio" aria-checked={icon.class === selected.icon} tabindex={icon.class === selected.icon ? 0 : -1} data-index={idx} on:click={() => onSelectIcon(icon.class)} on:keydown={onKeyDown}>
+                  <Icon icon={`${iconToPrefix[icon.class] === 'fab' ? 'fa6-brands' : 'fa6-solid'}:${icon.class.slice(3)}`}/>
                   <ScreenReaderOnly>{icon.label}</ScreenReaderOnly>
                 </div>
               {:else}
@@ -153,6 +154,11 @@ function onKeyDown(e) {
 
 
 <style>
+  .select-icon {
+    border-radius: 0.25em;
+    border: 1px solid #808080;
+    color: black;
+  }
   section {
     position: relative;
     background-color: #f4f4f4;