@dosgato/dialog 1.2.3 → 1.2.5

package/dist/FieldMultiple.svelte

@@ -1,10 +1,10 @@
 <script context="module">export const DG_DIALOG_FIELD_MULTIPLE = {};
 function noOp(..._) { return ''; }
 </script>
-<script>import caretCircleDown from '@iconify-icons/ph/caret-circle-down';
-import caretCircleUp from '@iconify-icons/ph/caret-circle-up';
+<script>import caretCircleDown from '@iconify-icons/ph/caret-circle-down-fill';
+import caretCircleUp from '@iconify-icons/ph/caret-circle-up-fill';
 import plusCircleLight from '@iconify-icons/ph/plus-circle-light';
-import xCircle from '@iconify-icons/ph/x-circle';
+import xCircle from '@iconify-icons/ph/x-circle-fill';
 import { AddMore, FORM_CONTEXT, FORM_INHERITED_PATH } from '@txstate-mws/svelte-forms';
 import { derivedStore } from '@txstate-mws/svelte-store';
 import { getContext, setContext } from 'svelte';
@@ -132,6 +132,9 @@ $: messages = compact ? $messageStore : [];
     font-size: 1.3em;
     color: black;
   }
+  .dialog-multiple-buttons .dialog-multiple-delete {
+    color: var(--dg-danger-bg, #9a3332);
+  }
   .dialog-multiple-buttons button:disabled {
     color: #6d6d6d;
   }

package/dist/colorpicker/FieldColorPicker.svelte

@@ -1,8 +1,9 @@
 <script>import { FORM_CONTEXT, FORM_INHERITED_PATH } from '@txstate-mws/svelte-forms';
 import { getContext, onMount } from 'svelte';
-import { get, isNotBlank, randomid, shouldUseWhiteText } from 'txstate-utils';
+import { get, isNotBlank, isNotNull, keyby, randomid } from 'txstate-utils';
 import { Radio } from '..';
 import FieldStandard from '../FieldStandard.svelte';
+import { ScreenReaderOnly } from '@txstate-mws/svelte-components';
 export let id = undefined;
 let className = '';
 export { className as class };
@@ -19,6 +20,7 @@ const groupid = randomid();
 const store = getContext(FORM_CONTEXT);
 const inheritedPath = getContext(FORM_INHERITED_PATH);
 const finalPath = [inheritedPath, path].filter(isNotBlank).join('.');
+$: colorsByValue = keyby(options, 'value');
 async function reactToOptions(..._) {
     const val = get($store.data, finalPath);
     if (!val)
@@ -38,22 +40,31 @@ onMount(reactToOptions);
       {#if addAllOption}
         <label for={`${groupid}.alt`} class="colorsel alternating">
           <Radio id={`${groupid}.alt`} name={groupid} value="alternating" selected={value === 'alternating'} {onChange} {onBlur} {helptextid}/>
-          <span class="alternating-bg">
-            {#each options as option (option.value)}
-              <span style:background-color={option.color}></span>
-            {/each}
-          </span>
-          <span class="picker-text">Alternating</span>
+          <div class="picker-text">
+            <ScreenReaderOnly>Alternating</ScreenReaderOnly>
+            <div class="alternating-bg">
+              {#each options as option (option.value)}
+                <div style:background-color={option.color} style:flex-basis={`calc(100% / ${options.length})`}></div>
+              {/each}
+            </div>
+          </div>
         </label>
       {/if}
       {#each options as option, idx (option.value) }
         {@const radioid = `${groupid}.${idx}`}
-        <label for={radioid} class="colorsel">
+        <label for={radioid} class="colorsel" title={option.name || option.value}>
           <Radio id={radioid} name={groupid} value={option.value} selected={value === option.value} {onChange} {onBlur} {helptextid}/>
-          <span class="picker-text" style:background-color={option.color} class:dark={shouldUseWhiteText(option.color)}>{option.name || option.value}</span>
+          <div class="picker-text" style:background-color={option.color}>
+            <ScreenReaderOnly>{option.name || option.value}</ScreenReaderOnly>
+          </div>
         </label>
       {/each}
     </div>
+    {#if options.length && isNotNull(get($store.data, finalPath))}
+      <div>
+        Selected Color: <span class="selected-color">{get($store.data, finalPath) === 'alternating' ? 'Alternating' : (colorsByValue[get($store.data, finalPath)]?.name ?? get($store.data, finalPath))}</span>
+      </div>
+    {/if}
   </div>
 </FieldStandard>
 
@@ -63,21 +74,11 @@ onMount(reactToOptions);
     container-name: color-picker-container;
   }
   .color-container {
-    display: grid;
-    grid-gap: 10px;
-    grid-template-columns: 1fr 1fr 1fr 1fr;
-  }
-  @container color-picker-container (max-width: 600px) {
-    .color-container {
-      grid-template-columns: 1fr 1fr 1fr;
-    }
-  }
-  @container color-picker-container (max-width: 350px) {
-    .color-container {
-      grid-template-columns: 1fr 1fr;
-    }
+    display: flex;
+    flex-wrap: wrap;
+    gap: 1em;
+    margin-bottom: 1em;
   }
-
   label.colorsel :global(input[type="radio"]) {
     border: 0;
     clip: rect(0 0 0 0);
@@ -88,54 +89,33 @@ onMount(reactToOptions);
     position: absolute;
     width: 1px;
   }
-
-  label.colorsel :global(input[type="radio"] + span) {
-    display: inline-block;
-    padding: 1rem;
-    width: 100%;
+  label.colorsel :global(input[type="radio"] + div.picker-text) {
+    position: relative;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    width: 50px;
+    height: 50px;
+    border-radius: 100%;
     text-align: center;
     white-space: nowrap;
     border: 1px solid #D1D1D1;
   }
 
-  label.colorsel :global(input[type="radio"]:checked + span) {
+  label.colorsel :global(input[type="radio"]:checked + div.picker-text) {
     outline: 5px solid #93BBC4;
   }
 
-  label.colorsel :global(input[type="radio"]:focus + span) {
+  label.colorsel :global(input[type="radio"]:focus + div.picker-text) {
     outline: 5px solid blue;
   }
-
-  label.colorsel.alternating {
-    position: relative;
+  label.colorsel.alternating .picker-text {
+    overflow: hidden;
   }
-
-  label.colorsel.alternating span.alternating-bg {
+  label.colorsel.alternating .picker-text .alternating-bg {
     display: flex;
-    padding: 0;
     height: 100%;
-  }
-
-  label.colorsel.alternating span.alternating-bg span {
     width: 100%;
   }
 
-  label.colorsel.alternating span.picker-text {
-    position: absolute;
-    left: 50%;
-    top: 50%;
-    transform: translate(-50%, -50%);
-  }
-
-  label .picker-text {
-    font-weight: bold;
-    letter-spacing: 0.5px;
-    color: black;
-    text-shadow: 1px 1px 1px rgba(255, 255, 255, 0.6), 1px -1px 1px rgba(255, 255, 255, 0.6), -1px 1px 1px rgba(255, 255, 255, 0.6), -1px -1px 1px rgba(255, 255, 255, 0.6);
-  }
-  label .picker-text.dark, label.alternating .picker-text {
-    color: white;
-    text-shadow: 1px 1px 1px #222, 1px -1px 1px #222, -1px 1px 1px #222, -1px -1px 1px #222;
-  }
-
 </style>

package/dist/cropper/FieldCropper.svelte

@@ -130,6 +130,22 @@ async function reactToAspectRatio(ar) {
     }
 }
 $: void reactToAspectRatio(selectionAspectRatio);
+let initialLoad = true;
+let initialVal;
+let srcChanged = false;
+async function onimageload(e) {
+    if (initialLoad) {
+        initialVal = e.target.src;
+        initialLoad = false;
+    }
+    else {
+        if (e.target.src !== initialVal || srcChanged) {
+            await tick();
+            store.maximize();
+            srcChanged = true;
+        }
+    }
+}
 </script>
 
 <svelte:window on:mousemove={onMouseMove} on:mouseup={onMouseUp} on:touchend={onMouseUp} on:touchcancel={onMouseUp} />
@@ -146,7 +162,7 @@ $: void reactToAspectRatio(selectionAspectRatio);
       </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}>
-        <img class="crop-image" src={imageSrc} alt="" />
+        <img class="crop-image" src={imageSrc} alt="" on:load={onimageload}/>
         {#if $selection && $outputPct}
           <div class='crop-bg'>
             <img class='crop-image clipped' src={imageSrc} alt="" style:clip-path="polygon({$outputPct.left}% {$outputPct.top}%, {100 - $outputPct.right}% {$outputPct.top}%, {100 - $outputPct.right}% {100 - $outputPct.bottom}%, {$outputPct.left}% {100 - $outputPct.bottom}%, {$outputPct.left}% {$outputPct.top}%)" />