@dosgato/dialog 0.0.20 → 0.0.21

package/chooser/ChooserStore.js

@@ -1,5 +1,6 @@
-import { SafeStore } from '@txstate-mws/svelte-store';
-import { filterAsync, findIndex, isNotBlank } from 'txstate-utils';
+import { Store, derivedStore } from '@txstate-mws/svelte-store';
+import { tick } from 'svelte';
+import { findIndex } from 'txstate-utils';
 export const CHOOSER_STORE_CONTEXT = {};
 const nofilter = (x) => true;
 export function combinePath(path, name) {
@@ -12,28 +13,28 @@ export function bytesToHuman(bytes) {
     const scale = Math.floor(Math.log(bytes) / Math.log(1024));
     return String(parseFloat((bytes / Math.pow(1024, scale)).toPrecision(3))) + scales[scale];
 }
-export class ChooserStore extends SafeStore {
+export class ChooserStore extends Store {
     client;
     options;
     constructor(client) {
-        super({ activetype: 'page', activesource: 0 });
+        super({ activetype: 'page', activesource: 0, initialized: false });
         this.client = client;
         this.setOptions({});
     }
     setOptions(options) {
-        const activeTypes = options.activeTypes?.length ? options.activeTypes : ['asset', 'page'];
         const userFilter = options.filter ?? nofilter;
-        const filter = options.onlyImages
+        const filter = options.images
             ? (itm) => ((itm.type === 'asset' && !!itm.image) || itm.type === 'folder') && userFilter(itm)
             : userFilter;
         this.options = {
             ...options,
-            activeTypes,
             activeSources: options.activeSources ? new Set(options.activeSources) : undefined,
-            initialType: options.initialType ?? activeTypes[0],
             filter
         };
     }
+    sources = derivedStore(this, v => [...(v.sources?.page ?? []), ...(v.sources?.asset ?? [])].filter(s => this.options.activeSources ? this.options.activeSources.has(s.name) : true));
+    source = derivedStore(this, v => this.getSource(v));
+    preview = derivedStore(this, 'preview');
     getSource(state = this.value) {
         return state.sources?.[state.activetype]?.[state.activesource];
     }
@@ -44,158 +45,40 @@ export class ChooserStore extends SafeStore {
     }
     async init(options) {
         this.setOptions(options);
-        const activetype = this.value.preview ? (this.value.preview.type === 'page' ? 'page' : 'asset') : this.options.initialType;
-        this.update(v => ({ ...v, loading: true, activetype, activesource: this.getSourceIndex(this.options.initialSource, v, this.options.initialType) }));
-        if (!this.getSource()) {
-            const [pageSources, assetSources] = await Promise.all([
-                this.options.activeTypes.includes('page') ? this.client.getSources('page') : [],
-                this.options.activeTypes.includes('asset') ? this.client.getSources('asset') : []
-            ]);
-            this.update(v => {
-                v.sources = { page: pageSources.filter(s => !this.options.activeSources || this.options.activeSources.has(s)) ?? [], asset: assetSources.filter(s => !this.options.activeSources || this.options.activeSources.has(s)) ?? [] };
-                v.activesource = this.getSourceIndex(this.options.initialSource, v);
-                return v;
-            });
-        }
-        if (this.value.preview)
-            await this.openPathRecursive(this.value.preview.path);
-        else if (this.options.initialPath)
-            await this.openPathRecursive(this.options.initialPath);
-        else
-            await this.openPathRecursive('/');
-        this.update(v => ({ ...v, loading: false }));
-    }
-    itemByPath(state, path) {
-        const parts = path.substring(1).split('/');
-        const source = this.getSource(state);
-        let item = source.children?.find(c => c.name === parts[0]);
-        for (const part of parts.slice(1).filter(isNotBlank)) {
-            if (item.type === 'asset')
-                return undefined;
-            item = item?.children?.find(c => c.name === part);
-        }
-        return item;
-    }
-    async open(folder) {
-        return await this.openPath(folder.path);
-    }
-    async openPath(path) {
-        const folder = this.itemByPath(this.value, path);
-        if (!folder || folder.type === 'asset' || folder.open)
-            return;
-        this.update(v => {
-            const folder = this.itemByPath(v, path);
-            folder.loading = true;
-            v.focus = folder.id;
-            return v;
-        });
-        try {
-            const children = await filterAsync(await this.client.getChildren(this.getSource().name, path, this.options.passthruFilters), this.options.filter);
-            this.update(v => {
-                const folder = this.itemByPath(v, path);
-                folder.open = true;
-                folder.loading = false;
-                folder.children = children;
-                return v;
-            });
-        }
-        catch (e) {
-            console.error(e);
-            this.update(v => {
-                const folder = this.itemByPath(v, path);
-                folder.loading = false;
-                return v;
-            });
-        }
-    }
-    async openPathRecursive(path) {
-        const parts = path.substring(1).split('/');
-        const source = this.getSource(this.clone(this.value));
-        if (!source.children)
-            source.children = await filterAsync(await this.client.getChildren(source.name, '/', this.options.passthruFilters), this.options.filter);
-        let current = source.children.find(c => c.name === parts[0]) ?? source.children[0];
-        for (const part of parts.slice(1).filter(isNotBlank)) {
-            if (!current || current.type === 'asset')
-                break;
-            if (!current.open) {
-                current.children = await filterAsync(await this.client.getChildren(source.name, current.path, this.options.passthruFilters), this.options.filter);
-                current.loading = false;
-                current.open = true;
-            }
-            current = current.children.find(c => c.name === part);
-        }
+        const [pageSources, assetSources] = await Promise.all([
+            this.options.pages ? this.client.getSources('page') : [],
+            this.options.assets ? this.client.getSources('asset') : []
+        ]);
         this.update(v => {
-            const currSource = this.getSource(v);
-            if (currSource.name !== source.name)
-                return v;
-            v.sources[v.activetype][v.activesource] = source;
-            if (!current)
-                return v;
-            v.focus = current.id;
-            v.focusPath = current.path;
-            return v;
+            const sources = { page: pageSources.filter(s => !this.options.activeSources || this.options.activeSources.has(s)) ?? [], asset: assetSources.filter(s => !this.options.activeSources || this.options.activeSources.has(s)) ?? [] };
+            return { ...v, sources };
         });
+        this.setSource(this.value.preview?.source ?? this.options.initialSource, true);
+        console.log('before initialized', this.value);
+        await tick();
+        console.log('just before initialized');
+        this.update(v => ({ ...v, initialized: true }));
     }
-    async close(folder) {
-        return await this.closePath(folder.path);
-    }
-    async closePath(path) {
-        this.update(v => {
-            const folder = this.itemByPath(v, path);
-            if (folder && folder.type !== 'asset')
-                folder.open = false;
-            return v;
-        });
-    }
-    async toggle(folder) {
-        if (folder.open)
-            await this.close(folder);
-        else
-            await this.open(folder);
-    }
-    preview(item) {
+    setPreview(item) {
         if (!item)
             return this.clearPreview();
-        if (item.type === 'folder' && !this.options.chooseFolder)
+        if (item.type === 'folder' && !this.options.folders)
             return;
-        this.update(v => ({ ...v, preview: item, focus: item.id, focusPath: item.path }));
+        this.update(v => ({ ...v, preview: item }));
     }
     clearPreview() {
         this.update(v => ({ ...v, preview: undefined }));
     }
-    async changeSource(idx) {
-        if (idx >= this.value.sources[this.value.activetype].length || idx < 0)
-            return;
-        this.update(v => {
-            v.activesource = idx;
-            const source = this.getSource(v);
-            if (source.children?.length) {
-                const firstchild = source.children[0];
-                v.focus = firstchild.id;
-                v.focusPath = firstchild.path;
-            }
-            return v;
-        });
-        const source = this.getSource();
-        const children = await filterAsync(await this.client.getChildren(source.name, '/', this.options.passthruFilters), this.options.filter);
+    setSource(name, init) {
         this.update(v => {
-            const source = this.getSource(v);
-            source.children = children;
-            v.focus = children[0]?.id;
-            v.focusPath = children[0] ? children[0]?.path : undefined;
-            return v;
-        });
-    }
-    async setActiveType(type) {
-        this.update(v => ({ ...v, activetype: type }));
-        await this.changeSource(0);
-    }
-    setFocus(itm) {
-        if (!itm)
-            return;
-        this.update(v => {
-            v.focus = itm.id;
-            v.focusPath = itm.path;
+            if (!v.initialized && !init)
+                return v;
+            const pageSource = v.sources?.page.findIndex(s => s.name === name);
+            const assetSource = v.sources?.asset.findIndex(s => s.name === name);
+            if (pageSource >= 0)
+                return { ...v, activetype: 'page', activesource: pageSource };
+            else if (assetSource >= 0)
+                return { ...v, activetype: 'asset', activesource: assetSource };
             return v;
         });
     }

package/chooser/Details.svelte.d.ts

@@ -1,8 +1,9 @@
 import { SvelteComponentTyped } from "svelte";
-import { type AnyUIItem, type RawURL } from './ChooserStore';
+import type { AnyItem } from './ChooserAPI';
+import { type RawURL } from './ChooserStore';
 declare const __propDef: {
     props: {
-        item: AnyUIItem | RawURL;
+        item: AnyItem | RawURL;
     };
     events: {
         [evt: string]: CustomEvent<any>;
@@ -11,9 +12,9 @@ declare const __propDef: {
         default: {};
     };
 };
-export declare type DetailsProps = typeof __propDef.props;
-export declare type DetailsEvents = typeof __propDef.events;
-export declare type DetailsSlots = typeof __propDef.slots;
+export type DetailsProps = typeof __propDef.props;
+export type DetailsEvents = typeof __propDef.events;
+export type DetailsSlots = typeof __propDef.slots;
 export default class Details extends SvelteComponentTyped<DetailsProps, DetailsEvents, DetailsSlots> {
 }
 export {};

package/chooser/Thumbnail.svelte

@@ -25,12 +25,19 @@ export let item;
     width: 100%;
     padding-top: 75%;
   }
-  img {
+  .dialog-chooser-thumbnail img {
     width: 100%;
     height: 100%;
     object-fit: scale-down;
   }
-  .dialog-chooser-thumbnail > * {
+  .dialog-chooser-thumbnail :global(svg) {
+    width: 60%;
+    height: 60%;
+    min-width: 4.5em;
+    min-height: 4.5em;
+    object-fit: scale-down;
+  }
+  .dialog-chooser-thumbnail > :global(*) {
     display: block;
     position: absolute;
     top: 50%;

package/chooser/Thumbnail.svelte.d.ts

@@ -1,17 +1,18 @@
 import { SvelteComponentTyped } from "svelte";
-import type { AnyUIItem, RawURL } from './ChooserStore';
+import type { AnyItem } from './ChooserAPI';
+import type { RawURL } from './ChooserStore';
 declare const __propDef: {
     props: {
-        item: AnyUIItem | RawURL;
+        item: AnyItem | RawURL;
     };
     events: {
         [evt: string]: CustomEvent<any>;
     };
     slots: {};
 };
-export declare type ThumbnailProps = typeof __propDef.props;
-export declare type ThumbnailEvents = typeof __propDef.events;
-export declare type ThumbnailSlots = typeof __propDef.slots;
+export type ThumbnailProps = typeof __propDef.props;
+export type ThumbnailEvents = typeof __propDef.events;
+export type ThumbnailSlots = typeof __propDef.slots;
 export default class Thumbnail extends SvelteComponentTyped<ThumbnailProps, ThumbnailEvents, ThumbnailSlots> {
 }
 export {};

package/colorpicker/FieldColorPicker.svelte

@@ -1,43 +1,97 @@
 <script>import FieldStandard from '../FieldStandard.svelte';
-import { keyby } from 'txstate-utils';
+import { getDescribedBy, Radio } from '..';
+import { randomid } from 'txstate-utils';
 export let id = undefined;
 let className = '';
 export { className as class };
 export let path;
 export let options;
+export let addAllOption = false;
 export let label = '';
 export let required = false;
-export let disabled = false;
 export let notNull = false;
-export let defaultValue = notNull ? options[0].value : undefined;
+export let defaultValue = notNull ? (addAllOption ? 'alternating' : options[0].value) : undefined;
 export let conditional = undefined;
-export let placeholder = 'Select' + (label ? ' ' + label : '');
-export let inputelement = undefined;
-const colorsByValue = keyby(options, 'value');
+export let helptext = undefined;
+const groupid = randomid();
 </script>
 
-<FieldStandard bind:id {path} {label} {required} {defaultValue} {conditional} let:id let:value let:valid let:invalid let:onBlur let:onChange>
-  <div class="flex-color-container">
-    <div class="selected-color" style="background-color: { value ? colorsByValue[value].color : 'transparent' }"/>
-    <select bind:this={inputelement} {id} name={path} {disabled} class="dialog-input dialog-select {className}" on:change={onChange} on:blur={onBlur} class:valid class:invalid>
-      {#if !notNull}<option value="" selected={!value}>{placeholder}</option>{/if}
-      {#each options as option (option.value) }
-        <option value={option.value} selected={value === option.value}>{option.name || option.value}</option>
-      {/each}
-    </select>
+<FieldStandard bind:id descid={groupid} {path} {label} {required} {defaultValue} {conditional} {helptext} let:value let:valid let:invalid let:onBlur let:onChange let:messagesid let:helptextid>
+  <div class="color-container {className}" role="radiogroup" aria-labelledby={groupid} class:invalid class:valid>
+    {#if addAllOption}
+      <label for={`${path}.alt`} class="colorsel alternating">
+        <Radio id={`${path}.alt`} name={path} value="alternating" selected={value === 'alternating'} {onChange} {onBlur} {helptextid}/>
+        <span class="alternating-bg">
+          {#each options as option}
+            <span style={`background-color: ${option.color}`}></span>
+          {/each}
+        </span>
+        <span class="alternating-text">Alternating</span>
+      </label>
+    {/if}
+    {#each options as option, idx (option.value) }
+      {@const radioid = `${path}.${idx}`}
+      <label for={radioid} class="colorsel">
+        <Radio id={radioid} name={path} value={option.value} selected={value === option.value} {onChange} {onBlur} {helptextid}/>
+        <span style={`background-color: ${option.color}`}>{option.name || option.value}</span>
+      </label>
+    {/each}
   </div>
 </FieldStandard>
 
 <style>
-  .flex-color-container {
+  .color-container {
+    display: grid;
+    grid-gap: 10px;
+    grid-template-columns: 1fr 1fr 1fr;
+  }
+
+  label.colorsel :global(input[type="radio"]) {
+    border: 0;
+    clip: rect(0 0 0 0);
+    height: 1px;
+    margin: -1px;
+    overflow: hidden;
+    padding: 0;
+    position: absolute;
+    width: 1px;
+  }
+
+  label.colorsel :global(input[type="radio"] + span) {
+    display: inline-block;
+    font-weight: bold;
+    padding: 1rem;
+    width: 100%;
+    text-align: center;
+    white-space: nowrap;
+    border: 1px solid #D1D1D1;
+  }
+
+  label.colorsel :global(input[type="radio"]:checked + span) {
+    outline: 5px solid #93BBC4;
+  }
+
+  label.colorsel.alternating {
+    position: relative;
+  }
+
+  label.colorsel.alternating span.alternating-bg {
     display: flex;
-    align-items: center;
-  }
-  .selected-color {
-    height: 2em;
-    width: 2em;
-    margin-right: 1em;
-    border: 1px solid #6d6d6d;
-    border-radius: 3px;
+    padding: 0;
+    height: 100%;
+  }
+
+  label.colorsel.alternating span.alternating-bg span {
+    width: 100%;
+  }
+
+  label.colorsel.alternating span.alternating-text {
+    position: absolute;
+    left: 50%;
+    top: 50%;
+    transform: translate(-50%, -50%);
+    font-weight: bold;
+    color: white;
+    text-shadow: 1px 1px 0 #222, 1px -1px 0 #222, -1px 1px 0 #222, -1px -1px 0 #222;
   }
 </style>

package/colorpicker/FieldColorPicker.svelte.d.ts

@@ -6,23 +6,22 @@ declare const __propDef: {
         class?: string;
         path: string;
         options: ColorPickerOption[];
+        addAllOption?: boolean;
         label?: string;
         required?: boolean;
-        disabled?: boolean;
         notNull?: boolean;
         defaultValue?: any;
         conditional?: boolean | undefined;
-        placeholder?: string;
-        inputelement?: HTMLSelectElement;
+        helptext?: string | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;
     };
     slots: {};
 };
-export declare type FieldColorPickerProps = typeof __propDef.props;
-export declare type FieldColorPickerEvents = typeof __propDef.events;
-export declare type FieldColorPickerSlots = typeof __propDef.slots;
+export type FieldColorPickerProps = typeof __propDef.props;
+export type FieldColorPickerEvents = typeof __propDef.events;
+export type FieldColorPickerSlots = typeof __propDef.slots;
 export default class FieldColorPicker extends SvelteComponentTyped<FieldColorPickerProps, FieldColorPickerEvents, FieldColorPickerSlots> {
 }
 export {};

package/iconpicker/FieldIconPicker.svelte

@@ -3,12 +3,14 @@ import { ScreenReaderOnly, Modal, modifierKey } from '@txstate-mws/svelte-compon
 import { FontAwesomeIcons, IconCategories } from './iconpicker';
 import Icon from '@iconify/svelte';
 import { randomid, keyby } from 'txstate-utils';
+import { getDescribedBy } from '../helpers';
 export let id = undefined;
 export let path;
 export let label = '';
 export let required = false;
 export let defaultValue = { icon: 'fa-graduation-cap', prefix: 'fas' };
 export let conditional = undefined;
+export let helptext = undefined;
 const labelid = randomid();
 const descid = randomid();
 let modalOpen = false;
@@ -101,9 +103,9 @@ function onKeyDown(e) {
 }
 </script>
 
-<FieldStandard bind:id {path} {label} {required} {defaultValue} {conditional} let:value let:valid let:invalid let:id let:onBlur let:setVal>
+<FieldStandard bind:id {path} {descid} {label} {required} {defaultValue} {conditional} {helptext} let:value let:valid let:invalid let:id let:onBlur let:setVal let:messagesid let:helptextid>
   <Icon icon={`${value.prefix === 'fab' ? 'fa-brands' : 'fa-solid'}:${value.icon.slice(3)}`}/>
-  <button id="btnSelectIcon" on:click={() => { modalOpen = true }}>Select New Icon</button>
+  <button id="btnSelectIcon" on:click={() => { modalOpen = true }} aria-describedby={getDescribedBy([descid, messagesid, helptextid])}>Select New Icon</button>
   {#if modalOpen}
   <Modal>
     <section>

package/iconpicker/FieldIconPicker.svelte.d.ts

@@ -10,15 +10,16 @@ declare const __propDef: {
             prefix: string;
         };
         conditional?: boolean | undefined;
+        helptext?: string | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;
     };
     slots: {};
 };
-export declare type FieldIconPickerProps = typeof __propDef.props;
-export declare type FieldIconPickerEvents = typeof __propDef.events;
-export declare type FieldIconPickerSlots = typeof __propDef.slots;
+export type FieldIconPickerProps = typeof __propDef.props;
+export type FieldIconPickerEvents = typeof __propDef.events;
+export type FieldIconPickerSlots = typeof __propDef.slots;
 export default class FieldIconPicker extends SvelteComponentTyped<FieldIconPickerProps, FieldIconPickerEvents, FieldIconPickerSlots> {
 }
 export {};

package/index.d.ts

@@ -1,4 +1,5 @@
 export { default as Button } from './Button.svelte';
+export { default as ButtonGroup } from './ButtonGroup.svelte';
 export { default as Checkbox } from './Checkbox.svelte';
 export { default as Container } from './Container.svelte';
 export { default as Dialog } from './Dialog.svelte';
@@ -10,6 +11,7 @@ export { default as FieldDate } from './FieldDate.svelte';
 export { default as FieldDateTime } from './FieldDateTime.svelte';
 export { default as FieldDualListbox } from './FieldDualListbox.svelte';
 export { default as FieldHidden } from './FieldHidden.svelte';
+export { default as FieldIdentifier } from './FieldIdentifier.svelte';
 export { default as FieldMultiple } from './FieldMultiple.svelte';
 export { default as FieldMultiselect } from './FieldMultiselect.svelte';
 export { default as FieldNumber } from './FieldNumber.svelte';
@@ -35,3 +37,4 @@ export * from './TabStore.js';
 export * from './iconpicker/index.js';
 export * from './colorpicker/index.js';
 export * from './helpers.js';
+export * from './tree/index.js';

package/index.js

@@ -1,4 +1,5 @@
 export { default as Button } from './Button.svelte';
+export { default as ButtonGroup } from './ButtonGroup.svelte';
 export { default as Checkbox } from './Checkbox.svelte';
 export { default as Container } from './Container.svelte';
 export { default as Dialog } from './Dialog.svelte';
@@ -10,6 +11,7 @@ export { default as FieldDate } from './FieldDate.svelte';
 export { default as FieldDateTime } from './FieldDateTime.svelte';
 export { default as FieldDualListbox } from './FieldDualListbox.svelte';
 export { default as FieldHidden } from './FieldHidden.svelte';
+export { default as FieldIdentifier } from './FieldIdentifier.svelte';
 export { default as FieldMultiple } from './FieldMultiple.svelte';
 export { default as FieldMultiselect } from './FieldMultiselect.svelte';
 export { default as FieldNumber } from './FieldNumber.svelte';
@@ -35,3 +37,4 @@ export * from './TabStore.js';
 export * from './iconpicker/index.js';
 export * from './colorpicker/index.js';
 export * from './helpers.js';
+export * from './tree/index.js';

package/package.json

@@ -1,9 +1,9 @@
 {
   "name": "@dosgato/dialog",
   "description": "A component library for building forms that edit a JSON document.",
-  "version": "0.0.20",
+  "version": "0.0.21",
   "dependencies": {
-    "@txstate-mws/svelte-components": "^1.3.4",
+    "@txstate-mws/svelte-components": "^1.3.5",
     "@txstate-mws/svelte-forms": "^1.1.2",
     "@iconify/svelte": "^3.0.0",
     "@iconify-icons/mdi": "^1.2.22",
@@ -60,13 +60,10 @@
     "./Tab.svelte": "./Tab.svelte",
     "./TabStore": "./TabStore.js",
     "./Tabs.svelte": "./Tabs.svelte",
-    "./chooser/Asset.svelte": "./chooser/Asset.svelte",
-    "./chooser/AssetFolder.svelte": "./chooser/AssetFolder.svelte",
     "./chooser/Chooser.svelte": "./chooser/Chooser.svelte",
     "./chooser/ChooserAPI": "./chooser/ChooserAPI.js",
     "./chooser/ChooserStore": "./chooser/ChooserStore.js",
     "./chooser/Details.svelte": "./chooser/Details.svelte",
-    "./chooser/Page.svelte": "./chooser/Page.svelte",
     "./chooser/Thumbnail.svelte": "./chooser/Thumbnail.svelte",
     "./chooser": "./chooser/index.js",
     "./colorpicker/FieldColorPicker.svelte": "./colorpicker/FieldColorPicker.svelte",
@@ -77,7 +74,13 @@
     "./iconpicker/FieldIconPicker.svelte": "./iconpicker/FieldIconPicker.svelte",
     "./iconpicker/iconpicker": "./iconpicker/iconpicker.js",
     "./iconpicker": "./iconpicker/index.js",
-    ".": "./index.js"
+    ".": "./index.js",
+    "./tree/LoadIcon.svelte": "./tree/LoadIcon.svelte",
+    "./tree/Tree.svelte": "./tree/Tree.svelte",
+    "./tree/TreeCell.svelte": "./tree/TreeCell.svelte",
+    "./tree/TreeNode.svelte": "./tree/TreeNode.svelte",
+    "./tree": "./tree/index.js",
+    "./tree/treestore": "./tree/treestore.js"
   },
   "svelte": "./index.js"
 }

package/tree/LoadIcon.svelte

@@ -0,0 +1,24 @@
+<script>
+  export let size = '1em'
+</script>
+
+<i aria-hidden="true" style:width={size} style:padding-top={size}></i>
+
+<style>
+  i {
+    display: inline-block;
+    box-sizing: content-box;
+    border-color: var(--loadicon-bg-color, #FFFFFF);
+    border-top-color: var(--loadicon-moving-color, #333333);
+    border-style: solid;
+    border-radius: 50%;
+    animation: spin 2s linear infinite;
+    margin-left: 0.3em;
+    vertical-align: middle;
+  }
+
+  @keyframes spin {
+    0% { transform: rotate(0deg); }
+    100% { transform: rotate(360deg); }
+  }
+</style>

package/tree/LoadIcon.svelte.d.ts

@@ -0,0 +1,23 @@
+/** @typedef {typeof __propDef.props}  LoadIconProps */
+/** @typedef {typeof __propDef.events}  LoadIconEvents */
+/** @typedef {typeof __propDef.slots}  LoadIconSlots */
+export default class LoadIcon extends SvelteComponentTyped<{
+    size?: string;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}> {
+}
+export type LoadIconProps = typeof __propDef.props;
+export type LoadIconEvents = typeof __propDef.events;
+export type LoadIconSlots = typeof __propDef.slots;
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        size?: string;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export {};