@dosgato/dialog 0.0.7 → 0.0.10

package/FieldAutocomplete.svelte

@@ -50,8 +50,8 @@ async function checkifchanged(e) {
 }
 </script>
 
-<FieldStandard bind:id {label} {path} {required} {defaultValue} {conditional} serialize={!notNull && nullableSerialize} deserialize={!notNull && nullableDeserialize} let:setVal let:valid let:invalid let:id let:onBlur let:onChange>
-  <input bind:this={inputelement} bind:value={inputvalue} {id} {placeholder} class="dialog-input {className}" class:valid class:invalid aria-invalid={invalid} {onBlur} {onChange} aria-owns={listId} autocapitalize="none" type="text" autocomplete="off"  aria-autocomplete="list" role="combobox" aria-expanded="false" {disabled} aria-describedby={helptext.length ? helpTextId : ''} on:keydown={checkifchanged}>
+<FieldStandard bind:id {label} {path} {required} {defaultValue} {conditional} serialize={!notNull && nullableSerialize} deserialize={!notNull && nullableDeserialize} let:setVal let:valid let:invalid let:id let:onBlur let:onChange let:messagesid>
+  <input bind:this={inputelement} bind:value={inputvalue} {id} {placeholder} class="dialog-input {className}" class:valid class:invalid aria-invalid={invalid} {onBlur} {onChange} aria-owns={listId} autocapitalize="none" type="text" autocomplete="off"  aria-autocomplete="list" role="combobox" aria-expanded="false" {disabled} aria-describedby={`${messagesid ?? ''} ${helptext.length ? helpTextId : ''}`} on:keydown={checkifchanged}>
   <PopupMenu 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>
@@ -59,4 +59,4 @@ async function checkifchanged(e) {
   <ScreenReaderOnly arialive="polite" ariaatomic={true} id={liveTextId}>
     {filteredChoices.length} {filteredChoices.length === 1 ? 'option' : 'options'} available.
   </ScreenReaderOnly>
-</FieldStandard>
+</FieldStandard>

package/FieldAutocomplete.svelte.d.ts

@@ -10,7 +10,7 @@ declare const __propDef: {
         disabled?: boolean;
         choices: {
             label?: string;
-            value: any;
+            value: string;
             disabled?: boolean;
         }[];
         defaultValue?: any;

package/FieldDate.svelte

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

package/FieldDualListbox.svelte

@@ -15,8 +15,8 @@ export let choices;
 export let defaultValue = [];
 export let conditional = undefined;
 export let required = false;
-let itemsToAdd = []; //the items selected in the left listbox
-let itemsToRemove = []; //the items selected in the right listbox
+let itemsToAdd = []; // the items selected in the left listbox
+let itemsToRemove = []; // the items selected in the right listbox
 let instructions = 'test';
 $: {
     if (itemsToAdd.length === 1)
@@ -46,10 +46,6 @@ function addToAvailable(value, setVal) {
         setVal(selected);
     };
 }
-let valueToLabel = {};
-for (const choice of choices) {
-    valueToLabel[choice.value] = choice.label || choice.value;
-}
 function valueToSelectedChoices(value) {
     // keep the selected options ordered as they were in the available options
     const valueSet = new Set(value);
@@ -88,7 +84,7 @@ function onkeydown(value, setVal) {
     <ScreenReaderOnly>
       <span aria-live="polite">{instructions}</span>
     </ScreenReaderOnly>
-    <Listbox label={sourceLabel} multiselect={multiselect} items={getAvailable(value)} {descid} {valid} {invalid} on:change={e => itemsToAdd = e.detail} selected={itemsToAdd} on:blur={onBlur}/>
+    <Listbox label={sourceLabel} multiselect={multiselect} items={getAvailable(value)} {descid} {valid} {invalid} on:change={e => { itemsToAdd = e.detail }} selected={itemsToAdd} on:blur={onBlur}/>
     <div class="toolbar">
       <button type="button" class="toolbar-button" title="Move selection to {selectedLabel}" disabled={itemsToAdd.length === 0} on:click={addToSelected(value, setVal)}>
         <Icon icon={menuRight} width='3em'/>
@@ -97,7 +93,7 @@ function onkeydown(value, setVal) {
         <Icon icon={menuLeft} width='3em'/>
       </button>
     </div>
-    <Listbox label={selectedLabel} multiselect={multiselect} items={valueToSelectedChoices(value)} {descid} {valid} {invalid} on:change={e => itemsToRemove = e.detail} selected={itemsToRemove} on:blur={onBlur}/>
+    <Listbox label={selectedLabel} multiselect={multiselect} items={valueToSelectedChoices(value)} {descid} {valid} {invalid} on:change={e => { itemsToRemove = e.detail }} selected={itemsToRemove} on:blur={onBlur}/>
   </div>
 </FieldStandard>
 
@@ -115,4 +111,4 @@ function onkeydown(value, setVal) {
     border: 0;
     padding: 0;
   }
-</style>
+</style>

package/FieldSelect.svelte

@@ -14,8 +14,8 @@ export let conditional = undefined;
 export let required = false;
 </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>
-  <select {id} name={path} {disabled} class="dialog-input dialog-select {className}" on:change={onChange} on:blur={onBlur} class:valid class:invalid>
+<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}>
     {#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

@@ -10,7 +10,7 @@ declare const __propDef: {
         disabled?: boolean;
         choices: {
             label?: string;
-            value: any;
+            value: string;
             disabled?: boolean;
         }[];
         defaultValue?: any;

package/FieldText.svelte

@@ -15,6 +15,6 @@ export let conditional = undefined;
 export let required = false;
 </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>
-  <Input {type} name={path} {value} {id} class="dialog-input {className}" {allowlastpass} {onChange} {onBlur} {valid} {invalid} {maxlength}></Input>
+<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}></Input>
 </FieldStandard>

package/FieldTextArea.svelte

@@ -0,0 +1,24 @@
+<script>import { nullableSerialize, nullableDeserialize } from '@txstate-mws/svelte-forms';
+import FieldStandard from './FieldStandard.svelte';
+let className = '';
+export { className as class };
+export let id = undefined;
+export let path;
+export let label = '';
+export let notNull = false;
+export let defaultValue = notNull ? '' : undefined;
+export let maxlength = undefined;
+export let rows = undefined;
+export let conditional = undefined;
+export let required = false;
+</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} {maxlength}></textarea>
+</FieldStandard>
+
+<style>
+  textarea {
+    resize: vertical;
+  }
+</style>

package/FieldTextArea.svelte.d.ts

@@ -0,0 +1,25 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        class?: string;
+        id?: string | undefined;
+        path: string;
+        label?: string;
+        notNull?: boolean;
+        defaultValue?: any;
+        maxlength?: number | undefined;
+        rows?: number | undefined;
+        conditional?: boolean | undefined;
+        required?: boolean;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export declare type FieldTextAreaProps = typeof __propDef.props;
+export declare type FieldTextAreaEvents = typeof __propDef.events;
+export declare type FieldTextAreaSlots = typeof __propDef.slots;
+export default class FieldTextArea extends SvelteComponentTyped<FieldTextAreaProps, FieldTextAreaEvents, FieldTextAreaSlots> {
+}
+export {};

package/Form.svelte

@@ -13,8 +13,23 @@ export let preload = undefined;
 setContext(CHOOSER_API_CONTEXT, chooserClient);
 </script>
 
-<Form bind:store class="{className} dialog-form" {submit} {validate} on:saved {autocomplete} {name} {preload} let:messages let:saved let:valid let:invalid let:validating let:submitting>
+<Form bind:store class="{className} dialog-form" {submit} {validate} on:saved {autocomplete} {name} {preload} let:messages let:allMessages let:saved let:valid let:invalid let:validating let:submitting>
   <slot {messages} {saved} {validating} {submitting} {valid} {invalid} />
+  <div class="form-errors" aria-live='assertive'>
+    {#if messages.length}
+      <ul>
+        {#each messages as message}
+          <li>{message.message}</li>
+        {/each}
+        {#if invalid}
+          <li>More errors. See inline messages for details.</li>
+        {/if}
+      </ul>
+    {:else if invalid}
+      This form contains validation errors. See inline messages for details.
+    {/if}
+  </div>
+  <slot name="submit" {saved} {validating} {submitting} {valid} {invalid} />
 </Form>
 
 <style>
@@ -24,4 +39,8 @@ setContext(CHOOSER_API_CONTEXT, chooserClient);
   :global(.dialog-form) {
     padding: 0;
   }
+  .form-errors {
+    color: #9a3332;
+    padding: 1em;
+  }
 </style>

package/chooser/ChooserAPI.d.ts

@@ -3,10 +3,10 @@ export declare type ChooserType = 'asset' | 'page';
 export declare type AnyItem = Asset | Folder | Page;
 export interface Client<F = any> {
     getSources: (type: ChooserType) => Promise<Source[]>;
-    getChildren: (source: string, path: string, filters: F) => Promise<(AnyItem)[]>;
-    find: (source: string, path: string, searchstring: string, filters: F) => Promise<(AnyItem)[]>;
-    findById: (id: string) => Promise<AnyItem>;
-    findByUrl?: (url: string) => Promise<AnyItem>;
+    getChildren: (source: string, path: string, filters: F) => Promise<AnyItem[]>;
+    find: (source: string, path: string, searchstring: string, filters: F) => Promise<AnyItem[]>;
+    findById: (id: string) => Promise<AnyItem | undefined>;
+    findByUrl?: (url: string) => Promise<AnyItem | undefined>;
     urlToValue?: (url: string) => string;
     upload: (source: string, path: string, files: FileList) => Promise<void>;
 }

package/iconpicker/FieldIconPicker.svelte

@@ -0,0 +1,256 @@
+<script>import FieldStandard from '../FieldStandard.svelte';
+import { ScreenReaderOnly, Modal, modifierKey } from '@txstate-mws/svelte-components';
+import { FontAwesomeIcons, IconCategories } from './iconpicker';
+import Icon from '@iconify/svelte';
+import { randomid, keyby } from 'txstate-utils';
+export let id = undefined;
+export let path;
+export let label = '';
+export let required = false;
+export let defaultValue = { icon: 'fa-graduation-cap', prefix: 'fas' };
+export let conditional = undefined;
+const labelid = randomid();
+const descid = randomid();
+let modalOpen = false;
+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';
+}
+const iconElements = [];
+let visibleIcons = FontAwesomeIcons;
+let searchVal = '';
+let category = 'all';
+$: iconCountMessage = visibleIcons.length === FontAwesomeIcons.length ? 'Showing all icons' : `Showing ${visibleIcons.length} icons`;
+function onSelectIcon(iconClass) {
+    selected = { icon: iconClass, prefix: iconToPrefix[iconClass] };
+}
+function onSaveIconSelection(setVal) {
+    return function () {
+        setVal(selected);
+        category = 'all';
+        searchVal = '';
+        visibleIcons = FontAwesomeIcons;
+        modalOpen = false;
+    };
+}
+function onCancel(val) {
+    return function () {
+        selected = val;
+        category = 'all';
+        searchVal = '';
+        visibleIcons = FontAwesomeIcons;
+        modalOpen = false;
+    };
+}
+function onSearch() {
+    visibleIcons = FontAwesomeIcons.filter(i => {
+        if (i.class.includes(searchVal))
+            return true;
+        for (const term of i.search.terms) {
+            if (term.includes(searchVal))
+                return true;
+        }
+        return false;
+    });
+    if (visibleIcons.findIndex(i => i.class === selected.icon) < 0) {
+        onSelectIcon(visibleIcons[0].class);
+    }
+}
+function onSelectCategory() {
+    if (category === 'all') {
+        visibleIcons = FontAwesomeIcons;
+    }
+    else {
+        visibleIcons = FontAwesomeIcons.filter(i => {
+            return categoriesToIcons[category].icons.includes(i.class);
+        });
+    }
+    if (visibleIcons.findIndex(i => i.class === selected.icon) < 0) {
+        onSelectIcon(visibleIcons[0].class);
+    }
+}
+function onKeyDown(e) {
+    const currentSelectionIndex = visibleIcons.findIndex(i => i.class === selected.icon);
+    let newIndex;
+    if (modifierKey(e))
+        return;
+    else if (e.key === 'ArrowDown' || e.key === 'ArrowRight') {
+        e.preventDefault();
+        if (currentSelectionIndex === visibleIcons.length - 1) {
+            newIndex = 0;
+        }
+        else {
+            newIndex = currentSelectionIndex + 1;
+        }
+        onSelectIcon(visibleIcons[newIndex].class);
+        iconElements[newIndex].focus();
+    }
+    else if (e.key === 'ArrowLeft' || e.key === 'ArrowDown') {
+        e.preventDefault();
+        if (currentSelectionIndex === 0) {
+            newIndex = visibleIcons.length - 1;
+        }
+        else {
+            newIndex = currentSelectionIndex - 1;
+        }
+        onSelectIcon(visibleIcons[newIndex].class);
+        iconElements[newIndex].focus();
+    }
+}
+</script>
+
+<FieldStandard bind:id {path} {label} {required} {defaultValue} {conditional} let:value let:valid let:invalid let:id let:onBlur let:setVal>
+  <Icon icon={`${value.prefix === 'fab' ? 'fa-brands' : 'fa-solid'}:${value.icon.slice(3)}`}/>
+  <button id="btnSelectIcon" on:click={() => { modalOpen = true }}>Select New Icon</button>
+  {#if modalOpen}
+  <Modal>
+    <section>
+      <header id={labelid}>
+        Select Icon
+      </header>
+      <div id={descid} class="content">
+        <div class="icon-modal-content">
+          <div class="filters">
+            <div class="search-wrapper">
+              <input bind:value={searchVal} id="search_for" placeholder="Search Icons" on:keyup={onSearch}/>
+              <label for="search_for" class="fa fa-search" rel="tooltip" title="search"></label>
+            </div>
+            <select bind:value={category} class="icon-category" aria-label="Select Category" on:change={onSelectCategory}>
+              <option value="all">All</option>
+              {#each IconCategories as category (category.key)}
+                <option value={category.key}>{category.label}</option>
+              {/each}
+            </select>
+          </div>
+          <fieldset tabindex="0">
+            <ScreenReaderOnly><legend class="sr-only">Icons</legend></ScreenReaderOnly>
+            <div class="icon-picker-items" role="radiogroup" on:keydown={onKeyDown}>
+              {#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)}>
+                  <Icon icon={`${iconToPrefix[icon.class] === 'fab' ? 'fa-brands' : 'fa-solid'}:${icon.class.slice(3)}`}/>
+                  <ScreenReaderOnly>{icon.label}</ScreenReaderOnly>
+                </div>
+              {:else}
+                <div id="no-icons">No Icons Found</div>
+              {/each}
+            </div>
+            <ScreenReaderOnly arialive="polite">{iconCountMessage}</ScreenReaderOnly>
+          </fieldset>
+        </div>
+      </div>
+      <footer class="actions">
+        <button aria-describedby="{labelid} {descid}" on:click={onCancel(value)}>Cancel</button>
+        <button aria-describedby="{labelid} {descid}" on:click={onSaveIconSelection(setVal)}>Save Changes</button>
+      </footer>
+    </section>
+  </Modal>
+{/if}
+</FieldStandard>
+
+
+<style>
+  section {
+    position: relative;
+    background-color: #f4f4f4;
+    border-radius: 0.5em;
+    padding: 1em;
+    overflow: hidden;
+    width: 75vw;
+    min-width: 250px;
+    max-width: 650px;
+  }
+
+  footer {
+    display: flex;
+    align-items: center;
+    justify-content: flex-end;
+  }
+
+  .icon-modal-content {
+    display:flex;
+    flex-direction: column;
+    height: 100%;
+  }
+
+  .icon-modal-content .filters {
+    display: flex;
+    justify-content: center;
+  }
+
+  .icon-modal-content .filters select {
+    width: 40%;
+    margin: 10px 0 5px 0;
+    height: 30px;
+    border-radius: 10px;
+    background-color: white;
+    border: 1px solid #999;
+    font-family: 'Nunito Sans', sans-serif !important;
+  }
+
+  .icon-modal-content fieldset {
+    max-height: 80%;
+    overflow-y: scroll;
+  }
+
+  /* Styles for search field */
+
+  .search-wrapper{
+      position: relative;
+      margin-top: 10px;
+      margin-bottom: 5px;
+      margin-right: 15px;
+      align-self: center;
+      width: 50%;
+  }
+
+  #search_for{
+      width: 90%;
+      border-radius: 10px;
+      border: 1px solid #999;
+      height: 30px;
+      padding: 0px 0px 0px 30px;
+      font-family: 'Nunito Sans', sans-serif !important;
+  }
+
+  #search_for + label{
+      position: absolute;
+      left: 7px;
+      top: 7px;
+      color: #999;
+  }
+
+  /* Styles for the icon picker grid */
+
+  .icon-picker-items{
+    margin-top: 5px;
+    padding: 5px;
+  }
+
+.icon-picker-item {
+    float: left;
+    margin: 0px 11px 12px 11px;
+    text-align: center;
+    cursor: pointer;
+    color: inherit;
+    width: 10%;
+    position: relative;
+    font-size: 28px;
+}
+
+.icon-picker-item[aria-checked=true] {
+  outline: 4px solid #93BBC4;
+  background-color: #eee;
+}
+
+  /* Message when no icons are returned from search */
+  #no-icons{
+      margin-top: 10px;
+      font-size: 1.5rem;
+      text-align: center;
+      vertical-align: middle;
+      line-height: 250px;
+      color: #999;
+  }
+</style>

package/iconpicker/FieldIconPicker.svelte.d.ts

@@ -0,0 +1,24 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        id?: string | undefined;
+        path: string;
+        label?: string;
+        required?: boolean;
+        defaultValue?: {
+            icon: string;
+            prefix: string;
+        };
+        conditional?: boolean | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export declare type FieldIconPickerProps = typeof __propDef.props;
+export declare type FieldIconPickerEvents = typeof __propDef.events;
+export declare type FieldIconPickerSlots = typeof __propDef.slots;
+export default class FieldIconPicker extends SvelteComponentTyped<FieldIconPickerProps, FieldIconPickerEvents, FieldIconPickerSlots> {
+}
+export {};

package/iconpicker/iconpicker.d.ts

@@ -0,0 +1,13 @@
+export declare const FontAwesomeIcons: {
+    class: string;
+    search: {
+        terms: string[];
+    };
+    label: string;
+    free: string[];
+}[];
+export declare const IconCategories: {
+    key: string;
+    label: string;
+    icons: string[];
+}[];