@geoffcox/sterling-svelte 1.0.12 → 2.0.0

package/dist/Tab.svelte.d.ts

@@ -1,71 +0,0 @@
-import { SvelteComponent } from "svelte";
-declare const __propDef: {
-    props: {
-        /**
-           * When true, the tab is disabled.
-           * The tab is also disabled when its parent tab list is disabled.
-           */ disabled?: boolean | undefined;
-        /** When true, the tab is selected. */ selected?: boolean | undefined;
-        /** The text of the tab. Not used when the default slot is filled. */ text?: string | undefined;
-        /** The value uniquely identifying this tab within the tab list. */ value: string;
-        /** Additional class names to apply. */ variant?: string | undefined;
-        click?: (() => void) | undefined;
-        blur?: (() => void) | undefined;
-        focus?: ((options?: FocusOptions) => void) | undefined;
-    };
-    events: {
-        blur: FocusEvent;
-        click: MouseEvent;
-        dblclick: MouseEvent;
-        dragend: DragEvent;
-        dragenter: DragEvent;
-        dragleave: DragEvent;
-        dragover: DragEvent;
-        dragstart: DragEvent;
-        drop: DragEvent;
-        focus: FocusEvent;
-        focusin: FocusEvent;
-        focusout: FocusEvent;
-        keydown: KeyboardEvent;
-        keypress: KeyboardEvent;
-        keyup: KeyboardEvent;
-        mousedown: MouseEvent;
-        mouseenter: MouseEvent;
-        mouseleave: MouseEvent;
-        mousemove: MouseEvent;
-        mouseover: MouseEvent;
-        mouseout: MouseEvent;
-        mouseup: MouseEvent;
-        pointercancel: PointerEvent;
-        pointerdown: PointerEvent;
-        pointerenter: PointerEvent;
-        pointerleave: PointerEvent;
-        pointermove: PointerEvent;
-        pointerover: PointerEvent;
-        pointerout: PointerEvent;
-        pointerup: PointerEvent;
-        wheel: WheelEvent;
-    } & {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {
-        default: {
-            disabled: boolean;
-            selected: boolean;
-            text: string | undefined;
-            value: string;
-            variant: string;
-        };
-    };
-    exports?: {} | undefined;
-    bindings?: string | undefined;
-};
-export type TabProps = typeof __propDef.props;
-export type TabEvents = typeof __propDef.events;
-export type TabSlots = typeof __propDef.slots;
-export default class Tab extends SvelteComponent<TabProps, TabEvents, TabSlots> {
-    get click(): () => void;
-    get blur(): () => void;
-    get focus(): (options?: FocusOptions | undefined) => void;
-}
-export {};

package/dist/TabList.svelte.d.ts

@@ -1,70 +0,0 @@
-import { SvelteComponent } from "svelte";
-declare const __propDef: {
-    props: {
-        [x: string]: any;
-        disabled?: boolean | undefined;
-        selectedValue?: string | undefined;
-        vertical?: boolean | undefined;
-        variant?: string | undefined;
-        blur?: (() => void) | undefined;
-        focus?: ((options?: FocusOptions) => void) | undefined;
-        selectFirstTab?: (() => boolean) | undefined;
-        selectPreviousTab?: (() => boolean) | undefined;
-        selectNextTab?: (() => boolean) | undefined;
-        selectLastTab?: (() => boolean) | undefined;
-    };
-    events: {
-        blur: FocusEvent;
-        click: MouseEvent;
-        copy: ClipboardEvent;
-        cut: ClipboardEvent;
-        dblclick: MouseEvent;
-        dragend: DragEvent;
-        dragenter: DragEvent;
-        dragleave: DragEvent;
-        dragover: DragEvent;
-        dragstart: DragEvent;
-        drop: DragEvent;
-        focus: FocusEvent;
-        focusin: FocusEvent;
-        focusout: FocusEvent;
-        keydown: KeyboardEvent;
-        keypress: KeyboardEvent;
-        keyup: KeyboardEvent;
-        mousedown: MouseEvent;
-        mouseenter: MouseEvent;
-        mouseleave: MouseEvent;
-        mousemove: MouseEvent;
-        mouseover: MouseEvent;
-        mouseout: MouseEvent;
-        mouseup: MouseEvent;
-        scroll: Event;
-        wheel: WheelEvent;
-        paste: ClipboardEvent;
-        select: CustomEvent<any>;
-    } & {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {
-        default: {
-            disabled: boolean;
-            selectedValue: string | undefined;
-            variant: string;
-            vertical: boolean;
-        };
-    };
-    exports?: undefined;
-    bindings?: undefined;
-};
-export type TabListProps = typeof __propDef.props;
-export type TabListEvents = typeof __propDef.events;
-export type TabListSlots = typeof __propDef.slots;
-export default class TabList extends SvelteComponent<TabListProps, TabListEvents, TabListSlots> {
-    get blur(): () => void;
-    get focus(): (options?: FocusOptions | undefined) => void;
-    get selectFirstTab(): () => boolean;
-    get selectPreviousTab(): () => boolean;
-    get selectNextTab(): () => boolean;
-    get selectLastTab(): () => boolean;
-}
-export {};

package/dist/TabList.types.d.ts

@@ -1,13 +0,0 @@
-/// <reference types="svelte" />
-import type { Readable, Writable } from 'svelte/store';
-/**
- * The context for a TabList and its tabs.
- */
-export type TabListContext = {
-    /** When true, the tablist and its tabs are disabled. */
-    disabled: Readable<boolean>;
-    /** The value of the currently selected tab. */
-    selectedValue: Writable<string | undefined>;
-    /** When true, the tabs are displayed vertically. */
-    vertical: Readable<boolean>;
-};

package/dist/TextArea.svelte.d.ts

@@ -1,69 +0,0 @@
-import { SvelteComponent } from "svelte";
-declare const __propDef: {
-    props: {
-        [x: string]: any;
-        disabled?: boolean | undefined;
-        value?: string | undefined;
-        autoHeight?: boolean | undefined;
-        resize?: "none" | "vertical" | "horizontal" | "both" | undefined;
-        variant?: string | undefined;
-        blur?: (() => void) | undefined;
-        click?: (() => void) | undefined;
-        focus?: ((options?: FocusOptions) => void) | undefined;
-        select?: (() => void) | undefined;
-        setSelectionRange?: ((start: number | null, end: number | null, direction?: 'forward' | 'backward' | 'none') => void) | undefined;
-        setRangeText?: ((replacement: string, start?: number, end?: number, selectionMode?: SelectionMode) => void) | undefined;
-    };
-    events: {
-        beforeinput: InputEvent;
-        blur: FocusEvent;
-        click: MouseEvent;
-        change: Event;
-        copy: ClipboardEvent;
-        cut: ClipboardEvent;
-        paste: ClipboardEvent;
-        dblclick: MouseEvent;
-        dragend: DragEvent;
-        dragenter: DragEvent;
-        dragleave: DragEvent;
-        dragover: DragEvent;
-        dragstart: DragEvent;
-        drop: DragEvent;
-        focus: FocusEvent;
-        focusin: FocusEvent;
-        focusout: FocusEvent;
-        input: Event;
-        invalid: Event;
-        keydown: KeyboardEvent;
-        keypress: KeyboardEvent;
-        keyup: KeyboardEvent;
-        mousedown: MouseEvent;
-        mouseenter: MouseEvent;
-        mouseleave: MouseEvent;
-        mousemove: MouseEvent;
-        mouseover: MouseEvent;
-        mouseout: MouseEvent;
-        mouseup: MouseEvent;
-        select: Event;
-        submit: SubmitEvent;
-        reset: Event;
-        wheel: WheelEvent;
-    } & {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
-    exports?: undefined;
-    bindings?: undefined;
-};
-export type TextAreaProps = typeof __propDef.props;
-export type TextAreaEvents = typeof __propDef.events;
-export type TextAreaSlots = typeof __propDef.slots;
-export default class TextArea extends SvelteComponent<TextAreaProps, TextAreaEvents, TextAreaSlots> {
-    get blur(): () => void;
-    get click(): () => void;
-    get focus(): (options?: FocusOptions | undefined) => void;
-    get select(): () => void;
-    get setSelectionRange(): (start: number | null, end: number | null, direction?: "forward" | "backward" | "none" | undefined) => void;
-    get setRangeText(): (replacement: string, start?: number | undefined, end?: number | undefined, selectionMode?: SelectionMode | undefined) => void;
-}
-export {};

package/dist/Tooltip.svelte

@@ -1,106 +0,0 @@
-<script>import { onMount } from 'svelte';
-import Callout from './Callout.svelte';
-// ----- Props ----- //
-// Forwarded to Callout
-export let conditionalRender = true;
-export let crossAxisOffset = 0;
-export let mainAxisOffset = 0;
-export let open = false;
-export let placement = 'top-start';
-export let portalHost = undefined;
-export let variant = '';
-/** When true, the tooltip is disabled and will not be shown. */
-export let disabled = false;
-/** The duration of mouse hover before showing the tooltip. */
-export let hoverDelayMilliseconds = 1000;
-// ----- State ----- //
-let originRef;
-$: reference = $$slots.default ? originRef?.previousElementSibling : undefined;
-// ----- Show/Hide ----- //
-const show = () => {
-    if (!disabled) {
-        open = true;
-    }
-};
-const hide = () => (open = false);
-const delayShow = () => {
-    hoverDelayMilliseconds === 0
-        ? show()
-        : setTimeout(() => {
-            show();
-        }, hoverDelayMilliseconds);
-};
-$: {
-    if (disabled) {
-        hide();
-    }
-}
-// ----- Event Listeners ----- //
-let cleanupAutoShowUpdate = () => { };
-const autoShowUpdate = () => {
-    cleanupAutoShowUpdate();
-    cleanupAutoShowUpdate = () => { };
-    const element = reference;
-    open = false;
-    if (element) {
-        element.addEventListener('mouseenter', delayShow);
-        element.addEventListener('mouseleave', hide);
-        cleanupAutoShowUpdate = () => {
-            element.removeEventListener('mouseenter', delayShow);
-            element.removeEventListener('mouseleave', hide);
-        };
-    }
-};
-$: reference, autoShowUpdate();
-// ----- EventHandlers ----- //
-onMount(() => {
-    autoShowUpdate();
-});
-</script>
-
-<slot {disabled} {hoverDelayMilliseconds} {open} {variant} />
-<div class="sterling-tooltip-origin" bind:this={originRef} />
-<Callout
-  {conditionalRender}
-  {crossAxisOffset}
-  {mainAxisOffset}
-  {open}
-  {placement}
-  {portalHost}
-  {reference}
-  {variant}
-  on:blur
-  on:click
-  on:dblclick
-  on:dragend
-  on:dragenter
-  on:dragleave
-  on:dragover
-  on:dragstart
-  on:drop
-  on:focus
-  on:focusin
-  on:focusout
-  on:keydown
-  on:keypress
-  on:keyup
-  on:mousedown
-  on:mouseenter
-  on:mouseleave
-  on:mousemove
-  on:mouseover
-  on:mouseout
-  on:mouseup
-  on:pointercancel
-  on:pointerdown
-  on:pointerenter
-  on:pointerleave
-  on:pointermove
-  on:pointerover
-  on:pointerout
-  on:pointerup
-  on:wheel
-  {...$$restProps}
->
-  <slot name="tip" {placement} {variant} />
-</Callout>

package/dist/Tooltip.svelte.d.ts

@@ -1,70 +0,0 @@
-import { SvelteComponent } from "svelte";
-declare const __propDef: {
-    props: {
-        [x: string]: any;
-        conditionalRender?: boolean | undefined;
-        crossAxisOffset?: number | undefined;
-        mainAxisOffset?: number | undefined;
-        open?: boolean | undefined;
-        placement?: string | undefined;
-        portalHost?: HTMLElement | undefined;
-        variant?: string | undefined;
-        disabled?: boolean | undefined;
-        hoverDelayMilliseconds?: number | undefined;
-    };
-    events: {
-        blur: FocusEvent;
-        click: MouseEvent;
-        dblclick: MouseEvent;
-        dragend: DragEvent;
-        dragenter: DragEvent;
-        dragleave: DragEvent;
-        dragover: DragEvent;
-        dragstart: DragEvent;
-        drop: DragEvent;
-        focus: FocusEvent;
-        focusin: FocusEvent;
-        focusout: FocusEvent;
-        keydown: KeyboardEvent;
-        keypress: KeyboardEvent;
-        keyup: KeyboardEvent;
-        mousedown: MouseEvent;
-        mouseenter: MouseEvent;
-        mouseleave: MouseEvent;
-        mousemove: MouseEvent;
-        mouseover: MouseEvent;
-        mouseout: MouseEvent;
-        mouseup: MouseEvent;
-        pointercancel: CustomEvent<any>;
-        pointerdown: CustomEvent<any>;
-        pointerenter: CustomEvent<any>;
-        pointerleave: CustomEvent<any>;
-        pointermove: CustomEvent<any>;
-        pointerover: CustomEvent<any>;
-        pointerout: CustomEvent<any>;
-        pointerup: CustomEvent<any>;
-        wheel: WheelEvent;
-    } & {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {
-        default: {
-            disabled: boolean;
-            hoverDelayMilliseconds: number;
-            open: boolean;
-            variant: string;
-        };
-        tip: {
-            placement: string;
-            variant: string;
-        };
-    };
-    exports?: undefined;
-    bindings?: undefined;
-};
-export type TooltipProps = typeof __propDef.props;
-export type TooltipEvents = typeof __propDef.events;
-export type TooltipSlots = typeof __propDef.slots;
-export default class Tooltip extends SvelteComponent<TooltipProps, TooltipEvents, TooltipSlots> {
-}
-export {};

package/dist/Tree.svelte

@@ -1,104 +0,0 @@
-<script>import { createEventDispatcher, setContext } from 'svelte';
-import { writable } from 'svelte/store';
-import { TREE_CONTEXT_KEY } from './Tree.constants';
-import { usingKeyboard } from './mediaQueries/usingKeyboard';
-// ----- Props ----- //
-/** When true, the tree and its descendants are disabled. */
-export let disabled = false;
-/** The value of the currently selected item. */
-export let selectedValue = undefined;
-/** The values of items that are expanded. */
-export let expandedValues = [];
-/** Additional class names to apply. */
-export let variant = '';
-// ----- State ----- //
-let treeRef;
-const disabledStore = writable(disabled);
-const expandedValuesStore = writable(expandedValues);
-const selectedValueStore = writable(selectedValue);
-// ----- Methods ----- //
-export const blur = () => {
-    treeRef?.blur();
-};
-export const focus = (options) => {
-    treeRef?.focus(options);
-};
-// ----- Events ----- //
-const dispatch = createEventDispatcher();
-const raiseExpandCollapse = (expandedValues) => {
-    dispatch('expandCollapse', { expandedValues });
-};
-const raiseSelect = (selectedValue) => {
-    dispatch('select', { selectedValue });
-};
-// ----- Reactions ----- //
-$: {
-    selectedValueStore.set(selectedValue);
-}
-$: {
-    selectedValue = $selectedValueStore;
-    raiseSelect($selectedValueStore);
-}
-$: {
-    expandedValuesStore.set(expandedValues);
-}
-$: {
-    expandedValues = $expandedValuesStore;
-    raiseExpandCollapse($expandedValuesStore);
-}
-$: {
-    disabledStore.set(disabled);
-}
-// ----- Set Context ----- //
-setContext(TREE_CONTEXT_KEY, {
-    disabled: disabledStore,
-    expandedValues: expandedValuesStore,
-    selectedValue: selectedValueStore
-});
-</script>
-
-<div
-  bind:this={treeRef}
-  aria-disabled={disabled}
-  class={`sterling-tree ${variant}`}
-  class:disabled
-  class:using-keyboard={$usingKeyboard}
-  role="tree"
-  tabindex="0"
-  on:blur
-  on:click
-  on:dblclick
-  on:dragend
-  on:dragenter
-  on:dragleave
-  on:dragover
-  on:dragstart
-  on:drop
-  on:focus
-  on:focusin
-  on:focusout
-  on:keydown
-  on:keypress
-  on:keyup
-  on:mousedown
-  on:mouseenter
-  on:mouseleave
-  on:mousemove
-  on:mouseover
-  on:mouseout
-  on:mouseup
-  on:pointercancel
-  on:pointerdown
-  on:pointerenter
-  on:pointerleave
-  on:pointermove
-  on:pointerover
-  on:pointerout
-  on:pointerup
-  on:wheel|passive
-  {...$$restProps}
->
-  <div class="container">
-    <slot {disabled} {expandedValues} {selectedValue} {variant} />
-  </div>
-</div>

package/dist/Tree.svelte.d.ts

@@ -1,67 +0,0 @@
-import { SvelteComponent } from "svelte";
-declare const __propDef: {
-    props: {
-        [x: string]: any;
-        disabled?: boolean | undefined;
-        selectedValue?: string | undefined;
-        expandedValues?: string[] | undefined;
-        variant?: string | undefined;
-        blur?: (() => void) | undefined;
-        focus?: ((options?: FocusOptions) => void) | undefined;
-    };
-    events: {
-        blur: FocusEvent;
-        click: MouseEvent;
-        dblclick: MouseEvent;
-        dragend: DragEvent;
-        dragenter: DragEvent;
-        dragleave: DragEvent;
-        dragover: DragEvent;
-        dragstart: DragEvent;
-        drop: DragEvent;
-        focus: FocusEvent;
-        focusin: FocusEvent;
-        focusout: FocusEvent;
-        keydown: KeyboardEvent;
-        keypress: KeyboardEvent;
-        keyup: KeyboardEvent;
-        mousedown: MouseEvent;
-        mouseenter: MouseEvent;
-        mouseleave: MouseEvent;
-        mousemove: MouseEvent;
-        mouseover: MouseEvent;
-        mouseout: MouseEvent;
-        mouseup: MouseEvent;
-        pointercancel: PointerEvent;
-        pointerdown: PointerEvent;
-        pointerenter: PointerEvent;
-        pointerleave: PointerEvent;
-        pointermove: PointerEvent;
-        pointerover: PointerEvent;
-        pointerout: PointerEvent;
-        pointerup: PointerEvent;
-        wheel: WheelEvent;
-        expandCollapse: CustomEvent<any>;
-        select: CustomEvent<any>;
-    } & {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {
-        default: {
-            disabled: boolean;
-            expandedValues: string[];
-            selectedValue: string | undefined;
-            variant: string;
-        };
-    };
-    exports?: undefined;
-    bindings?: undefined;
-};
-export type TreeProps = typeof __propDef.props;
-export type TreeEvents = typeof __propDef.events;
-export type TreeSlots = typeof __propDef.slots;
-export default class Tree extends SvelteComponent<TreeProps, TreeEvents, TreeSlots> {
-    get blur(): () => void;
-    get focus(): (options?: FocusOptions | undefined) => void;
-}
-export {};

package/dist/Tree.types.d.ts

@@ -1,13 +0,0 @@
-/// <reference types="svelte" />
-import type { Readable, Writable } from 'svelte/store';
-/**
- * The context for a Tree and its descendants.
- */
-export type TreeContext = {
-    /** When true, the tree and its descendants are disabled. */
-    disabled: Readable<boolean>;
-    /** The values of items that are expanded. */
-    expandedValues: Writable<string[]>;
-    /** The value of the currently selected item. */
-    selectedValue: Writable<string | undefined>;
-};

package/dist/TreeChevron.svelte

@@ -1,66 +0,0 @@
-<script>import { onMount } from 'svelte';
-// ----- Props ----- //
-/** When true, the chevron rotates to indicate children are visible. */
-export let expanded = false;
-/** When true, the chevron is displayed, otherwise a dot is displayed. */
-export let hasChildren = false;
-/** Additional class names to apply. */
-export let variant = '';
-// ----- State ----- //
-let previousExpanded = expanded;
-let mounted = false;
-// ----- Event Handlers ----- //
-onMount(() => {
-    setTimeout(() => {
-        mounted = true;
-    }, 0);
-});
-// ----- Animation ----- //
-let animate = false;
-$: {
-    if (expanded !== previousExpanded && mounted) {
-        animate = true;
-    }
-    previousExpanded = expanded;
-}
-</script>
-
-<!-- svelte-ignore a11y-no-static-element-interactions -->
-<div
-  class={`sterling-tree-chevron ${variant}`}
-  class:leaf={!hasChildren}
-  class:animate
-  class:expanded
-  on:blur
-  on:click
-  on:dblclick
-  on:dragend
-  on:dragenter
-  on:dragleave
-  on:dragover
-  on:dragstart
-  on:drop
-  on:focus
-  on:focusin
-  on:focusout
-  on:keydown
-  on:keypress
-  on:keyup
-  on:mousedown
-  on:mouseenter
-  on:mouseleave
-  on:mousemove
-  on:mouseover
-  on:mouseout
-  on:mouseup
-  on:pointercancel
-  on:pointerdown
-  on:pointerenter
-  on:pointerleave
-  on:pointermove
-  on:pointerover
-  on:pointerout
-  on:pointerup
-  on:wheel|passive
-  {...$$restProps}
-/>