@dosgato/dialog 0.0.1

package/ButtonGroup.svelte

@@ -0,0 +1,74 @@
+<script >import { modifierKey } from '@txstate-mws/svelte-components';
+import { createEventDispatcher } from 'svelte';
+export let name = undefined;
+export let choices;
+export let value = choices[0].value;
+export let groupid = undefined;
+export let messagesid = undefined;
+export let ariaControls = undefined;
+export let disabled = false;
+export let valid = false;
+export let invalid = false;
+const dispatch = createEventDispatcher();
+const elements = [];
+function update(newVal) {
+    value = newVal;
+    dispatch('change', value);
+}
+function onClick(choice, idx) {
+    return () => {
+        update(choice.value);
+        elements[idx].focus();
+    };
+}
+function onKeyDown(choice, idx) {
+    return e => {
+        if (modifierKey(e))
+            return;
+        if ((e.key === 'ArrowRight' || e.key === 'ArrowDown') && idx < choices.length - 1) {
+            e.preventDefault();
+            e.stopPropagation();
+            update(choices[idx + 1].value);
+            elements[idx + 1].focus();
+        }
+        else if ((e.key === 'ArrowLeft' || e.key === 'ArrowUp') && idx > 0) {
+            e.preventDefault();
+            e.stopPropagation();
+            update(choices[idx - 1].value);
+            elements[idx - 1].focus();
+        }
+    };
+}
+</script>
+
+{#if name}
+  <input type="hidden" {name} {value}>
+{/if}
+<ul class="dialog-btn-group" class:disabled class:valid class:invalid aria-disabled={disabled} role="radiogroup" aria-labelledby={groupid} on:blur>
+  {#each choices as choice, i}
+    {@const selected = choice.value === value}
+    <li bind:this={elements[i]} role="radio" class:selected tabindex={selected ? 0 : -1} aria-controls={ariaControls} on:click={onClick(choice, i)} on:keydown={onKeyDown(choice, i)} on:blur aria-describedby="{groupid} {messagesid}">{choice.label || choice.value}</li>
+  {/each}
+</ul>
+
+<style>
+  .dialog-btn-group {
+    display: flex;
+    border-radius: 0.25em;
+    border: 1px solid var(--dialog-btngrp-active-bg, #333333);
+    overflow: hidden;
+    padding: 0;
+    margin: 0;
+    list-style: none;
+  }
+  li {
+    cursor: pointer;
+    padding: 0.4em .8em;
+    background-color: var(--dialog-btngrp-text, transparent);
+    color: var(--dialog-btngrp-bg, inherit);
+  }
+  .selected {
+    background-color: var(--dialog-btngrp-active-bg, #333333);
+    color: var(--dialog-btngrp-active-text, white);
+  }
+</style>

package/ButtonGroup.svelte.d.ts

@@ -0,0 +1,28 @@
+import { SvelteComponentTyped } from "svelte";
+import { type PopupMenuItem } from '@txstate-mws/svelte-components';
+declare const __propDef: {
+    props: {
+        name?: string;
+        choices: PopupMenuItem[];
+        value?: string;
+        groupid?: string | undefined;
+        messagesid?: string | undefined;
+        ariaControls?: string | undefined;
+        disabled?: boolean;
+        valid?: boolean;
+        invalid?: boolean;
+    };
+    events: {
+        blur: FocusEvent;
+        change: CustomEvent<any>;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export declare type ButtonGroupProps = typeof __propDef.props;
+export declare type ButtonGroupEvents = typeof __propDef.events;
+export declare type ButtonGroupSlots = typeof __propDef.slots;
+export default class ButtonGroup extends SvelteComponentTyped<ButtonGroupProps, ButtonGroupEvents, ButtonGroupSlots> {
+}
+export {};

package/Checkbox.svelte

@@ -0,0 +1,68 @@
+<script >import { isNotBlank } from 'txstate-utils';
+export let id = undefined;
+export let name;
+export let value;
+export let onChange = undefined;
+export let onBlur = undefined;
+export let descid = undefined;
+export let messagesid = undefined;
+export let disabled = false;
+export let valid = false;
+export let invalid = false;
+$: descby = [descid, messagesid].filter(isNotBlank).join(' ');
+</script>
+
+<input {id} type="checkbox" {name} class:valid class:invalid {disabled} aria-describedby={descby} bind:checked={value} on:change={onChange} on:blur={onBlur}>
+
+<style>
+input, input:before, input:after {
+  box-sizing: border-box;
+}
+
+input[type="checkbox"] {
+  -webkit-appearance: none;
+  appearance: none;
+  background-color: var(--dialog-checkbox-bg, #ffffff);
+  margin: 0;
+
+  font: inherit;
+  color: var(--dialog-checkbox-border, currentColor);
+  width: 1.15em;
+  height: 1.15em;
+  border: 0.15em solid currentColor;
+  border-radius: 0.15em;
+  transform: translateY(-0.075em);
+
+  display: inline-grid;
+  place-content: center;
+}
+
+input[type="checkbox"]::before {
+  content: "";
+  width: 0.65em;
+  height: 0.65em;
+  clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%);
+  transform: scale(0);
+  transform-origin: bottom left;
+  transition: 120ms transform ease-in-out;
+  box-shadow: inset 1em 1em var(--dialog-checkbox-color, currentColor);
+  /* Windows High Contrast Mode */
+  background-color: CanvasText;
+}
+
+input[type="checkbox"]:checked::before {
+  transform: scale(1);
+}
+
+input[type="checkbox"]:focus {
+  outline: max(2px, 0.15em) solid var(--dialog-checkbox-focus, #4D90FE);
+  outline-offset: max(2px, 0.15em);
+}
+
+input[type="checkbox"]:disabled {
+  --dialog-checkbox-color: var(--dialog-checkbox-disabled, #999999);
+
+  color: var(--dialog-checkbox-color);
+  cursor: not-allowed;
+}
+</style>

package/Checkbox.svelte.d.ts

@@ -0,0 +1,25 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        id?: string | undefined;
+        name: string;
+        value: boolean;
+        onChange?: any;
+        onBlur?: any;
+        descid?: string | undefined;
+        messagesid?: string | undefined;
+        disabled?: boolean;
+        valid?: boolean;
+        invalid?: boolean;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export declare type CheckboxProps = typeof __propDef.props;
+export declare type CheckboxEvents = typeof __propDef.events;
+export declare type CheckboxSlots = typeof __propDef.slots;
+export default class Checkbox extends SvelteComponentTyped<CheckboxProps, CheckboxEvents, CheckboxSlots> {
+}
+export {};

package/Container.svelte

@@ -0,0 +1,86 @@
+<script >import { eq } from '@txstate-mws/svelte-components';
+import InlineMessages from './InlineMessages.svelte';
+export let id = undefined;
+export let descid = undefined;
+export let label;
+export let messages;
+export let required = false;
+let messagesid;
+</script>
+
+<div use:eq class="dialog-field-container">
+  {#if descid == null}
+    <label class="dialog-field-label" for={id}>{label}{#if required}&nbsp;*{/if}</label>
+  {:else}
+    <div id={descid} class="dialog-field-label">{label}{#if required}&nbsp;*{/if}</div>
+  {/if}
+  <div class="dialog-field-content">
+    <slot {messagesid} />
+  </div>
+  <InlineMessages bind:id={messagesid} {messages} />
+</div>
+
+<style>
+  .dialog-field-container {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    border-bottom: var(--dialog-container-border, 1px solid #999999);
+    padding: var(--dialog-container-padding, 1em) 0;
+    --dialog-container-tab-correct: calc(-1 * var(--tabs-panel-padding, 1em));
+  }
+  .dialog-field-container:last-child {
+    border-bottom: 0;
+  }
+  .dialog-field-container div.dialog-field-content :global(.dialog-field-container) {
+    border-bottom: 0;
+    background-color: transparent;
+    color: inherit;
+    padding: 0;
+    margin: 0 0 1em 0;
+  }
+  .dialog-field-container div.dialog-field-content :global(.dialog-field-container:last-child) {
+    margin-bottom: 0;
+  }
+  :global(.tabs-panel) .dialog-field-container {
+    margin-left: var(--dialog-container-tab-correct);
+    margin-right: var(--dialog-container-tab-correct);
+    padding-left: var(--tabs-panel-padding, 1em);
+    padding-right: var(--tabs-panel-padding, 1em);
+  }
+  :global(.tabs-panel) .dialog-field-container:first-child {
+    margin-top: var(--dialog-container-tab-correct);
+  }
+  :global(.tabs-panel) .dialog-field-container:last-child {
+    margin-bottom: var(--dialog-container-tab-correct);
+  }
+  :global(.tabs-panel) .dialog-field-container :global(.dialog-field-container) {
+    margin-left: 0;
+  }
+  .dialog-field-content {
+    position: relative;
+    width: max(70%, calc(100% - 20em));
+  }
+  .dialog-field-label {
+    width: min(30%, 20em);
+  }
+  :global([data-eq~="500px"]) .dialog-field-label {
+    width: 100%;
+    margin-bottom: 0.4em;
+  }
+  :global([data-eq~="500px"]) .dialog-field-content {
+    width: 100%;
+  }
+  .dialog-field-container :global(.dialog-input) {
+    width: 100%;
+    padding: 0.4em 0.6em;
+  }
+  .dialog-field-container:nth-of-type(even) {
+    background-color: var(--dialog-field-bg1, #e6e6e6);
+    color: var(--dialog-field-text1, inherit);
+  }
+  .dialog-field-container:nth-of-type(odd) {
+    background-color: var(--dialog-field-bg2, #ffffff);
+    color: var(--dialog-field-text2, inherit);
+  }
+</style>

package/Container.svelte.d.ts

@@ -0,0 +1,25 @@
+import { SvelteComponentTyped } from "svelte";
+import type { Feedback } from '@txstate-mws/svelte-forms';
+declare const __propDef: {
+    props: {
+        id?: string | undefined;
+        descid?: string | undefined;
+        label: string;
+        messages: Feedback[];
+        required?: boolean;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {
+            messagesid: any;
+        };
+    };
+};
+export declare type ContainerProps = typeof __propDef.props;
+export declare type ContainerEvents = typeof __propDef.events;
+export declare type ContainerSlots = typeof __propDef.slots;
+export default class Container extends SvelteComponentTyped<ContainerProps, ContainerEvents, ContainerSlots> {
+}
+export {};

package/FieldCheckbox.svelte

@@ -0,0 +1,28 @@
+<script >import { randomid } from 'txstate-utils';
+import FieldStandard from './FieldStandard.svelte';
+import Checkbox from './Checkbox.svelte';
+let className = '';
+export { className as class };
+export let id = undefined;
+export let path;
+export let label = '';
+export let boxLabel;
+export let defaultValue = undefined;
+export let conditional = undefined;
+export let required = false;
+function onChange(setVal) {
+    return function () {
+        setVal(this.checked);
+    };
+}
+const descid = randomid();
+</script>
+
+<FieldStandard bind:id {path} {descid} {label} {defaultValue} {conditional} {required} let:value let:messagesid let:valid let:invalid let:id let:onBlur let:setVal>
+  <div class={className}>
+    <label for={id}>
+      <Checkbox {id} name={path} {value} {messagesid} {descid} {valid} {invalid} {onBlur} onChange={onChange(setVal)}></Checkbox>
+      <span>{boxLabel}</span>
+    </label>
+  </div>
+</FieldStandard>

package/FieldCheckbox.svelte.d.ts

@@ -0,0 +1,23 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        class?: string;
+        id?: string | undefined;
+        path: string;
+        label?: string;
+        boxLabel: any;
+        defaultValue?: boolean | undefined;
+        conditional?: boolean | undefined;
+        required?: boolean;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export declare type FieldCheckboxProps = typeof __propDef.props;
+export declare type FieldCheckboxEvents = typeof __propDef.events;
+export declare type FieldCheckboxSlots = typeof __propDef.slots;
+export default class FieldCheckbox extends SvelteComponentTyped<FieldCheckboxProps, FieldCheckboxEvents, FieldCheckboxSlots> {
+}
+export {};

package/FieldChoices.svelte

@@ -0,0 +1,75 @@
+<script >import { getContext } from 'svelte';
+import { Field, FORM_CONTEXT } from '@txstate-mws/svelte-forms';
+import { derivedStore } from '@txstate-mws/svelte-store';
+import { randomid } from 'txstate-utils';
+import Container from './Container.svelte';
+import Checkbox from './Checkbox.svelte';
+let className = '';
+export { className as class };
+export let id = undefined;
+export let path;
+export let label = '';
+export let choices;
+export let defaultValue = [];
+export let conditional = undefined;
+export let maxwidth = 250;
+export let leftToRight = false;
+const store = getContext(FORM_CONTEXT);
+const currentWidth = derivedStore(store, 'width');
+$: cols = Math.min(Math.ceil($currentWidth / maxwidth), choices.length);
+let orders;
+let width = '100%';
+function redoLayout(..._) {
+    width = `${100 / cols}%`;
+    const rows = Math.ceil(choices.length / cols);
+    orders = choices.map((_, i) => leftToRight ? i : Math.floor((i + 1) / cols) + rows * (i % cols));
+}
+$: redoLayout(choices, cols);
+function onChangeCheckbox(setVal, choice, included) {
+    setVal(v => {
+        if (v == null)
+            return included ? [] : [choice.value];
+        if (included)
+            return v.filter(s => s !== choice.value);
+        else
+            return [...v, choice.value];
+    });
+}
+const descid = randomid();
+</script>
+
+<Field {path} {defaultValue} {conditional} let:path let:value let:onBlur let:setVal let:messages let:valid let:invalid>
+  <Container {id} {label} {messages} {descid} let:messagesid>
+    <div class="dialog-choices {className}" class:valid class:invalid>
+      {#each choices as choice, idx}
+        {@const checkid = `${path}.${idx}`}
+        {@const included = value && value.includes(choice.value)}
+        {@const label = choice.label || (typeof choice.value === 'string' ? choice.value : '')}
+        <label for={checkid} style:width style:order={orders[idx]}>
+          <Checkbox id={checkid} name={checkid} value={included} {messagesid} {descid} disabled={choice.disabled} onChange={() => onChangeCheckbox(setVal, choice, included)} {onBlur} />
+          <span>{label}</span>
+        </label>
+      {/each}
+    </div>
+  </Container>
+</Field>
+
+<style>
+  .dialog-choices {
+    display: flex;
+    flex-wrap: wrap;
+  }
+  label {
+    margin-bottom: 0.7em;
+    display: flex;
+    align-items: center;
+    justify-content: flex-start;
+  }
+  span {
+    margin-left: 0.45em;
+    max-width: calc(100% - 1.6em);
+  }
+  label :global(input[type="checkbox"]) {
+    transform: none;
+  }
+</style>

package/FieldChoices.svelte.d.ts

@@ -0,0 +1,28 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        class?: string;
+        id?: string | undefined;
+        path: string;
+        label?: string;
+        choices: {
+            label?: string;
+            value: any;
+            disabled?: boolean;
+        }[];
+        defaultValue?: any;
+        conditional?: boolean | undefined;
+        maxwidth?: number;
+        leftToRight?: boolean;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export declare type FieldChoicesProps = typeof __propDef.props;
+export declare type FieldChoicesEvents = typeof __propDef.events;
+export declare type FieldChoicesSlots = typeof __propDef.slots;
+export default class FieldChoices extends SvelteComponentTyped<FieldChoicesProps, FieldChoicesEvents, FieldChoicesSlots> {
+}
+export {};

package/FieldChooserLink.svelte

@@ -0,0 +1,100 @@
+<script  context="module">export {};
+</script>
+<script >import { FORM_CONTEXT } from '@txstate-mws/svelte-forms';
+import { getContext, setContext } from 'svelte';
+import { randomid } from 'txstate-utils';
+import { Chooser, ChooserStore, ASSET_STORE_CONTEXT } from './chooser';
+import Details from './chooser/Details.svelte';
+import Thumbnail from './chooser/Thumbnail.svelte';
+import FieldStandard from './FieldStandard.svelte';
+import { ASSET_API_CONTEXT } from './Form.svelte';
+export let id = undefined;
+export let path;
+export let label = '';
+export let defaultValue = undefined;
+export let conditional = undefined;
+export let required = false;
+export let images = false;
+export let pages = false;
+export let assets = images;
+export let folders = false;
+export let urlEntry = false;
+export let initialType = undefined;
+export let initialSource = undefined;
+export let initialPath = undefined;
+const formStore = getContext(FORM_CONTEXT);
+const value = formStore.getField(path);
+const chooserClient = getContext(ASSET_API_CONTEXT);
+const store = new ChooserStore(chooserClient);
+const descid = randomid();
+let modalshown = false;
+async function show() {
+    if (selectedAsset && selectedAsset.type !== 'raw')
+        store.preview(selectedAsset);
+    modalshown = true;
+}
+function hide() {
+    modalshown = false;
+}
+function onChange(setVal) {
+    return (e) => {
+        selectedAsset = e.detail;
+        setVal(e.detail.id);
+        hide();
+    };
+}
+async function userUrlEntry() {
+    const url = this.value;
+    if (chooserClient.findByUrl) {
+        const item = await chooserClient.findByUrl(url);
+        if (item)
+            return store.preview(item);
+    }
+    store.clearPreview();
+    const newVal = chooserClient.urlToValue?.(url) ?? url;
+    selectedAsset = {
+        type: 'raw',
+        id: newVal,
+        url
+    };
+    formStore.setField(path, newVal);
+}
+let selectedAsset;
+async function updateSelected(..._) {
+    if ($value && selectedAsset?.id !== $value)
+        selectedAsset = await chooserClient.findById($value);
+}
+$: updateSelected($value);
+</script>
+
+<FieldStandard bind:id {path} {descid} {label} {defaultValue} {conditional} {required} let:value let:messagesid let:valid let:invalid let:id let:onBlur let:setVal>
+  {#if selectedAsset}
+    <div class="dialog-chooser-container">
+      <Thumbnail item={selectedAsset} />
+      <Details item={selectedAsset} />
+    </div>
+  {/if}
+  <button type="button" on:click={show} aria-describedby={messagesid}>Select {#if value}New{/if} {#if assets && pages}Link Target{:else if images}Image{:else if assets}Asset{:else}Page{/if}</button>
+  {#if urlEntry && !folders && selectedAsset?.type !== 'folder'}
+    <input type="text" value={selectedAsset?.url ?? ''} on:change={userUrlEntry}><br>
+  {/if}
+  {#if modalshown}
+    <Chooser {store} {label} {initialType} {pages} {assets} {images} {initialSource} {initialPath} {folders} on:change={onChange(setVal)} on:escape={hide} />
+  {/if}
+</FieldStandard>
+
+<style>
+  .dialog-chooser-container {
+    display: flex;
+    margin-bottom: 0.25em;
+    font-size: 0.9em;
+  }
+  div.dialog-chooser-container > :global(.dialog-chooser-thumbnail) {
+    width: 8em;
+    padding-top: 0;
+    height: 5em;
+  }
+  input {
+    width: 100%;
+  }
+</style>

package/FieldChooserLink.svelte.d.ts

@@ -0,0 +1,30 @@
+import { SvelteComponentTyped } from "svelte";
+import type { ChooserType } from './chooser/ChooserAPI';
+declare const __propDef: {
+    props: {
+        id?: string | undefined;
+        path: string;
+        label?: string;
+        defaultValue?: boolean | undefined;
+        conditional?: boolean | undefined;
+        required?: boolean;
+        images?: boolean;
+        pages?: boolean;
+        assets?: boolean;
+        folders?: boolean;
+        urlEntry?: boolean;
+        initialType?: ChooserType | undefined;
+        initialSource?: string | undefined;
+        initialPath?: string | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export declare type FieldChooserLinkProps = typeof __propDef.props;
+export declare type FieldChooserLinkEvents = typeof __propDef.events;
+export declare type FieldChooserLinkSlots = typeof __propDef.slots;
+export default class FieldChooserLink extends SvelteComponentTyped<FieldChooserLinkProps, FieldChooserLinkEvents, FieldChooserLinkSlots> {
+}
+export {};

package/FieldDate.svelte

@@ -0,0 +1,19 @@
+<script >import { dateSerialize, dateDeserialize } from '@txstate-mws/svelte-forms';
+import FieldStandard from './FieldStandard.svelte';
+import Input from './Input.svelte';
+let className = '';
+export { className as class };
+export let id = undefined;
+export let path;
+export let label = '';
+export let defaultValue = undefined;
+export let min = undefined;
+export let max = undefined;
+export let step = undefined;
+export let conditional = undefined;
+export let required = false;
+</script>
+
+<FieldStandard bind:id {label} {path} {required} {defaultValue} {conditional} serialize={dateSerialize} deserialize={dateDeserialize} let:value let:valid let:invalid let:id let:onBlur let:onChange>
+  <Input type="date" name={path} {value} {id} class="dialog-input {className}" {onChange} {onBlur} {valid} {invalid} {min} {max} {step} />
+</FieldStandard>

package/FieldDate.svelte.d.ts

@@ -0,0 +1,29 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        class?: string;
+        id?: string | undefined;
+        path: string;
+        label?: string;
+        defaultValue?: any;
+        min?: Date | {
+            toJSDate: () => Date;
+        } | undefined;
+        max?: Date | {
+            toJSDate: () => Date;
+        } | undefined;
+        step?: number | undefined;
+        conditional?: boolean | undefined;
+        required?: boolean;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export declare type FieldDateProps = typeof __propDef.props;
+export declare type FieldDateEvents = typeof __propDef.events;
+export declare type FieldDateSlots = typeof __propDef.slots;
+export default class FieldDate extends SvelteComponentTyped<FieldDateProps, FieldDateEvents, FieldDateSlots> {
+}
+export {};

package/FieldDateTime.svelte

@@ -0,0 +1,19 @@
+<script >import { datetimeSerialize, datetimeDeserialize } from '@txstate-mws/svelte-forms';
+import FieldStandard from './FieldStandard.svelte';
+import Input from './Input.svelte';
+let className = '';
+export { className as class };
+export let id = undefined;
+export let path;
+export let label = '';
+export let defaultValue = undefined;
+export let min = undefined;
+export let max = undefined;
+export let step = undefined;
+export let conditional = undefined;
+export let required = false;
+</script>
+
+<FieldStandard bind:id {label} {path} {required} {defaultValue} {conditional} serialize={datetimeSerialize} deserialize={datetimeDeserialize} let:value let:valid let:invalid let:id let:onBlur let:onChange>
+  <Input type="datetime-local" name={path} {value} {id} class="dialog-input {className}" {onChange} {onBlur} {valid} {invalid} {min} {max} {step} />
+</FieldStandard>