@dosgato/dialog 1.1.21 → 1.1.23

package/dist/Form.svelte.d.ts

@@ -1,14 +1,48 @@
 import { SvelteComponentTyped } from "svelte";
-declare class __sveltets_Render<T extends any, F extends any> {
-    props(): any;
+import { type FormStore, type Feedback, type SubmitResponse } from '@txstate-mws/svelte-forms';
+import { type Client } from './';
+declare class __sveltets_Render<T extends Record<string, any>, F extends any> {
+    props(): {
+        class?: string;
+        submit?: ((state: T) => Promise<SubmitResponse<T>>) | undefined;
+        validate?: ((state: T) => Promise<Feedback[]>) | undefined;
+        store?: FormStore<T> | undefined;
+        chooserClient?: Client<F> | undefined;
+        autocomplete?: string | undefined;
+        name?: string | undefined;
+        preload?: T | undefined;
+    };
     events(): {
+        saved: any;
+    } & {
         [evt: string]: CustomEvent<any>;
     };
-    slots(): any;
+    slots(): {
+        default: {
+            messages: Feedback[];
+            allMessages: Feedback[];
+            saved: boolean;
+            validating: boolean;
+            submitting: boolean;
+            valid: boolean;
+            invalid: boolean;
+            showingInlineErrors: boolean;
+            data: Partial<T>;
+        };
+        submit: {
+            saved: boolean;
+            validating: boolean;
+            submitting: boolean;
+            allMessages: Feedback[];
+            valid: boolean;
+            invalid: boolean;
+            showingInlineErrors: boolean;
+        };
+    };
 }
-export type FormProps<T extends any, F extends any> = ReturnType<__sveltets_Render<T, F>['props']>;
-export type FormEvents<T extends any, F extends any> = ReturnType<__sveltets_Render<T, F>['events']>;
-export type FormSlots<T extends any, F extends any> = ReturnType<__sveltets_Render<T, F>['slots']>;
-export default class Form<T extends any, F extends any> extends SvelteComponentTyped<FormProps<T, F>, FormEvents<T, F>, FormSlots<T, F>> {
+export type FormProps<T extends Record<string, any>, F extends any> = ReturnType<__sveltets_Render<T, F>['props']>;
+export type FormEvents<T extends Record<string, any>, F extends any> = ReturnType<__sveltets_Render<T, F>['events']>;
+export type FormSlots<T extends Record<string, any>, F extends any> = ReturnType<__sveltets_Render<T, F>['slots']>;
+export default class Form<T extends Record<string, any>, F extends any> extends SvelteComponentTyped<FormProps<T, F>, FormEvents<T, F>, FormSlots<T, F>> {
 }
 export {};

package/dist/FormDialog.svelte.d.ts

@@ -2,17 +2,17 @@ import { SvelteComponentTyped } from "svelte";
 import type { IconifyIcon } from '@iconify/svelte';
 import type { Feedback, FormStore, SubmitResponse } from '@txstate-mws/svelte-forms';
 import { type Client } from './';
-declare class __sveltets_Render<T extends any> {
+declare class __sveltets_Render<T extends Record<string, any>> {
     props(): {
         submit: (state: T) => Promise<SubmitResponse<T>>;
         validate?: ((state: T) => Promise<Feedback[]>) | undefined;
         store?: FormStore<T> | undefined;
-        chooserClient?: Client<any> | undefined;
+        chooserClient?: Client | undefined;
         autocomplete?: string | undefined;
         name?: string | undefined;
-        title?: string | undefined;
+        title?: string;
         icon?: IconifyIcon | undefined;
-        size?: "small" | "normal" | "tiny" | "large" | undefined;
+        size?: "tiny" | "small" | "normal" | "large";
         preload?: T | undefined;
     };
     events(): {
@@ -33,9 +33,9 @@ declare class __sveltets_Render<T extends any> {
         };
     };
 }
-export type FormDialogProps<T extends any> = ReturnType<__sveltets_Render<T>['props']>;
-export type FormDialogEvents<T extends any> = ReturnType<__sveltets_Render<T>['events']>;
-export type FormDialogSlots<T extends any> = ReturnType<__sveltets_Render<T>['slots']>;
-export default class FormDialog<T extends any> extends SvelteComponentTyped<FormDialogProps<T>, FormDialogEvents<T>, FormDialogSlots<T>> {
+export type FormDialogProps<T extends Record<string, any>> = ReturnType<__sveltets_Render<T>['props']>;
+export type FormDialogEvents<T extends Record<string, any>> = ReturnType<__sveltets_Render<T>['events']>;
+export type FormDialogSlots<T extends Record<string, any>> = ReturnType<__sveltets_Render<T>['slots']>;
+export default class FormDialog<T extends Record<string, any>> extends SvelteComponentTyped<FormDialogProps<T>, FormDialogEvents<T>, FormDialogSlots<T>> {
 }
 export {};

package/dist/Icon.svelte.d.ts

@@ -4,7 +4,7 @@ declare const __propDef: {
     props: {
         icon: IconifyIcon | undefined;
         /** Label used in a `<ScreenReaderOnly>`. */ hiddenLabel?: string | undefined;
-        inline?: boolean | undefined;
+        inline?: boolean;
         width?: string | number | undefined;
         height?: string | number | undefined;
         tooltip?: string | undefined;

package/dist/Input.svelte

@@ -7,6 +7,7 @@ export let name;
 export let value;
 export let type = 'text';
 export let allowlastpass = false;
+export let placeholder = undefined;
 export let maxlength = undefined;
 export let min = undefined;
 export let max = undefined;
@@ -39,4 +40,4 @@ $: maxStr = resolveMinMax(max);
 </script>
 
 <!-- svelte-ignore a11y-autocomplete-valid -->
-<input bind:this={inputelement} {type} {id} {autocomplete} class={className} data-lpignore={!allowlastpass} {name} {value} {disabled} {maxlength} min={minStr} max={maxStr} {step} class:valid class:invalid aria-invalid={invalid} aria-describedby={isNotBlank(descby) ? descby : null} on:change={onChange} on:select={onSelect} on:blur={onBlur} on:keyup={onChange} use:passActions={use}>
+<input bind:this={inputelement} {type} {id} {autocomplete} {placeholder} class={className} data-lpignore={!allowlastpass} {name} {value} {disabled} {maxlength} min={minStr} max={maxStr} {step} class:valid class:invalid aria-invalid={invalid} aria-describedby={isNotBlank(descby) ? descby : null} on:change={onChange} on:select={onSelect} on:blur={onBlur} on:keyup={onChange} use:passActions={use}>

package/dist/Input.svelte.d.ts

@@ -2,11 +2,12 @@ import { SvelteComponentTyped } from "svelte";
 import { type HTMLActionEntry } from '@txstate-mws/svelte-components';
 declare const __propDef: {
     props: {
-        class?: string | undefined;
+        class?: string;
         name: string;
         value: string;
-        type?: string | undefined;
-        allowlastpass?: boolean | undefined;
+        type?: string;
+        allowlastpass?: boolean;
+        placeholder?: string | undefined;
         maxlength?: number | undefined;
         min?: string | Date | {
             toJSDate: () => Date;
@@ -16,18 +17,18 @@ declare const __propDef: {
         } | number | undefined;
         step?: number | undefined;
         id?: string | undefined;
-        disabled?: boolean | undefined;
-        autocomplete?: string | undefined;
+        disabled?: boolean;
+        autocomplete?: string;
         extradescid?: string | undefined;
         messagesid?: string | undefined;
         helptextid?: string | undefined;
-        valid?: boolean | undefined;
-        invalid?: boolean | undefined;
+        valid?: boolean;
+        invalid?: boolean;
         onChange: any;
         onBlur: any;
         onSelect?: any;
-        use?: HTMLActionEntry[] | undefined;
-        inputelement?: HTMLInputElement | undefined;
+        use?: HTMLActionEntry[];
+        inputelement?: HTMLInputElement;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/dist/Listbox.svelte.d.ts

@@ -2,16 +2,16 @@ import { SvelteComponentTyped } from "svelte";
 import { type PopupMenuItem } from '@txstate-mws/svelte-components';
 declare const __propDef: {
     props: {
-        items?: PopupMenuItem[] | undefined;
+        items?: PopupMenuItem[];
         label: string;
-        multiselect?: boolean | undefined;
+        multiselect?: boolean;
         selected?: {
             value: string;
-            label?: string | undefined;
-        }[] | undefined;
+            label?: string;
+        }[];
         descid?: string | undefined;
-        valid?: boolean | undefined;
-        invalid?: boolean | undefined;
+        valid?: boolean;
+        invalid?: boolean;
     };
     events: {
         change: CustomEvent<any>;

package/dist/Radio.svelte.d.ts

@@ -4,15 +4,15 @@ declare const __propDef: {
         id?: string | undefined;
         name: string;
         value: string;
-        selected?: boolean | undefined;
+        selected?: boolean;
         onChange?: any;
         onBlur?: any;
         messagesid?: string | undefined;
         helptextid?: string | undefined;
         extradescid?: string | undefined;
-        disabled?: boolean | undefined;
-        valid?: boolean | undefined;
-        invalid?: boolean | undefined;
+        disabled?: boolean;
+        valid?: boolean;
+        invalid?: boolean;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/dist/Switcher.svelte.d.ts

@@ -2,25 +2,25 @@ import { SvelteComponentTyped } from "svelte";
 import type { Feedback } from '@txstate-mws/svelte-forms';
 declare const __propDef: {
     props: {
-        class?: string | undefined;
+        class?: string;
         id?: string | undefined;
-        path?: string | undefined;
-        name?: string | undefined;
+        path?: string;
+        name?: string;
         choices: {
             label?: string;
             value: string;
             disabled?: boolean;
         }[];
-        horizontal?: boolean | undefined;
+        horizontal?: boolean;
         label: string;
-        required?: boolean | undefined;
-        related?: number | true | undefined;
+        required?: boolean;
+        related?: true | number;
         extradescid?: string | undefined;
         helptext?: string | undefined;
-        messages?: Feedback[] | undefined;
-        iptValue?: string | undefined;
-        valid?: boolean | undefined;
-        invalid?: boolean | undefined;
+        messages?: Feedback[];
+        iptValue?: string;
+        valid?: boolean;
+        invalid?: boolean;
         onBlur?: (() => void | Promise<void>) | undefined;
     };
     events: {

package/dist/Tabs.svelte.d.ts

@@ -4,9 +4,9 @@ declare const __propDef: {
     props: {
         tabs: TabDef[];
         active?: string | undefined;
-        store?: TabStore | undefined;
-        disableDialogControl?: boolean | undefined;
-        accordionOnMobile?: boolean | undefined;
+        store?: TabStore;
+        disableDialogControl?: boolean;
+        accordionOnMobile?: boolean;
         /**
            * Takes the width of the tabs area, in pixels, and returns the number of tabs that should be
            * displayed at that width.

package/dist/Tooltip.svelte.d.ts

@@ -2,11 +2,11 @@ import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
         tip?: string | undefined;
-        top?: boolean | undefined;
-        right?: boolean | undefined;
-        bottom?: boolean | undefined;
-        left?: boolean | undefined;
-        active?: boolean | undefined;
+        top?: boolean;
+        right?: boolean;
+        bottom?: boolean;
+        left?: boolean;
+        active?: boolean;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/dist/chooser/Chooser.svelte.d.ts

@@ -4,11 +4,11 @@ import { ChooserStore } from './ChooserStore';
 declare class __sveltets_Render<F> {
     props(): {
         label?: string | undefined;
-        images?: boolean | undefined;
-        pages?: boolean | undefined;
-        assets?: boolean | undefined;
-        folders?: boolean | undefined;
-        required?: boolean | undefined;
+        images?: boolean;
+        pages?: boolean;
+        assets?: boolean;
+        folders?: boolean;
+        required?: boolean;
         initialSource?: string | undefined;
         initialPath?: string | undefined;
         activeSources?: string[] | undefined;

package/dist/chooser/Details.svelte.d.ts

@@ -4,7 +4,7 @@ import { type BrokenURL, type RawURL } from './ChooserStore';
 declare const __propDef: {
     props: {
         item: AnyItem | RawURL | BrokenURL;
-        singleLine?: boolean | undefined;
+        singleLine?: boolean;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/dist/chooser/Thumbnail.svelte.d.ts

@@ -4,9 +4,9 @@ import type { BrokenURL, RawURL } from './ChooserStore';
 declare const __propDef: {
     props: {
         item: AnyItem | RawURL | BrokenURL;
-        larger?: boolean | undefined;
-        expandable?: boolean | undefined;
-        expanded?: boolean | undefined;
+        larger?: boolean;
+        expandable?: boolean;
+        expanded?: boolean;
     };
     events: {
         thumbnailsizechange: CustomEvent<any>;

package/dist/chooser/UploadUI.svelte.d.ts

@@ -4,11 +4,11 @@ declare const __propDef: {
     props: {
         title: string;
         folder: Folder;
-        maxFiles?: number | undefined;
-        escapable?: boolean | undefined;
-        mimeWhitelist?: string[] | undefined;
-        mimeBlacklist?: string[] | undefined;
-        uploader: NonNullable<Client['upload']>;
+        maxFiles?: number;
+        escapable?: boolean;
+        mimeWhitelist?: string[];
+        mimeBlacklist?: string[];
+        uploader: NonNullable<Client["upload"]>;
     };
     events: {
         saved: CustomEvent<any>;

package/dist/code/CodeEditor.svelte.d.ts

@@ -2,11 +2,11 @@ import { SvelteComponentTyped } from "svelte";
 import { type HTMLActionEntry } from '@txstate-mws/svelte-components';
 declare const __propDef: {
     props: {
-        class?: string | undefined;
+        class?: string;
         id?: string | undefined;
-        rows?: number | undefined;
-        language: 'js' | 'css' | 'html';
-        use?: HTMLActionEntry[] | undefined;
+        rows?: number;
+        language: "js" | "css" | "html";
+        use?: HTMLActionEntry[];
         inputelement?: HTMLElement | undefined;
         extradescid?: string | undefined;
         helptextid?: string | undefined;

package/dist/code/FieldCodeEditor.svelte.d.ts

@@ -2,21 +2,21 @@ import { SvelteComponentTyped } from "svelte";
 import type { HTMLActionEntry } from '@txstate-mws/svelte-components';
 declare const __propDef: {
     props: {
-        class?: string | undefined;
+        class?: string;
         id?: string | undefined;
         path: string;
-        label?: string | undefined;
-        notNull?: boolean | undefined;
+        label?: string;
+        notNull?: boolean;
         defaultValue?: any;
-        rows?: number | undefined;
+        rows?: number;
         conditional?: boolean | undefined;
-        required?: boolean | undefined;
-        use?: HTMLActionEntry[] | undefined;
-        inputelement?: HTMLElement | undefined;
-        related?: number | true | undefined;
+        required?: boolean;
+        use?: HTMLActionEntry[];
+        inputelement?: HTMLElement;
+        related?: true | number;
         extradescid?: string | undefined;
         helptext?: string | undefined;
-        language: 'js' | 'css' | 'html';
+        language: "js" | "css" | "html";
     };
     events: {
         paste: ClipboardEvent;

package/dist/colorpicker/FieldColorPicker.svelte.d.ts

@@ -3,13 +3,13 @@ import type { ColorPickerOption } from './colorpicker';
 declare const __propDef: {
     props: {
         id?: string | undefined;
-        class?: string | undefined;
+        class?: string;
         path: string;
         options: ColorPickerOption[];
-        addAllOption?: boolean | undefined;
-        label?: string | undefined;
-        required?: boolean | undefined;
-        notNull?: boolean | undefined;
+        addAllOption?: boolean;
+        label?: string;
+        required?: boolean;
+        notNull?: boolean;
         defaultValue?: any;
         conditional?: boolean | undefined;
         helptext?: string | undefined;

package/dist/cropper/FieldCropper.svelte.d.ts

@@ -4,10 +4,10 @@ declare const __propDef: {
         id?: string | undefined;
         path: string;
         imageSrc: string | undefined;
-        selectionAspectRatio?: number | undefined;
-        minSelection?: number | undefined;
-        label?: string | undefined;
-        required?: boolean | undefined;
+        selectionAspectRatio?: number;
+        minSelection?: number;
+        label?: string;
+        required?: boolean;
         conditional?: boolean | undefined;
         helptext?: string | undefined;
     };

package/dist/iconpicker/FieldIconPicker.svelte

@@ -48,10 +48,11 @@ function onCancel(val) {
 }
 function onSearch() {
     visibleIcons = FontAwesomeIcons.filter(i => {
-        if (i.class.includes(searchVal))
+        const searchValLC = searchVal.toLowerCase();
+        if (i.class.toLowerCase().includes(searchValLC))
             return true;
         for (const term of i.search.terms) {
-            if (term.includes(searchVal))
+            if (term.toLowerCase().includes(searchValLC))
                 return true;
         }
         return false;
@@ -128,7 +129,7 @@ function onKeyDown(e) {
           </div>
           <fieldset>
             <ScreenReaderOnly><legend class="sr-only">Icons</legend></ScreenReaderOnly>
-            <div class="icon-picker-items" role="radiogroup">
+            <div class="icon-picker-items" role="radiogroup" class:empty={visibleIcons.length === 0}>
               {#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}>
@@ -244,6 +245,9 @@ function onKeyDown(e) {
     justify-items: center;
     align-items: center;
   }
+  .icon-picker-items.empty {
+    display: block;
+  }
 
   @media (max-width: 800px) {
     .icon-picker-items {

package/dist/iconpicker/FieldIconPicker.svelte.d.ts

@@ -3,12 +3,12 @@ declare const __propDef: {
     props: {
         id?: string | undefined;
         path: string;
-        label?: string | undefined;
-        required?: boolean | undefined;
+        label?: string;
+        required?: boolean;
         defaultValue?: {
             icon: string;
             prefix: string;
-        } | undefined;
+        };
         conditional?: boolean | undefined;
         helptext?: string | undefined;
     };

package/dist/imageposition/FieldImagePosition.svelte

@@ -3,7 +3,6 @@ import FieldStandard from '../FieldStandard.svelte';
 import Button from '../Button.svelte';
 import arrowsIn from '@iconify-icons/ph/arrows-in';
 import { Dialog } from '..';
-import { onMount } from 'svelte';
 import { modifierKey, ScreenReaderOnly } from '@txstate-mws/svelte-components';
 export let id = undefined;
 export let path;
@@ -12,7 +11,6 @@ export let label = '';
 export let required = false;
 export let conditional = undefined;
 export let helptext = undefined;
-export let info = undefined;
 export let defaultValue = { x: 50, y: 50 };
 let initialVal;
 function init(v) {
@@ -34,10 +32,6 @@ function hideModal() {
     modalOpen = false;
 }
 let x, y;
-onMount(() => {
-    x = initialVal?.x / 25;
-    y = initialVal?.y / 25;
-});
 function onSave(setVal) {
     setVal({ x: x * 25, y: y * 25 });
     hideModal();
@@ -105,50 +99,79 @@ const positionText = {
         4: 'Bottom Right Corner'
     }
 };
+let dialogWasOpened = false;
+function onDialogOpen() {
+    if (!dialogWasOpened) {
+        x = (initialVal.x ?? 50) / 25;
+        y = (initialVal.y ?? 50) / 25;
+        dialogWasOpened = true;
+    }
+}
+function resetPosition() {
+    x = 2;
+    y = 2;
+}
 </script>
 
 <FieldStandard bind:id {label} {path} {required} {defaultValue} conditional={conditional && isNotBlank(imageSrc)} {helptext} {descid} let:value let:setVal let:helptextid>
   {@const _ = init(value)}
   {#if isNotBlank(imageSrc)}
     <Button icon={arrowsIn} on:click={showModal}>Adjust Image Position</Button>
-      {#if modalOpen}
-        <Dialog size="large" title={label} on:escape={hideModal} continueText="Save" cancelText="Cancel" on:continue={() => onSave(setVal)} {labelid}>
-        {#if info}
-          <section class="info">
-            {info}
-          </section>
-          <section class="position">
-            <p>
-              Using the grid overlays, select a focal point in your image to determine how Gato will align, position, and scale your image
-              in the section. This will help ensure the focal point of your image is always in frame. By default, Gato will
-              use the center of the image.
-            </p>
-            <div class="image-container">
-              <img class="crop-image" src={imageSrc} alt="" />
-              <div class="overlay" role="radiogroup" aria-labelledby={labelid}>
-                {#each Array.from(Array(5).keys()) as col}
-                  {#each Array.from(Array(5).keys()) as row}
-                    <div
-                      bind:this={boxes[col + row * 5]}
-                      class="box"
-                      class:side={row === 4}
-                      class:bottom={col === 4}
-                      role="radio"
-                      aria-checked={row === x && col === y}
-                      tabindex={row === x && col === y ? 0 : -1}
-                      on:click={() => onSelectBox(row, col)} on:keydown={onKeyDown}><ScreenReaderOnly>{positionText[row][col]}</ScreenReaderOnly></div>
-                  {/each}
+    {#if modalOpen}
+      <Dialog size="large" title={label} on:escape={hideModal} continueText="Save" cancelText="Cancel" on:continue={() => onSave(setVal)} {labelid}>
+        {@const _dialogopen = onDialogOpen()}
+        <section class="info">
+          <p>This image is in a responsive layout, meaning the size and shape of the image may change based on the viewer’s browser window and device.</p>
+          <div class="warning">
+            <div class="icon">
+              <svg width="100%" height="100%" viewBox="0 0 24 23" fill="none" xmlns="http://www.w3.org/2000/svg">
+                <path fill-rule="evenodd" clip-rule="evenodd" d="M21.7931 17.9114C22.0668 18.4197 22.0668 19.0061 21.7931 19.4752C21.5195 19.9834 21.0112 20.2571 20.4639 20.2571H3.57518C2.98876 20.2571 2.48054 19.9834 2.20688 19.4752C1.93322 19.0061 1.93322 18.4197 2.20688 17.9114L10.6512 3.52473C10.9249 3.05559 11.4331 2.74284 12.0195 2.74284C12.5669 2.74284 13.0751 3.05559 13.3488 3.52473L21.7931 17.9114ZM15.0762 2.51348L15.0777 2.51616L23.538 16.93L23.5555 16.9625C24.1294 18.0283 24.1722 19.3444 23.5393 20.454C22.8879 21.637 21.6838 22.2587 20.4639 22.2587H3.57518C2.34516 22.2587 1.12477 21.6603 0.460681 20.4539C-0.172198 19.3444 -0.129382 18.0282 0.444499 16.9625L0.461978 16.93L8.92228 2.51616L8.92396 2.51329C9.54626 1.44877 10.7019 0.741211 12.0195 0.741211C13.326 0.741211 14.4684 1.47375 15.0762 2.51348ZM12.9067 13.3785C12.9398 13.2815 12.9578 13.1759 12.9578 13.0637V8.68517C12.9578 8.17695 12.5278 7.74691 12.0195 7.74691C11.4722 7.74691 11.0813 8.17695 11.0813 8.68517V13.0637C11.0813 13.1745 11.0973 13.2788 11.1274 13.3748C11.2459 13.7532 11.583 14.002 12.0195 14.002C12.4236 14.002 12.7783 13.7548 12.9067 13.3785ZM10.9757 15.8208C10.8443 16.0203 10.7685 16.2567 10.7685 16.504C10.7685 17.2077 11.3158 17.7551 12.0195 17.7551C12.6842 17.7551 13.2706 17.2077 13.2706 16.504C13.2706 16.2554 13.1885 16.0178 13.051 15.8177C12.8209 15.4828 12.4355 15.253 12.0195 15.253C11.5777 15.253 11.1975 15.4842 10.9757 15.8208Z" fill="black"/>
+              </svg>
+            </div>
+            <p>If there is sensitive content in the image that should never be visible to the audience, crop or edit the file in an editing software before uploading. </p>
+          </div>
+          <p>Using the grid overlays, select a focal point in your image to determine how Gato will align, position, and scale your image in the section. This will help ensure the focal point of your image is always in frame. By default, Gato will use the center of the image.</p>
+        </section>
+        <section class="position">
+          <div class="image-container">
+            <img class="crop-image" src={imageSrc} alt="" />
+            <div class="overlay" role="radiogroup" aria-labelledby={labelid}>
+              {#each Array.from(Array(5).keys()) as col}
+                {#each Array.from(Array(5).keys()) as row}
+                  <div
+                    bind:this={boxes[col + row * 5]}
+                    class="box"
+                    class:side={row === 4}
+                    class:bottom={col === 4}
+                    role="radio"
+                    aria-checked={row === x && col === y}
+                    tabindex={row === x && col === y ? 0 : -1}
+                    on:click={() => onSelectBox(row, col)} on:keydown={onKeyDown}><ScreenReaderOnly>{positionText[row][col]}</ScreenReaderOnly></div>
                 {/each}
-              </div>
+              {/each}
             </div>
-          </section>
-        {/if}
+          </div>
+          <div class="button-container">
+            <Button type="button" class="reset-position" on:click={resetPosition}>Reset Position</Button>
+          </div>
+        </section>
       </Dialog>
     {/if}
   {/if}
 </FieldStandard>
 
 <style>
+  .warning {
+    display: flex;
+    gap: 1.5em;
+    background-color: #F3D690;
+    padding: 0.5em;
+    border-radius: 6px;
+  }
+  .warning .icon {
+    font-size: 3em;
+    width: 1em;
+  }
   section.position {
     border: 1px dashed #767676;
     padding: 1em;
@@ -159,6 +182,7 @@ const positionText = {
   .image-container {
     width: 75%;
     position: relative;
+    margin-bottom: 1em;
   }
   .crop-image {
     width: 100%;
@@ -188,6 +212,16 @@ const positionText = {
   .overlay .box.bottom {
     border-bottom-width: 0;
   }
+  .button-container {
+    width: 100%;
+  }
+  :global(button.reset-position.reset-position) {
+    background-color: var(--dg-button-cancel-bg, #808080);
+    color: var(--dg-button-cancel-text, #fff);
+  }
+  :global(button.reset-position.reset-position):not([disabled]):hover {
+    background-color: var(--dg-button-cancel-hover-bg, #595959);
+  }
 
 </style>
 

package/dist/imageposition/FieldImagePosition.svelte.d.ts

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