@dosgato/dialog 1.1.5 → 1.1.7

package/dist/Button.svelte

@@ -12,7 +12,7 @@ let className = undefined;
 export { className as class };
 </script>
 
-<button {disabled} bind:this={element} {type} class="reset {className ?? ''}" class:cancel class:destructive class:secondary class:compact aria-describedby={describedby} on:click><Icon {icon} width="1.3em" /><span><slot /></span></button>
+<button {disabled} bind:this={element} {type} class="reset {className ?? ''}" class:cancel class:destructive class:secondary class:compact aria-describedby={describedby} on:click><Icon {icon} width="1.3em" inline /><span><slot /></span></button>
 
 <style>
   button.reset {

package/dist/Dialog.svelte

@@ -106,11 +106,6 @@ $: describedby = [title ? labelid : undefined, descid].filter(isNotBlank).join('
     max-width: 2000px;
   }
 
-  section {
-    container-type: inline-size;
-    container-name: dosgato-dialog-section
-  }
-
   @media (max-width: 430px) {
     section.tiny, section.small, section.normal, section.large, section.xl {
       width: 95vw;
@@ -172,25 +167,17 @@ $: describedby = [title ? labelid : undefined, descid].filter(isNotBlank).join('
     border-bottom: 0px !important;
   }
 
-  footer.actions {
-    container-type: inline-size;
-    container-name: dosgato-dialog-actions
-  }
-
   footer.actions :global(.prev) {
     margin-right: auto;
   }
 
-  @container dosgato-dialog-actions (max-width: 450px) {
-    footer.actions :global(button span.prev-next) {
-      display: none;
-    }
-  }
-
-  @container dosgato-dialog-section (max-width: 350px) {
+  @media (max-width: 475px) {
     footer.actions {
       padding: 0.5em;
     }
+    footer.actions :global(button span.prev-next) {
+      display: none;
+    }
   }
 
   .header-buttons {

package/dist/FieldChooserLink.svelte

@@ -170,7 +170,7 @@ $: void updateSelected($value);
         <Details item={selectedAsset} singleLine />
         {#if !urlEntry}
           <button type="button" on:click={show} aria-describedby={getDescribedBy([descid, messagesid, helptextid, extradescid])}>
-            <Icon icon={arrowClockwiseFill} /> Replace
+            <Icon icon={arrowClockwiseFill} inline /> Replace
           </button>
           <button type="button" on:click={() => { selectedAsset = undefined; setVal(undefined) }} aria-describedby={getDescribedBy([descid, messagesid, helptextid, extradescid])}>
             <Icon icon={deleteOutline} inline /> Remove
@@ -242,6 +242,7 @@ $: void updateSelected($value);
     display: flex;
     align-items: flex-start;
     margin-top: 0.2em;
+    gap: 0.3em;
   }
   :global([data-eq~="400px"]) .dialog-chooser-entry {
     flex-direction: column;
@@ -252,7 +253,7 @@ $: void updateSelected($value);
     border: 0;
     background-color: var(--dg-button-bg, #501214);
     color: var(--dg-button-text, #fff);
-    padding: 0.5em 1em;
+    padding: 0.4em 1em;
     font-size: 0.8em;
   }
   .dialog-chooser-entry-input {
@@ -260,7 +261,6 @@ $: void updateSelected($value);
     flex-grow: 1;
   }
   :global([data-eq~="400px"]) .dialog-chooser-entry-input {
-    margin-bottom: 0.2em;
     width: 100%;
   }
   .dialog-chooser-entry-input input {

package/dist/Icon.svelte

@@ -3,8 +3,7 @@
   implementation of icons that adds a hidden label that can be read by screen readers. Useful for situations where aria-label
   isn't supported, to provide in kind icon support, while still making use of aria attributes regardless of support.
 -->
-<script>import Icon from '@iconify/svelte/dist/OfflineIcon.svelte';
-import Tooltip from './Tooltip.svelte';
+<script>import Tooltip from './Tooltip.svelte';
 export let icon;
 /** Label used in a `<ScreenReaderOnly>`. */
 export let hiddenLabel = undefined;
@@ -15,10 +14,29 @@ export let tooltip = undefined;
 // If neither is defined, set both to 1em
 if (!width && !height)
     width = height = '1em';
+height ??= width;
 </script>
 
 {#if icon}
   <Tooltip tip={tooltip} top>
-    <Icon {icon} {inline} {width} {height} aria-hidden={!hiddenLabel} aria-label={hiddenLabel}/>
+    <svg role="img" viewBox="{icon.left ?? 0} {icon.top ?? 0} {icon.width ?? 256} {icon.height ?? 256}" class:vFlip={icon.vFlip} class:hFlip={icon.hFlip} class:inline {width} {height} aria-hidden={!hiddenLabel} aria-label={hiddenLabel} xmlns="http://www.w3.org/2000/svg">
+      {@html icon.body}
+    </svg>
   </Tooltip>
 {/if}
+
+<style>
+  svg.inline {
+    vertical-align: -0.125em;
+  }
+  svg.vFlip {
+    transform: scale(1, -1);
+  }
+  svg.hFlip {
+    transform: scale(-1, 1);
+  }
+  svg.hFlip.vFlip {
+    transform: scale(-1, -1);
+  }
+
+</style>

package/dist/InlineMessage.svelte

@@ -5,6 +5,7 @@
 import checkCircleOutline from '@iconify-icons/mdi/check-circle-outline.js';
 import informationOutline from '@iconify-icons/mdi/information-outline.js';
 import closeOctagonOutline from '@iconify-icons/mdi/close-octagon-outline.js';
+import { htmlEncode } from 'txstate-utils';
 import Icon from './Icon.svelte';
 export let message;
 const icons = {
@@ -24,9 +25,34 @@ const ariaLables = {
 }
 $: hiddenLabel = ariaLables[message.type] ?? 'Error'
 */
+function addMarkup(msg) {
+    const lines = msg.split(/\r?\n/);
+    const output = [];
+    for (const line of lines) {
+        const splitLinks = line.split(/((?:\[[^\]]+\])?\([^)]+\))/);
+        const replaced = [];
+        for (const segment of splitLinks) {
+            const m = segment.match(/(?:\[([^\]]+)\])?\(([^)]+)\)/);
+            if (m) {
+                try {
+                    const url = new URL(m[2]);
+                    replaced.push('<a href="' + htmlEncode(url.toString()) + '" target="_blank">' + htmlEncode(m[1] || m[2]) + '</a>');
+                }
+                catch {
+                    replaced.push(htmlEncode(m[0]));
+                }
+            }
+            else {
+                replaced.push(htmlEncode(segment));
+            }
+        }
+        output.push(replaced.join(''));
+    }
+    return output.join('<br>');
+}
 </script>
 
-<div class={message.type}><Icon width='1.5em' {icon} hiddenLabel='Error' /><span>{message.message}</span></div>
+<div class={message.type}><Icon width='1.5em' {icon} inline hiddenLabel='Error' /><span>{@html addMarkup(message.message)}</span></div>
 
 <style>
   div {
@@ -52,5 +78,8 @@ $: hiddenLabel = ariaLables[message.type] ?? 'Error'
     background-color: #218739;
     color: white;
   }
+  div :global(a) {
+    color: inherit;
+  }
 
 </style>

package/dist/chooser/Chooser.svelte

@@ -84,6 +84,16 @@ onMount(async () => {
 });
 const previewId = randomid();
 let thumbnailExpanded = false;
+function iconForItem(item) {
+    if (item.icon) {
+        return item.icon;
+    }
+    else {
+        return {
+            icon: item.type === 'asset' ? iconForMime(item.mime) : (item.type === 'folder' ? (item.open ? folderNotchOpen : folderIcon) : browserIcon)
+        };
+    }
+}
 </script>
 
 <Dialog size="xl" ignoreTabs title={label} on:escape continueText="Choose" disabled={!$preview && required} cancelText="Cancel">
@@ -96,7 +106,7 @@ let thumbnailExpanded = false;
     <section class="dialog-chooser-chooser">
       {#if $store.initialized}
         <Tree headers={[
-          { label: 'Path', id: 'name', grow: 4, icon: item => ({ icon: item.type === 'asset' ? iconForMime(item.mime) : (item.type === 'folder' ? (item.open ? folderNotchOpen : folderIcon) : browserIcon) }), get: 'name' }
+          { label: 'Path', id: 'name', grow: 4, icon: item => iconForItem(item), get: 'name' }
         ]} singleSelect store={treeStore} on:deselect={onDeselect} on:choose={onChoose} />
       {/if}
     </section>

package/dist/chooser/ChooserAPI.d.ts

@@ -1,3 +1,4 @@
+import type { IconifyIcon } from '@iconify/svelte';
 export declare const CHOOSER_API_CONTEXT: {};
 export type ChooserType = 'asset' | 'page';
 export type AnyItem = Asset | Folder | Page;
@@ -76,6 +77,10 @@ interface Item {
      * user's interaction.
      */
     url: string;
+    icon?: {
+        icon: IconifyIcon;
+        label?: string;
+    };
 }
 export interface Folder extends Item {
     type: 'folder';

package/dist/cropper/FieldCropper.svelte

@@ -1,4 +1,5 @@
 <script>import { resize, ScreenReaderOnly } from '@txstate-mws/svelte-components';
+import { onMount } from 'svelte';
 import { isNotBlank, randomid } from 'txstate-utils';
 import FieldStandard from '../FieldStandard.svelte';
 import { CropperStore } from './cropper';
@@ -20,7 +21,11 @@ function init(spValue, spSetVal) {
     value = spValue;
 }
 $: store.setOutput(value);
-$: setVal?.($output);
+function reactToOutput(...args) {
+    if (mounted)
+        setVal?.($output);
+}
+$: reactToOutput($output);
 let rect;
 function updateRect(..._) {
     if (!container)
@@ -101,6 +106,10 @@ function onKeyDown(type) {
         }
     };
 }
+let mounted = false;
+onMount(() => {
+    mounted = true;
+});
 $: updateRect(container);
 const descid = randomid();
 const movedescid = randomid();

package/dist/iconpicker/FieldIconPicker.svelte

@@ -159,7 +159,7 @@ function onKeyDown(e) {
     border: 0px;
     background-color: var(--dg-button-bg, #501214);
     color: var(--dg-button-text, #fff);
-    padding: 0.5em 1em;
+    padding: 0.4em 1em;
     font-size: 0.8em;
   }
   section {

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.5",
+  "version": "1.1.7",
   "scripts": {
     "prepublishOnly": "svelte-package",
     "dev": "vite dev --force",
@@ -23,7 +23,7 @@
     "@codemirror/lang-javascript": "^6.1.7",
     "@codemirror/lang-css": "^6.2.1",
     "@codemirror/lang-html": "^6.4.3",
-    "@iconify/svelte": "^3.0.0",
+    "@iconify/svelte": "^3.1.6",
     "@iconify-icons/mdi": "^1.2.22",
     "@iconify-icons/ph": "^1.2.2",
     "@txstate-mws/svelte-components": "^1.5.5",