@dosgato/dialog 1.3.8 → 1.4.0

package/dist/FieldChooserLink.svelte

@@ -31,6 +31,7 @@
   export let selectedAsset: AnyItem | RawURL | BrokenURL | undefined = undefined
   export let altTextPath : string | undefined = undefined
   export let altTextRequired: boolean = false
+  export let altTextHelp: string = 'Describes the asset for visually-impaired users and search engines.'
 
   // TODO: add a mime type acceptance prop, maybe a regex or function, to prevent users from
   // choosing unacceptable mime types
@@ -38,6 +39,7 @@
   const formStore = getContext<FormStore>(FORM_CONTEXT)
   const inheritedPath = getContext<string>(FORM_INHERITED_PATH)
   const finalPath = [inheritedPath, path].filter(isNotBlank).join('.')
+  const finalAltTextPath = altTextPath ? [inheritedPath, altTextPath].filter(isNotBlank).join('.') : undefined
   const value = formStore.getField<string>(finalPath)
   const chooserClient = getContext<Client>(CHOOSER_API_CONTEXT)
   const store = new ChooserStore(chooserClient)
@@ -57,12 +59,12 @@
     return (e) => {
       selectedAsset = e.detail.preview
       if (
-        altTextPath &&
+        finalAltTextPath &&
         e.detail.copyAltText &&
         selectedAsset?.type === 'asset' &&
         selectedAsset?.image?.altText
       ) {
-        formStore.setField(altTextPath, selectedAsset.image.altText).catch(console.error)
+        formStore.setField(finalAltTextPath, selectedAsset.image.altText).catch(console.error)
       }
       setVal(selectedAsset?.id)
       hide()
@@ -175,8 +177,8 @@
       return (e) => {
         selectedAsset = undefined
         setVal(undefined)
-        if (altTextPath) {
-          formStore.setField(altTextPath, undefined).catch(console.error)
+        if (finalAltTextPath) {
+          formStore.setField(finalAltTextPath, undefined).catch(console.error)
         }
       }
     }
@@ -205,7 +207,7 @@
             <span class="chooser-data">{selectedAsset.name}</span>
           </div>
           <div class="tabs-container">
-            <AssetTabs id={assetTabsId} {selectedAsset} showMetadata={$$slots.metadata != null} {altTextPath} {altTextRequired}>
+            <AssetTabs id={assetTabsId} {selectedAsset} showMetadata={$$slots.metadata != null} {altTextPath} {altTextRequired} {altTextHelp} >
               <slot name="metadata" slot="metadata" {selectedAsset} />
             </AssetTabs>
           </div>

package/dist/FieldChooserLink.svelte.d.ts

@@ -22,6 +22,7 @@ declare const __propDef: {
         selectedAsset?: AnyItem | RawURL | BrokenURL | undefined;
         altTextPath?: string | undefined;
         altTextRequired?: boolean;
+        altTextHelp?: string;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/dist/chooser/AssetTabs.svelte

@@ -16,6 +16,7 @@
   export let altTextRequired: boolean = false
   // if they say it's required but don't provide a path, default to 'altText'
   export let altTextPath: string | undefined = altTextRequired ? 'altText' : undefined
+  export let altTextHelp: string | undefined
   const chooserClient = getContext<Client>(CHOOSER_API_CONTEXT)
 
   let tabListEl: HTMLUListElement
@@ -93,7 +94,7 @@
 
   {#if activeTab === `${id}-alttext`}
     <div id={`${id}-alttext`} class="tab-content" role="tabpanel" aria-labelledby="{id}-alttext-tab">
-      {#if altTextPath}<FieldTextArea required={altTextRequired} path={altTextPath} label="Alt. Text" helptext="Describes the asset for visually-impaired users and search engines."/>{/if}
+      {#if altTextPath}<FieldTextArea required={altTextRequired} path={altTextPath} label="Alt. Text" helptext={altTextHelp} />{/if}
     </div>
   {/if}
 {/if}

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

@@ -7,6 +7,7 @@ declare const __propDef: {
         showMetadata?: boolean;
         altTextRequired?: boolean;
         altTextPath?: string | undefined;
+        altTextHelp: string | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/dist/cropper/FieldCropper.svelte

@@ -1,12 +1,13 @@
 <script lang="ts">
+  import arrowsCircleIcon from '@iconify-icons/ph/arrows-clockwise-fill'
+  import arrowsOutIcon from '@iconify-icons/ph/arrows-out-fill'
   import { resize, ScreenReaderOnly } from '@txstate-mws/svelte-components'
-  import { onMount, tick } from 'svelte'
+  import { FORM_CONTEXT, FORM_INHERITED_PATH, type FormStore } from '@txstate-mws/svelte-forms'
+  import { getContext, onMount, tick } from 'svelte'
   import { isNotBlank, randomid } from 'txstate-utils'
   import FieldStandard from '../FieldStandard.svelte'
   import { CropperStore, type CropOutput } from './cropper'
   import { Button } from '..'
-  import arrowsOutIcon from '@iconify-icons/ph/arrows-out-fill'
-  import arrowsCircleIcon from '@iconify-icons/ph/arrows-clockwise-fill'
 
   export let id: string | undefined = undefined
   export let path: string
@@ -18,20 +19,17 @@
   export let conditional: boolean | undefined = undefined
   export let helptext: string | undefined = undefined
 
-  const store = new CropperStore({ width: 0, height: 0, minSelection, targetAspect: selectionAspectRatio })
-  const { output, outputPct, selection } = store
+  const inheritedPath = getContext<string>(FORM_INHERITED_PATH)
+  const finalPath = [inheritedPath, path].filter(isNotBlank).join('.')
+  const store = getContext<FormStore>(FORM_CONTEXT)
+  const val = store.getField<CropOutput>(finalPath)
 
-  let setVal: (val: any) => void
-  let value: CropOutput | undefined
-  const initialAspectRatio: number = selectionAspectRatio
-  function init (spValue, spSetVal) {
-    setVal = spSetVal
-    value = spValue
-  }
+  const cropperStore = new CropperStore({ width: 0, height: 0, minSelection, targetAspect: selectionAspectRatio })
+  const { output, outputPct, selection } = cropperStore
 
-  $: store.setOutput(value)
+  $: cropperStore.setOutput($val)
   function reactToOutput (...args: any[]) {
-    if (mounted) setVal?.($output)
+    if (mounted) store.setField(finalPath, $output)
   }
   $: reactToOutput($output)
 
@@ -39,7 +37,7 @@
   function updateRect (..._: any) {
     if (!container) return false
     rect = container.getBoundingClientRect()
-    store.updateDimensions(rect.width, rect.height)
+    cropperStore.updateDimensions(rect.width, rect.height)
     return true
   }
 
@@ -59,7 +57,7 @@
     const clientY = e instanceof MouseEvent ? e.clientY : e.touches[0].clientY
     if (isInside(clientX, clientY)) {
       e.preventDefault()
-      store.startDrag(clientX - rect.left, clientY - rect.top)
+      cropperStore.startDrag(clientX - rect.left, clientY - rect.top)
     }
   }
 
@@ -68,24 +66,24 @@
     if (window.TouchEvent && e instanceof TouchEvent && e.touches.length > 1) return
     const clientX = e instanceof MouseEvent ? e.clientX : e.touches[0].clientX
     const clientY = e instanceof MouseEvent ? e.clientY : e.touches[0].clientY
-    if (e instanceof MouseEvent && !e.buttons && $store.drag) store.endDrag()
-    if (isInside(clientX, clientY) || $store.drag) store.mouseMove(...relativeToRect(clientX, clientY))
+    if (e instanceof MouseEvent && !e.buttons && $cropperStore.drag) cropperStore.endDrag()
+    if (isInside(clientX, clientY) || $cropperStore.drag) cropperStore.mouseMove(...relativeToRect(clientX, clientY))
   }
 
   function onMouseUp (e: MouseEvent | TouchEvent) {
     if (!updateRect()) return
-    store.endDrag()
+    cropperStore.endDrag()
     const clientX = e instanceof MouseEvent ? e.clientX : e.changedTouches[0].clientX
     const clientY = e instanceof MouseEvent ? e.clientY : e.changedTouches[0].clientY
     if (isInside(clientX, clientY)) {
-      store.mouseMove(...relativeToRect(clientX, clientY))
+      cropperStore.mouseMove(...relativeToRect(clientX, clientY))
       container?.querySelector<HTMLDivElement>('.selectionHilite')?.focus()
     }
   }
 
   function onMaximize () {
     if (!updateRect()) return
-    store.maximize()
+    cropperStore.maximize()
   }
 
   function onKeyDown (type: 'move' | 'tl' | 'tr' | 'bl' | 'br') {
@@ -104,9 +102,9 @@
       } else return
       const step = e.shiftKey ? (e.altKey || e.metaKey ? 80 : 20) : (e.altKey || e.metaKey ? 40 : 1)
       if (type === 'move') {
-        store.move(left ? -1 * step : (right ? step : 0), up ? -1 * step : (down ? step : 0))
+        cropperStore.move(left ? -1 * step : (right ? step : 0), up ? -1 * step : (down ? step : 0))
       } else {
-        store.expand(type, ((tl || bl) && right) || ((tl || tr) && down) || ((tr || br) && left) || ((bl || br) && up) ? -1 * step : step)
+        cropperStore.expand(type, ((tl || bl) && right) || ((tl || tr) && down) || ((tr || br) && left) || ((bl || br) && up) ? -1 * step : step)
       }
     }
   }
@@ -121,15 +119,9 @@
   const movedescid = randomid()
   let focusWithin = false
 
-  let arChanged = false
   async function reactToAspectRatio (ar) {
     if (!ar) return
-    store.updateTargetAspect(ar)
-    await tick()
-    if (ar !== initialAspectRatio || arChanged) {
-      store.maximize()
-      arChanged = true
-    }
+    cropperStore.updateTargetAspect(ar)
   }
   $: void reactToAspectRatio(selectionAspectRatio)
 
@@ -143,7 +135,7 @@
     } else {
       if (e.target.src !== initialVal || srcChanged) {
         await tick()
-        store.maximize()
+        cropperStore.maximize()
         srcChanged = true
       }
     }
@@ -152,18 +144,17 @@
 
 <svelte:window on:mousemove={onMouseMove} on:mouseup={onMouseUp} on:touchend={onMouseUp} on:touchcancel={onMouseUp} />
 <FieldStandard bind:id {label} {path} {required} conditional={conditional && isNotBlank(imageSrc)} {helptext} {descid} let:value let:setVal let:helptextid>
-  {@const _ = init(value, setVal)}
   {#if isNotBlank(imageSrc)}
     <div on:focusin={() => { focusWithin = true }} on:focusout={() => { focusWithin = false }}>
       <div class="action-buttons">
         <Button type="button" on:click={onMaximize} icon={arrowsOutIcon}>Center and Maximize</Button>
-        <Button type="button" on:click={() => store.reset()} icon={arrowsCircleIcon} class="btn-clear">Clear</Button>
+        <Button type="button" on:click={() => cropperStore.reset()} icon={arrowsCircleIcon} class="btn-clear">Clear</Button>
       </div>
       <div class="cropper-instructions">
         Click and drag to select a section of your image to use.
       </div>
       <!-- 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}>
+      <div bind:this={container} use:resize on:resize={() => updateRect()} class="crop-image-container" on:mousedown={onMouseDown} on:touchstart={onMouseDown} on:touchmove={onMouseMove} style:cursor={$cropperStore.cursor}>
         <img class="crop-image" src={imageSrc} alt="" on:load={onimageload}/>
         {#if $selection && $outputPct}
           <div class='crop-bg'>
@@ -182,7 +173,7 @@
             <ScreenReaderOnly id={movedescid}>arrows move crop selection, hold shift and/or cmd/alt for bigger steps</ScreenReaderOnly>
             {#if focusWithin}
               <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>
+              <ScreenReaderOnly arialive="polite">crop area is {Math.round($cropperStore.width)} pixels wide by {Math.round($cropperStore.height)} pixels tall</ScreenReaderOnly>
             {/if}
             <!-- svelte-ignore a11y-no-static-element-interactions -->
             <div class='selectionCorner tl'

package/dist/cropper/cropper.js

@@ -19,7 +19,50 @@ export class CropperStore extends Store {
         this.update(v => ({ ...v, width, height }));
     }
     updateTargetAspect(ar) {
-        this.update(v => ({ ...v, targetAspect: ar }));
+        this.update(v => {
+            if (v.selection) {
+                const selection = this.convertToPx(v.selection, v.width, v.height);
+                const selar = (selection.right - selection.left) / (selection.bottom - selection.top);
+                // adjust the aspect ratio to match the new aspect ratio, keep the center the same
+                // and preserve the pixel area of the selection. Compute new width and height
+                // from the original area and the new aspect ratio, then recenter the box.
+                const currWidth = selection.right - selection.left;
+                const currHeight = selection.bottom - selection.top;
+                const area = currWidth * currHeight;
+                const newWidth = Math.sqrt(area * ar);
+                const newHeight = Math.sqrt(area / ar);
+                const centerX = (selection.left + selection.right) / 2;
+                const centerY = (selection.top + selection.bottom) / 2;
+                selection.left = centerX - newWidth / 2;
+                selection.right = centerX + newWidth / 2;
+                selection.top = centerY - newHeight / 2;
+                selection.bottom = centerY + newHeight / 2;
+                // shrink the box until its width and height are less than the width and height of the drawing area
+                // maintaining the center
+                let selWidth = selection.right - selection.left;
+                let selHeight = selection.bottom - selection.top;
+                if (selWidth > v.width || selHeight > v.height) {
+                    const scale = Math.min(v.width / selWidth, v.height / selHeight);
+                    const cX = (selection.left + selection.right) / 2;
+                    const cY = (selection.top + selection.bottom) / 2;
+                    const halfW = (selWidth * scale) / 2;
+                    const halfH = (selHeight * scale) / 2;
+                    selection.left = cX - halfW;
+                    selection.right = cX + halfW;
+                    selection.top = cY - halfH;
+                    selection.bottom = cY + halfH;
+                }
+                // translate selection until all edges are within the drawing area
+                const dx = Math.max(0 - selection.left, Math.min(v.width - selection.right, 0));
+                const dy = Math.max(0 - selection.top, Math.min(v.height - selection.bottom, 0));
+                selection.left += dx;
+                selection.right += dx;
+                selection.top += dy;
+                selection.bottom += dy;
+                return { ...v, selection: this.convertToPct(selection, v.width, v.height), targetAspect: ar };
+            }
+            return { ...v, targetAspect: ar };
+        });
     }
     /**
      * The svelte component is responsible for making sure x and y are relative to the drawing area,

package/dist/iconpicker/FieldIconPicker.svelte

@@ -114,7 +114,7 @@
 </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' ? 'fa6-brands' : 'fa6-solid'}:${value.icon?.slice(3) ?? 'graduation-cap'}`}/>
+  <Icon icon={`${value.prefix === 'fab' ? 'fa7-brands' : 'fa7-solid'}:${value.icon?.slice(3) ?? 'graduation-cap'}`}/>
   <button type="button" {id} class="select-icon" on:click={() => { modalOpen = true }} aria-describedby={getDescribedBy([descid, messagesid, helptextid])} on:blur={onBlur}>Select New Icon</button>
   {#if modalOpen}
   <Modal>
@@ -142,7 +142,7 @@
               {#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' ? 'fa6-brands' : 'fa6-solid'}:${icon.class.slice(3)}`}/>
+                  <Icon icon={`${iconToPrefix[icon.class] === 'fab' ? 'fa7-brands' : 'fa7-solid'}:${icon.class.slice(3)}`}/>
                   <ScreenReaderOnly>{icon.label}</ScreenReaderOnly>
                 </div>
               {:else}