@dosgato/dialog 1.1.19 → 1.1.21

package/dist/Container.svelte

@@ -60,10 +60,10 @@ onDestroy(() => {
     {#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>
+      <div use:resize={{ debounce: 10 }} on:resize={setNeedsShowHelp} class="dialog-field-help" class:needsShowHelp class:expanded={showhelp} on:click={() => { if (needsShowHelp) showhelp = !showhelp }}>
+        <span bind:this={helpelement} id={helptextid}>{@html helptext}</span>
         {#if needsShowHelp}
-          <button type="button" class="dialog-field-help-expand">Show {#if showhelp}Less{:else}More{/if}<ScreenReaderOnly>, ignore this, the help text it controls will be read to you as input description</ScreenReaderOnly></button>
+          <button type="button" class="dialog-field-help-expand">Show {#if showhelp}Less{:else}More{/if}<ScreenReaderOnly>, ignore this, the help text it controls will be fully read to you as input description</ScreenReaderOnly></button>
         {/if}
       </div>
     {/if}

package/dist/FieldChoices.svelte

@@ -49,7 +49,7 @@ function onChangeCheckbox(setVal, choice, included) {
 }
 const descid = randomid();
 function reactToChoices(..._) {
-    const choiceSet = new Set(choices?.map(c => c.value));
+    const choiceSet = new Set(choices?.filter(c => !c.disabled).map(c => c.value));
     const val = get($store, finalPath);
     const filtered = val?.filter(v => choiceSet.has(v));
     if (filtered?.length !== val?.length)

package/dist/FieldRadio.svelte

@@ -1,6 +1,6 @@
 <script>import { FORM_CONTEXT, FORM_INHERITED_PATH, Field } from '@txstate-mws/svelte-forms';
 import { getContext, onMount } from 'svelte';
-import { get, isNotBlank } from 'txstate-utils';
+import { equal, get, isNotBlank } from 'txstate-utils';
 import Switcher from './Switcher.svelte';
 let className = '';
 export { className as class };
@@ -36,7 +36,7 @@ async function reactToChoices(..._) {
         return await store.setField(finalPath, finalDeserialize(''));
     }
     const val = get($store.data, finalPath);
-    if (!choices.some(o => o.value === finalDeserialize(val)))
+    if (!choices.some(o => equal(o.value, val)))
         await store.setField(finalPath, notNull ? defaultValue : finalDeserialize(''));
 }
 $: reactToChoices(choices).catch(console.error);

package/dist/cropper/FieldCropper.svelte

@@ -1,5 +1,5 @@
 <script>import { resize, ScreenReaderOnly } from '@txstate-mws/svelte-components';
-import { onMount } from 'svelte';
+import { onMount, tick } from 'svelte';
 import { isNotBlank, randomid } from 'txstate-utils';
 import FieldStandard from '../FieldStandard.svelte';
 import { CropperStore } from './cropper';
@@ -16,6 +16,7 @@ const store = new CropperStore({ width: 0, height: 0, minSelection, targetAspect
 const { output, outputPct, selection } = store;
 let setVal;
 let value;
+const initialAspectRatio = selectionAspectRatio;
 function init(spValue, spSetVal) {
     setVal = spSetVal;
     value = spValue;
@@ -114,6 +115,18 @@ $: updateRect(container);
 const descid = randomid();
 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;
+    }
+}
+$: void reactToAspectRatio(selectionAspectRatio);
 </script>
 
 <svelte:window on:mousemove={onMouseMove} on:mouseup={onMouseUp} on:touchend={onMouseUp} on:touchcancel={onMouseUp} />

package/dist/cropper/cropper.d.ts

@@ -49,6 +49,7 @@ export declare class CropperStore extends Store<ICropperStore> {
     constructor(initialValue: Omit<ICropperStore, 'cursor'>);
     setOutput(selection?: CropOutput): void;
     updateDimensions(width: number, height: number): void;
+    updateTargetAspect(ar: number): void;
     /**
      * The svelte component is responsible for making sure x and y are relative to the drawing area,
      * e.g. (0, 0) is the top left corner of the drawing area

package/dist/cropper/cropper.js

@@ -18,6 +18,9 @@ export class CropperStore extends Store {
     updateDimensions(width, height) {
         this.update(v => ({ ...v, width, height }));
     }
+    updateTargetAspect(ar) {
+        this.update(v => ({ ...v, targetAspect: ar }));
+    }
     /**
      * The svelte component is responsible for making sure x and y are relative to the drawing area,
      * e.g. (0, 0) is the top left corner of the drawing area

package/dist/iconpicker/FieldIconPicker.svelte

@@ -221,7 +221,7 @@ function onKeyDown(e) {
       border-radius: 10px;
       border: 1px solid #999;
       height: 30px;
-      padding: 0px 0px 0px 30px;
+      padding: 0.5em;
       font-family: 'Nunito Sans', sans-serif !important;
   }
 
@@ -234,18 +234,33 @@ function onKeyDown(e) {
 
   /* Styles for the icon picker grid */
 
-  .icon-picker-items{
+  .icon-picker-items {
     margin-top: 5px;
     padding: 5px;
+    display: grid;
+    grid-template-columns: repeat(7, 1fr);
+    row-gap: 1em;
+    column-gap: 1em;
+    justify-items: center;
+    align-items: center;
+  }
+
+  @media (max-width: 800px) {
+    .icon-picker-items {
+      grid-template-columns: repeat(5, 1fr);
+    }
+  }
+
+  @media (max-width: 500px) {
+    .icon-picker-items {
+      grid-template-columns: repeat(4, 1fr);
+    }
   }
 
 .icon-picker-item {
-    float: left;
-    margin: 0px 11px 12px 11px;
     text-align: center;
     cursor: pointer;
     color: inherit;
-    width: 10%;
     position: relative;
     font-size: 28px;
 }

package/dist/imageposition/FieldImagePosition.svelte

@@ -0,0 +1,193 @@
+<script>import { isNotBlank, randomid } from 'txstate-utils';
+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;
+export let imageSrc;
+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) {
+    if (v) {
+        initialVal = v;
+    }
+    else {
+        initialVal = defaultValue;
+    }
+}
+const boxes = [];
+const descid = randomid();
+const labelid = randomid();
+let modalOpen = false;
+function showModal() {
+    modalOpen = true;
+}
+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();
+}
+function onSelectBox(newX, newY) {
+    x = newX;
+    y = newY;
+    boxes[x + y * 5].focus();
+}
+function onKeyDown(e) {
+    if (modifierKey(e))
+        return;
+    if (e.key === 'ArrowDown') {
+        e.preventDefault();
+        y = Math.min(y + 1, 4);
+    }
+    else if (e.key === 'ArrowUp') {
+        e.preventDefault();
+        y = Math.max(y - 1, 0);
+    }
+    else if (e.key === 'ArrowRight') {
+        e.preventDefault();
+        x = Math.min(x + 1, 4);
+    }
+    else if (e.key === 'ArrowLeft') {
+        e.preventDefault();
+        x = Math.max(0, x - 1);
+    }
+    boxes[y + x * 5].focus();
+}
+const positionText = {
+    0: {
+        0: 'Top Left Corner',
+        1: 'Upper Left',
+        2: 'Middle Left',
+        3: 'Lower Left',
+        4: 'Bottom Left Corner'
+    },
+    1: {
+        0: 'Top Left of Center',
+        1: 'Upper Left of Center',
+        2: 'Middle Left of Center',
+        3: 'Below Left of Center',
+        4: 'Bottom, Left of Center'
+    },
+    2: {
+        0: 'Top Center',
+        1: 'Upper Center',
+        2: 'Dead Center',
+        3: 'Below Center',
+        4: 'Bottom Center'
+    },
+    3: {
+        0: 'Top, Right of Center',
+        1: 'Upper Right of Center',
+        2: 'Middle Right of Center',
+        3: 'Below Right of Center',
+        4: 'Bottom, Right of Center'
+    },
+    4: {
+        0: 'Top Right Corner',
+        1: 'Upper Right',
+        2: 'Middle Right',
+        3: 'Lower Right',
+        4: 'Bottom Right Corner'
+    }
+};
+</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}
+                {/each}
+              </div>
+            </div>
+          </section>
+        {/if}
+      </Dialog>
+    {/if}
+  {/if}
+</FieldStandard>
+
+<style>
+  section.position {
+    border: 1px dashed #767676;
+    padding: 1em;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+  }
+  .image-container {
+    width: 75%;
+    position: relative;
+  }
+  .crop-image {
+    width: 100%;
+    display: block;
+  }
+  .overlay {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    display: grid;
+    grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
+    grid-template-rows: 1fr 1fr 1fr 1fr 1fr;
+  }
+  .overlay .box {
+    background-color: rgba(0, 0, 0, 0.5);
+    border-bottom: 1px dashed white;
+    border-right: 1px dashed white;
+  }
+  .overlay .box[aria-checked="true"] {
+    background-color: rgba(255, 255, 0, 0.5);
+  }
+  .overlay .box.side {
+    border-right-width: 0;
+  }
+  .overlay .box.bottom {
+    border-bottom-width: 0;
+  }
+
+</style>
+

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

@@ -0,0 +1,25 @@
+import { SvelteComponentTyped } from "svelte";
+import { type ImagePositionOutput } from '..';
+declare const __propDef: {
+    props: {
+        id?: string | undefined;
+        path: string;
+        imageSrc: string | undefined;
+        label?: string | undefined;
+        required?: boolean | undefined;
+        conditional?: boolean | undefined;
+        helptext?: string | undefined;
+        info?: string | undefined;
+        defaultValue?: ImagePositionOutput | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type FieldImagePositionProps = typeof __propDef.props;
+export type FieldImagePositionEvents = typeof __propDef.events;
+export type FieldImagePositionSlots = typeof __propDef.slots;
+export default class FieldImagePosition extends SvelteComponentTyped<FieldImagePositionProps, FieldImagePositionEvents, FieldImagePositionSlots> {
+}
+export {};

package/dist/imageposition/index.d.ts

@@ -0,0 +1,2 @@
+export { default as FieldImagePosition } from './FieldImagePosition.svelte';
+export * from './position.js';

package/dist/imageposition/index.js

@@ -0,0 +1,2 @@
+export { default as FieldImagePosition } from './FieldImagePosition.svelte';
+export * from './position.js';

package/dist/imageposition/position.d.ts

@@ -0,0 +1,4 @@
+export interface ImagePositionOutput {
+    x: number;
+    y: number;
+}

package/dist/imageposition/position.js

@@ -0,0 +1 @@
+export {};

package/dist/index.d.ts

@@ -42,3 +42,4 @@ export * from './helpers.js';
 export * from './tree/index.js';
 export * from './cropper/index.js';
 export * from './code/index.js';
+export * from './imageposition/index.js';

package/dist/index.js

@@ -42,3 +42,4 @@ export * from './helpers.js';
 export * from './tree/index.js';
 export * from './cropper/index.js';
 export * from './code/index.js';
+export * from './imageposition/index.js';

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@dosgato/dialog",
   "description": "A component library for building forms that edit a JSON document.",
-  "version": "1.1.19",
+  "version": "1.1.21",
   "scripts": {
     "prepublishOnly": "svelte-package",
     "dev": "vite dev --force",
@@ -26,7 +26,7 @@
     "@iconify/svelte": "^3.1.6",
     "@iconify-icons/mdi": "^1.2.22",
     "@iconify-icons/ph": "^1.2.2",
-    "@txstate-mws/svelte-components": "^1.5.5",
+    "@txstate-mws/svelte-components": "^1.6.2",
     "@txstate-mws/svelte-forms": "^1.4.2",
     "codemirror": "^6.0.1",
     "txstate-utils": "^1.8.0"