@dosgato/dialog 0.0.1

package/Icon.svelte

@@ -0,0 +1,16 @@
+<script >import Icon from '@iconify/svelte/dist/OfflineIcon.svelte';
+import { ScreenReaderOnly } from '@txstate-mws/svelte-components';
+export let icon;
+export let hiddenLabel = undefined;
+export let inline = false;
+export let width = '1em';
+export let height = width;
+export let vAlign = 'middle';
+</script>
+
+{#if icon}
+  <Icon {icon} {inline} {width} {height} {vAlign} aria-hidden={!hiddenLabel} />
+  {#if hiddenLabel}
+    <ScreenReaderOnly>{hiddenLabel}</ScreenReaderOnly>
+  {/if}
+{/if}

package/Icon.svelte.d.ts

@@ -0,0 +1,22 @@
+import { SvelteComponentTyped } from "svelte";
+import type { IconifyIcon } from '@iconify/svelte';
+declare const __propDef: {
+    props: {
+        icon: IconifyIcon | undefined;
+        hiddenLabel?: string;
+        inline?: boolean;
+        width?: string | number;
+        height?: string | number;
+        vAlign?: 'top' | 'middle' | 'bottom';
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export declare type IconProps = typeof __propDef.props;
+export declare type IconEvents = typeof __propDef.events;
+export declare type IconSlots = typeof __propDef.slots;
+export default class Icon extends SvelteComponentTyped<IconProps, IconEvents, IconSlots> {
+}
+export {};

package/InlineMessage.svelte

@@ -0,0 +1,42 @@
+<script >import alertCircleOutline from '@iconify/icons-mdi/alert-circle-outline.js';
+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 Icon from './Icon.svelte';
+export let message;
+const icons = {
+    error: alertCircleOutline,
+    warning: informationOutline,
+    success: checkCircleOutline,
+    system: closeOctagonOutline
+};
+$: icon = icons[message.type] ?? alertCircleOutline;
+</script>
+
+<div class={message.type}><Icon width='1.5em' {icon} hiddenLabel='Error' /><span>{message.message}</span></div>
+
+<style>
+  div {
+    font-size: 0.9em;
+    padding: 5px;
+    margin-top: 0.5em;
+    display: flex;
+    align-items: center;
+  }
+  span {
+    display: block;
+    margin-left: 0.5em;
+  }
+  div.error, div.system {
+    background-color: #9a3332;
+    color: white;
+  }
+  div.warning {
+    background-color: #ffc107;
+    color: black;
+  }
+  div.success {
+    background-color: #218739;
+    color: white;
+  }
+</style>

package/InlineMessage.svelte.d.ts

@@ -0,0 +1,17 @@
+import { SvelteComponentTyped } from "svelte";
+import type { Feedback } from '@txstate-mws/svelte-forms';
+declare const __propDef: {
+    props: {
+        message: Feedback;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export declare type InlineMessageProps = typeof __propDef.props;
+export declare type InlineMessageEvents = typeof __propDef.events;
+export declare type InlineMessageSlots = typeof __propDef.slots;
+export default class InlineMessage extends SvelteComponentTyped<InlineMessageProps, InlineMessageEvents, InlineMessageSlots> {
+}
+export {};

package/InlineMessages.svelte

@@ -0,0 +1,21 @@
+<script >import { randomid } from 'txstate-utils';
+import InlineMessage from './InlineMessage.svelte';
+export let id = randomid();
+export let messages;
+const savedid = id;
+$: id = messages.length ? savedid : undefined;
+</script>
+
+{#if id}
+  <div {id}>
+    {#each messages as message}
+      <InlineMessage {message} />
+    {/each}
+  </div>
+{/if}
+
+<style>
+  div {
+    width: 100%;
+  }
+</style>

package/InlineMessages.svelte.d.ts

@@ -0,0 +1,18 @@
+import { SvelteComponentTyped } from "svelte";
+import type { Feedback } from '@txstate-mws/svelte-forms';
+declare const __propDef: {
+    props: {
+        id?: string | undefined;
+        messages: Feedback[];
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export declare type InlineMessagesProps = typeof __propDef.props;
+export declare type InlineMessagesEvents = typeof __propDef.events;
+export declare type InlineMessagesSlots = typeof __propDef.slots;
+export default class InlineMessages extends SvelteComponentTyped<InlineMessagesProps, InlineMessagesEvents, InlineMessagesSlots> {
+}
+export {};

package/Input.svelte

@@ -0,0 +1,33 @@
+<script >import { dateSerialize, datetimeSerialize } from '@txstate-mws/svelte-forms';
+let className = '';
+export { className as class };
+export let name;
+export let value;
+export let type = 'text';
+export let allowlastpass = false;
+export let maxlength = undefined;
+export let min = undefined;
+export let max = undefined;
+export let step = undefined;
+export let id = undefined;
+export let disabled = false;
+export let messagesid = undefined;
+export let valid = false;
+export let invalid = false;
+export let onChange;
+export let onBlur;
+export let onSelect = undefined;
+function resolveMinMax(dt) {
+    if (typeof dt === 'undefined')
+        return undefined;
+    if ('toJSDate' in dt)
+        dt = dt.toJSDate();
+    if (dt instanceof Date)
+        return type === 'date' ? dateSerialize(dt) : datetimeSerialize(dt);
+    return dt;
+}
+$: minStr = resolveMinMax(min);
+$: maxStr = resolveMinMax(max);
+</script>
+
+<input {type} {id} class={className} autocomplete="off" data-lpignore={!allowlastpass} {name} {value} {disabled} {maxlength} min={minStr} max={maxStr} {step} class:valid class:invalid aria-invalid={invalid} aria-describedby={messagesid} on:change={onChange} on:select={onSelect} on:blur={onBlur} on:keyup={onChange}>

package/Input.svelte.d.ts

@@ -0,0 +1,36 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        class?: string;
+        name: string;
+        value: string;
+        type?: string;
+        allowlastpass?: boolean;
+        maxlength?: number | undefined;
+        min?: string | Date | {
+            toJSDate: () => Date;
+        } | number | undefined;
+        max?: string | Date | {
+            toJSDate: () => Date;
+        } | number | undefined;
+        step?: number | undefined;
+        id?: string | undefined;
+        disabled?: boolean;
+        messagesid?: string | undefined;
+        valid?: boolean;
+        invalid?: boolean;
+        onChange: any;
+        onBlur: any;
+        onSelect?: any;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export declare type InputProps = typeof __propDef.props;
+export declare type InputEvents = typeof __propDef.events;
+export declare type InputSlots = typeof __propDef.slots;
+export default class Input extends SvelteComponentTyped<InputProps, InputEvents, InputSlots> {
+}
+export {};

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2021 Texas State ETC
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,38 @@
+# create-svelte
+
+Everything you need to build a Svelte project, powered by [`create-svelte`](https://github.com/sveltejs/kit/tree/master/packages/create-svelte);
+
+## Creating a project
+
+If you're seeing this, you've probably already done this step. Congrats!
+
+```bash
+# create a new project in the current directory
+npm init svelte@next
+
+# create a new project in my-app
+npm init svelte@next my-app
+```
+
+> Note: the `@next` is temporary
+
+## Developing
+
+Once you've created a project and installed dependencies with `npm install` (or `pnpm install` or `yarn`), start a development server:
+
+```bash
+npm run dev
+
+# or start the server and open the app in a new browser tab
+npm run dev -- --open
+```
+
+## Building
+
+Before creating a production version of your app, install an [adapter](https://kit.svelte.dev/docs#adapters) for your target environment. Then:
+
+```bash
+npm run build
+```
+
+> You can preview the built app with `npm run preview`, regardless of whether you installed an adapter. This should _not_ be used to serve your app in production.

package/Radio.svelte

@@ -0,0 +1,65 @@
+<script >export let id = undefined;
+export let name;
+export let value;
+export let selected = false;
+export let onChange = undefined;
+export let onBlur = undefined;
+export let messagesid = undefined;
+export let disabled = false;
+export let valid = false;
+export let invalid = false;
+</script>
+
+<input {id} type="radio" {name} class:valid class:invalid checked={selected} {disabled} aria-describedby={messagesid} {value} on:change={onChange} on:blur={onBlur}>
+
+<style>
+input, input:before, input:after {
+  box-sizing: border-box;
+}
+
+input[type="radio"] {
+  -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: 50%;
+  transform: translateY(-0.075em);
+
+  display: inline-grid;
+  place-content: center;
+}
+
+input[type="radio"]::before {
+  content: "";
+  width: 0.65em;
+  height: 0.65em;
+  border-radius: 50%;
+  transform: scale(0);
+  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="radio"]:checked::before {
+  transform: scale(1);
+}
+
+input[type="radio"]:focus {
+  outline: max(2px, 0.15em) solid var(--dialog-checkbox-focus, #4D90FE);
+  outline-offset: max(2px, 0.15em);
+}
+
+input[type="radio"]:disabled {
+  --dialog-checkbox-color: var(--dialog-checkbox-disabled, #999999);
+
+  color: var(--dialog-checkbox-color);
+  cursor: not-allowed;
+}
+</style>

package/Radio.svelte.d.ts

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

package/Tab.svelte

@@ -0,0 +1,57 @@
+<script >import { getContext } from 'svelte';
+import Icon from './Icon.svelte';
+import { TabStore, TAB_CONTEXT } from './TabStore';
+export let title;
+const { store, onClick, onKeyDown, tabelements } = getContext(TAB_CONTEXT);
+const accordion = store.accordion();
+const current = store.currentTitle();
+$: active = $current === title;
+const idx = $store.tabs.findIndex(t => t.title === title);
+const last = idx === $store.tabs.length - 1;
+</script>
+
+{#if $accordion}
+  <div bind:this={tabelements[idx]} id={$store.tabids[title]} class="tabs-tab" class:last aria-selected={active} aria-controls={$store.panelids[title]} role="tab" tabindex={0} on:click={onClick(idx)} on:keydown={onKeyDown(idx)}><Icon icon={$store.tabs[idx].icon} inline />{title}<i class="tabs-accordion-arrow" aria-hidden="true"></i></div>
+{/if}
+<div id={$store.panelids[title]} hidden={!active} role="tabpanel" tabindex="0" aria-labelledby={$store.tabids[title]} class="tabs-panel" class:accordion={$accordion}>
+  <slot />
+</div>
+
+<style>
+  .tabs-panel {
+    width: 100%;
+    border: var(--tabs-panel-border, var(--tabs-border, 1px solid #666666));
+    padding: var(--tabs-panel-padding, 1em);
+  }
+  .tabs-panel.accordion {
+    border-left: 0;
+    border-right: 0;
+  }
+  .tabs-panel:not(.accordion) {
+    border-bottom-left-radius: var(--tabs-panel-radius, var(--tabs-radius, 0.3em));
+    border-bottom-right-radius: var(--tabs-panel-radius, var(--tabs-radius, 0.3em));
+    overflow: hidden;
+    margin-bottom: var(--tabs-margin-bottom, 0.8em);
+    margin-top: -1px;
+  }
+  .tabs-tab {
+    position: relative;
+    width: 100%;
+  }
+  .tabs-tab:not(.last) {
+    border-bottom: var(--tabs-border, 1px solid #666666);
+  }
+  i.tabs-accordion-arrow {
+    transform: translateY(-50%) rotate(45deg);
+    border: solid currentColor;
+    border-width: 0 .2em .2em 0;
+    padding: .15em;
+    position: absolute;
+    right: 0.6em;
+    top: calc(50% - 0.08em);
+  }
+  .tabs-tab[aria-selected="true"] i.tabs-accordion-arrow {
+    transform: translateY(-50%) rotate(225deg);
+    top: calc(50% + 0.08em);
+  }
+</style>

package/Tab.svelte.d.ts

@@ -0,0 +1,18 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        title: string;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+};
+export declare type TabProps = typeof __propDef.props;
+export declare type TabEvents = typeof __propDef.events;
+export declare type TabSlots = typeof __propDef.slots;
+export default class Tab extends SvelteComponentTyped<TabProps, TabEvents, TabSlots> {
+}
+export {};

package/TabStore.d.ts

@@ -0,0 +1,28 @@
+import { Store } from '@txstate-mws/svelte-store';
+import type { ElementSize } from '@txstate-mws/svelte-components';
+import type { IconifyIcon } from '@iconify/svelte';
+export declare const TAB_CONTEXT: {};
+interface TabDef {
+    title: string;
+    icon?: IconifyIcon;
+}
+interface ITabStore extends ElementSize {
+    current?: number;
+    tabs: TabDef[];
+    tabids: Record<string, string>;
+    panelids: Record<string, string>;
+}
+export declare class TabStore extends Store<ITabStore> {
+    initialTab?: string | undefined;
+    constructor(tabs: TabDef[], initialTab?: string | undefined);
+    currentTitle(): import("@txstate-mws/svelte-store").DerivedStore<string, ITabStore>;
+    currentTabId(): import("@txstate-mws/svelte-store").DerivedStore<string, ITabStore>;
+    currentPanelId(): import("@txstate-mws/svelte-store").DerivedStore<string, ITabStore>;
+    accordion(): import("@txstate-mws/svelte-store").DerivedStore<boolean, ITabStore>;
+    left(): void;
+    right(): void;
+    home(): void;
+    end(): void;
+    activate(idx: number): void;
+}
+export {};

package/TabStore.js

@@ -0,0 +1,42 @@
+import { Store, derivedStore } from '@txstate-mws/svelte-store';
+import { findIndex, randomid } from 'txstate-utils';
+export const TAB_CONTEXT = {};
+export class TabStore extends Store {
+    constructor(tabs, initialTab) {
+        super({
+            tabs,
+            current: findIndex(tabs, t => t.title === initialTab, 0),
+            tabids: tabs.reduce((acc, curr) => ({ ...acc, [curr.title]: randomid() }), {}),
+            panelids: tabs.reduce((acc, curr) => ({ ...acc, [curr.title]: randomid() }), {}),
+            clientWidth: 1024
+        });
+        this.initialTab = initialTab;
+    }
+    currentTitle() {
+        return derivedStore(this, v => v.tabs[v.current].title);
+    }
+    currentTabId() {
+        return derivedStore(this, v => v.tabids[v.tabs[v.current].title]);
+    }
+    currentPanelId() {
+        return derivedStore(this, v => v.panelids[v.tabs[v.current].title]);
+    }
+    accordion() {
+        return derivedStore(this, v => v.clientWidth < 500);
+    }
+    left() {
+        this.update(v => ({ ...v, current: Math.max(0, v.current - 1) }));
+    }
+    right() {
+        this.update(v => ({ ...v, current: Math.min(v.tabs.length - 1, v.current + 1) }));
+    }
+    home() {
+        this.update(v => ({ ...v, current: 0 }));
+    }
+    end() {
+        this.update(v => ({ ...v, current: v.tabs.length - 1 }));
+    }
+    activate(idx) {
+        this.update(v => ({ ...v, current: Math.min(v.tabs.length, Math.max(0, idx)) }));
+    }
+}

package/Tabs.svelte

@@ -0,0 +1,105 @@
+<script >import { modifierKey, resize } from '@txstate-mws/svelte-components';
+import { setContext } from 'svelte';
+import { roundTo } from 'txstate-utils';
+import Icon from './Icon.svelte';
+import { TabStore, TAB_CONTEXT } from './TabStore';
+export let tabs;
+export let active = undefined;
+export let store = new TabStore(tabs, active);
+const tabelements = [];
+setContext(TAB_CONTEXT, { store, onClick, onKeyDown, tabelements });
+const current = store.currentTitle();
+const accordion = store.accordion();
+$: cols = Math.min(Math.floor($store.clientWidth / 90), $store.tabs.length);
+$: scalefactor = Math.min(roundTo($store.clientWidth / (cols * 130), 4), 1);
+$: width = `calc(${100 / cols}% + 1px)`;
+$: widthleft = `${100 / cols}%`;
+$: wrapping = cols !== $store.tabs.length;
+function onClick(idx) {
+    return () => store.activate(idx);
+}
+function onKeyDown(idx) {
+    return async (e) => {
+        if (modifierKey(e))
+            return;
+        if (['Enter', ' ', 'ArrowLeft', 'ArrowRight', 'Home', 'End'].includes(e.key)) {
+            e.preventDefault();
+            e.stopPropagation();
+        }
+        if (e.key === 'Enter' || e.key === ' ') {
+            store.activate(idx);
+        }
+        else if (e.key === 'ArrowLeft' && $store.current > 0) {
+            store.left();
+            tabelements[$store.current].focus();
+        }
+        else if (e.key === 'ArrowRight' && $store.current < $store.tabs.length - 1) {
+            store.right();
+            tabelements[$store.current].focus();
+        }
+        else if (e.key === 'Home' && $store.current > 0) {
+            store.home();
+            tabelements[$store.current].focus();
+        }
+        else if (e.key === 'End' && $store.current < $store.tabs.length - 1) {
+            store.end();
+            tabelements[$store.current].focus();
+        }
+    };
+}
+function isActive(idx, activeidx) {
+    return idx === (activeidx ?? 0);
+}
+$: active = $current;
+</script>
+
+{#if !$accordion}
+  <ul use:resize={{ store }} class="dialog-tab-buttons" role="tablist">
+    {#each $store.tabs as tab, idx (tab.title)}
+    {@const active = isActive(idx, $store.current)}
+    {@const left = idx % cols === 0}
+    <li bind:this={tabelements[idx]} id={$store.tabids[tab.title]} class="tabs-tab" class:left class:wrapping class:active style:font-size="{scalefactor}em" style:line-height={1.2 / scalefactor} style:width={left ? widthleft : width} aria-selected={active} aria-controls={$store.panelids[tab.title]} role="tab" tabindex={active ? 0 : -1} on:click={onClick(idx)} on:keydown={onKeyDown(idx)}><Icon icon={tab.icon} inline />{tab.title}</li>
+    {/each}
+  </ul>
+  <slot current={$store.current} />
+{:else}
+  <div use:resize={{ store }} class="tabs-container">
+    <slot current={$store.current} />
+  </div>
+{/if}
+
+<style>
+  .tabs-container {
+    display: flex;
+    flex-wrap: wrap;
+    border-radius: var(--tabs-radius, 0.6em);
+    overflow: hidden;
+    border: var(--tabs-border, 1px solid #666666);
+    margin-bottom: var(--tabs-margin-bottom, 0.8em);
+  }
+  ul {
+    width: 100%;
+    padding: 0;
+    margin: 0;
+    list-style-type: none;
+    display: flex;
+    flex-wrap: wrap;
+  }
+  li, .tabs-container :global(.tabs-tab) {
+    padding: var(--tabs-padding, 0.7em 1em);
+    cursor: pointer;
+    word-break: break-word;
+  }
+  li {
+    border: var(--tabs-border, 1px solid #666666);
+    border-top-left-radius: var(--tabs-radius, 0.6em);
+    border-top-right-radius: var(--tabs-radius, 0.6em);
+  }
+  li:not(.left) {
+    margin-left: -1px;
+  }
+  li:global(.tabs-tab[aria-selected="true"]), .tabs-container :global(.tabs-tab[aria-selected="true"]) {
+    color: var(--tabs-active-text, #ffffff);
+    background-color: var(--tabs-active-bg, #333333);
+  }
+</style>

package/Tabs.svelte.d.ts

@@ -0,0 +1,25 @@
+import { SvelteComponentTyped } from "svelte";
+import { TabStore } from './TabStore';
+declare const __propDef: {
+    props: {
+        tabs: {
+            title: string;
+        }[];
+        active?: string | undefined;
+        store?: TabStore;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {
+            current: number;
+        };
+    };
+};
+export declare type TabsProps = typeof __propDef.props;
+export declare type TabsEvents = typeof __propDef.events;
+export declare type TabsSlots = typeof __propDef.slots;
+export default class Tabs extends SvelteComponentTyped<TabsProps, TabsEvents, TabsSlots> {
+}
+export {};