@dosgato/dialog 1.1.22 → 1.1.23

package/dist/Container.svelte.d.ts

@@ -18,7 +18,7 @@ declare const __propDef: {
     };
     slots: {
         default: {
-            messagesid: any;
+            messagesid: string | undefined;
             helptextid: string | undefined;
         };
     };

package/dist/FieldRadio.svelte

@@ -45,5 +45,5 @@ onMount(reactToChoices);
 
 <Field {path} {defaultValue} {conditional} {notNull} {number} {date} {datetime} {boolean} {serialize} {deserialize} let:value let:valid let:invalid let:onBlur let:onChange let:messages let:serialize let:deserialize>
   {@const _ = updateDeserialize(deserialize)}
-  <Switcher bind:id {path} class={className} name={path} {horizontal} {label} iptValue={value} {valid} {invalid} {required} {related} {extradescid} {helptext} {messages} on:change={onChange} {onBlur} choices={choices.map(c => ({ ...c, value: serialize(c.value) }))} />
+  <Switcher bind:id {path} class={className} name={finalPath} {horizontal} {label} iptValue={value} {valid} {invalid} {required} {related} {extradescid} {helptext} {messages} on:change={onChange} {onBlur} choices={choices.map(c => ({ ...c, value: serialize(c.value) }))} />
 </Field>

package/dist/FieldStandard.svelte.d.ts

@@ -34,7 +34,7 @@ declare const __propDef: {
             setVal: (val: string | number | boolean | object | Date | undefined, notDirty?: boolean | undefined) => void;
             valid: boolean;
             invalid: boolean;
-            messagesid: any;
+            messagesid: string | undefined;
             helptextid: string | undefined;
             serialize: (value: any) => string;
             deserialize: (value: string) => any;

package/dist/FieldText.svelte

@@ -8,6 +8,7 @@ export { className as class };
 export let id = undefined;
 export let path;
 export let label = '';
+export let placeholder = undefined;
 export let notNull = false;
 export let defaultValue = notNull ? '' : undefined;
 export let type = 'text';
@@ -24,7 +25,7 @@ export let helptext = undefined;
 </script>
 
 <FieldStandard bind:id {label} {path} {required} {defaultValue} {conditional} {related} {helptext} serialize={!notNull ? nullableSerialize : undefined} deserialize={!notNull ? nullableDeserialize : undefined} let:value let:valid let:invalid let:id let:onBlur let:onChange let:messagesid let:helptextid>
-  <Input bind:inputelement {type} {autocomplete} name={path} {value} {id} class="dialog-input {className}" {allowlastpass} {onChange} {onBlur} {valid} {invalid} {messagesid} {helptextid} {extradescid} {use}></Input>
+  <Input bind:inputelement {type} {placeholder} {autocomplete} name={path} {value} {id} class="dialog-input {className}" {allowlastpass} {onChange} {onBlur} {valid} {invalid} {messagesid} {helptextid} {extradescid} {use}></Input>
   {#if isNotNull(maxlength)}
     <MaxLength {value} {maxlength}/>
   {/if}

package/dist/FieldText.svelte.d.ts

@@ -6,6 +6,7 @@ declare const __propDef: {
         id?: string | undefined;
         path: string;
         label?: string;
+        placeholder?: string | undefined;
         notNull?: boolean;
         defaultValue?: any;
         type?: string;

package/dist/FieldTextArea.svelte

@@ -9,6 +9,7 @@ export { className as class };
 export let id = undefined;
 export let path;
 export let label = '';
+export let placeholder = undefined;
 export let notNull = false;
 export let defaultValue = notNull ? '' : undefined;
 export let maxlength = undefined;
@@ -23,7 +24,7 @@ export let helptext = undefined;
 </script>
 
 <FieldStandard bind:id {label} {path} {required} {defaultValue} {conditional} {related} {helptext} serialize={!notNull ? nullableSerialize : undefined} deserialize={!notNull ? nullableDeserialize : undefined} let:value let:valid let:invalid let:id let:onBlur let:onChange let:messagesid let:helptextid>
-  <textarea bind:this={inputelement} name={path} {value} {id} {rows} class="dialog-input dialog-textarea {className}" class:valid class:invalid aria-invalid={invalid} aria-describedby={getDescribedBy([messagesid, helptextid, extradescid])} on:change={onChange} on:blur={onBlur} on:keyup={onChange} on:paste use:passActions={use}></textarea>
+  <textarea bind:this={inputelement} {placeholder} name={path} {value} {id} {rows} class="dialog-input dialog-textarea {className}" class:valid class:invalid aria-invalid={invalid} aria-describedby={getDescribedBy([messagesid, helptextid, extradescid])} on:change={onChange} on:blur={onBlur} on:keyup={onChange} on:paste use:passActions={use}></textarea>
   {#if isNotNull(maxlength)}
     <MaxLength {value} {maxlength}/>
   {/if}

package/dist/FieldTextArea.svelte.d.ts

@@ -6,6 +6,7 @@ declare const __propDef: {
         id?: string | undefined;
         path: string;
         label?: string;
+        placeholder?: string | undefined;
         notNull?: boolean;
         defaultValue?: any;
         maxlength?: number | 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

@@ -7,6 +7,7 @@ declare const __propDef: {
         value: string;
         type?: string;
         allowlastpass?: boolean;
+        placeholder?: string | undefined;
         maxlength?: number | undefined;
         min?: string | Date | {
             toJSDate: () => Date;

package/dist/imageposition/FieldImagePosition.svelte

@@ -11,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) {
@@ -108,6 +107,10 @@ function onDialogOpen() {
         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>
@@ -117,17 +120,19 @@ function onDialogOpen() {
     {#if modalOpen}
       <Dialog size="large" title={label} on:escape={hideModal} continueText="Save" cancelText="Cancel" on:continue={() => onSave(setVal)} {labelid}>
         {@const _dialogopen = onDialogOpen()}
-        {#if info}
-          <section class="info">
-            {info}
-          </section>
-        {/if}
+        <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">
-          <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}>
@@ -146,6 +151,9 @@ function onDialogOpen() {
               {/each}
             </div>
           </div>
+          <div class="button-container">
+            <Button type="button" class="reset-position" on:click={resetPosition}>Reset Position</Button>
+          </div>
         </section>
       </Dialog>
     {/if}
@@ -153,6 +161,17 @@ function onDialogOpen() {
 </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;
@@ -163,6 +182,7 @@ function onDialogOpen() {
   .image-container {
     width: 75%;
     position: relative;
+    margin-bottom: 1em;
   }
   .crop-image {
     width: 100%;
@@ -192,6 +212,16 @@ function onDialogOpen() {
   .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

@@ -9,7 +9,6 @@ declare const __propDef: {
         required?: boolean;
         conditional?: boolean | undefined;
         helptext?: string | undefined;
-        info?: string | undefined;
         defaultValue?: ImagePositionOutput;
     };
     events: {

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.22",
+  "version": "1.1.23",
   "scripts": {
     "prepublishOnly": "svelte-package",
     "dev": "vite dev --force",
@@ -27,7 +27,7 @@
     "@iconify-icons/mdi": "^1.2.22",
     "@iconify-icons/ph": "^1.2.2",
     "@txstate-mws/svelte-components": "^1.6.2",
-    "@txstate-mws/svelte-forms": "^1.4.2",
+    "@txstate-mws/svelte-forms": "^1.5.5",
     "codemirror": "^6.0.1",
     "txstate-utils": "^1.8.0"
   },