@geoffcox/sterling-svelte 1.0.11 → 2.0.0

package/dist/MenuItem.svelte.d.ts

@@ -1,83 +0,0 @@
-import { SvelteComponent } from "svelte";
-declare const __propDef: {
-    props: {
-        [x: string]: any;
-        checked?: boolean | undefined;
-        disabled?: boolean | undefined;
-        role?: "menuitem" | "menuitemcheckbox" | "menuitemradio" | undefined;
-        text?: string | undefined;
-        value: string;
-        variant?: string | undefined;
-        menuVariant?: string | undefined;
-        blur?: (() => void) | undefined;
-        click?: (() => 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;
-        close: CustomEvent<any>;
-        open: CustomEvent<any>;
-        select: CustomEvent<any>;
-    } & {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {
-        item: {
-            checked: boolean;
-            depth: number;
-            disabled: boolean;
-            hasChildren: boolean;
-            isMenuBarItem: boolean | undefined;
-            open: boolean;
-            role: "menuitem" | "menuitemcheckbox" | "menuitemradio";
-            text: string | undefined;
-            value: string;
-            variant: string;
-        };
-        default: {
-            depth: number;
-            disabled: boolean;
-        };
-    };
-    exports?: undefined;
-    bindings?: undefined;
-};
-export type MenuItemProps = typeof __propDef.props;
-export type MenuItemEvents = typeof __propDef.events;
-export type MenuItemSlots = typeof __propDef.slots;
-export default class MenuItem extends SvelteComponent<MenuItemProps, MenuItemEvents, MenuItemSlots> {
-    get blur(): () => void;
-    get click(): () => void;
-    get focus(): (options?: FocusOptions | undefined) => void;
-}
-export {};

package/dist/MenuItemDisplay.svelte

@@ -1,32 +0,0 @@
-<script>/** When true, displays the menu item as checked. */
-export let checked = false;
-/** When true, displays the menu item as disabled. */
-export let disabled = false;
-/** When true, displays the menu item as a parent of children. */
-export let hasChildren = false;
-/** When true, displays the menu as a top level menu bar item. */
-export let isMenuBarItem = false;
-/** The role of the menu item. */
-export let menuItemRole = 'menuitem';
-/** Additional class names to apply. */
-export let variant = '';
-</script>
-
-<div class={`sterling-menu-item-display ${variant}`} class:disabled>
-  <div
-    class="check"
-    class:checkmark={menuItemRole === 'menuitemcheckbox'}
-    class:bullet={menuItemRole === 'menuitemradio'}
-    class:checked
-  />
-  <div class="content">
-    <slot {checked} {disabled} {hasChildren} {isMenuBarItem} {menuItemRole} {variant} />
-  </div>
-  {#if $$slots.shortcut}
-    <div class="shortcut">
-      <slot name="shortcut" {checked} {disabled} {isMenuBarItem} {menuItemRole} {variant} />
-    </div>
-  {:else}
-    <div class="chevron" class:has-children={!isMenuBarItem && hasChildren} />
-  {/if}
-</div>

package/dist/MenuItemDisplay.svelte.d.ts

@@ -1,39 +0,0 @@
-import { SvelteComponent } from "svelte";
-declare const __propDef: {
-    props: {
-        /** When true, displays the menu item as checked. */ checked?: boolean | undefined;
-        /** When true, displays the menu item as disabled. */ disabled?: boolean | undefined;
-        /** When true, displays the menu item as a parent of children. */ hasChildren?: boolean | undefined;
-        /** When true, displays the menu as a top level menu bar item. */ isMenuBarItem?: boolean | undefined;
-        /** The role of the menu item. */ menuItemRole?: "menuitem" | "menuitemcheckbox" | "menuitemradio" | undefined;
-        /** Additional class names to apply. */ variant?: string | undefined;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {
-        default: {
-            checked: boolean;
-            disabled: boolean;
-            hasChildren: boolean;
-            isMenuBarItem: boolean;
-            menuItemRole: "menuitem" | "menuitemcheckbox" | "menuitemradio";
-            variant: string;
-        };
-        shortcut: {
-            checked: boolean;
-            disabled: boolean;
-            isMenuBarItem: boolean;
-            menuItemRole: "menuitem" | "menuitemcheckbox" | "menuitemradio";
-            variant: string;
-        };
-    };
-    exports?: {} | undefined;
-    bindings?: string | undefined;
-};
-export type MenuItemDisplayProps = typeof __propDef.props;
-export type MenuItemDisplayEvents = typeof __propDef.events;
-export type MenuItemDisplaySlots = typeof __propDef.slots;
-export default class MenuItemDisplay extends SvelteComponent<MenuItemDisplayProps, MenuItemDisplayEvents, MenuItemDisplaySlots> {
-}
-export {};

package/dist/MenuSeparator.svelte

@@ -1,9 +0,0 @@
-<script>/** Additional class names to apply. */
-export let variant = '';
-</script>
-
-<!--
-@component
-A styled line to visually separate groups of menu items in a menu.
-  -->
-<div class={`sterling-menu-separator ${variant}`} role="separator" {...$$restProps} />

package/dist/MenuSeparator.svelte.d.ts

@@ -1,20 +0,0 @@
-import { SvelteComponent } from "svelte";
-declare const __propDef: {
-    props: {
-        [x: string]: any;
-        variant?: string | undefined;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
-    exports?: undefined;
-    bindings?: undefined;
-};
-export type MenuSeparatorProps = typeof __propDef.props;
-export type MenuSeparatorEvents = typeof __propDef.events;
-export type MenuSeparatorSlots = typeof __propDef.slots;
-/** A styled line to visually separate groups of menu items in a menu. */
-export default class MenuSeparator extends SvelteComponent<MenuSeparatorProps, MenuSeparatorEvents, MenuSeparatorSlots> {
-}
-export {};

package/dist/Popover.svelte.d.ts

@@ -1,59 +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;
-        reference: HTMLElement | undefined;
-        variant?: string | 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;
-    } & {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {
-        default: {
-            open: boolean;
-            variant: string;
-        };
-    };
-    exports?: undefined;
-    bindings?: undefined;
-};
-export type PopoverProps = typeof __propDef.props;
-export type PopoverEvents = typeof __propDef.events;
-export type PopoverSlots = typeof __propDef.slots;
-export default class Popover extends SvelteComponent<PopoverProps, PopoverEvents, PopoverSlots> {
-}
-export {};

package/dist/Progress.constants.d.ts

@@ -1 +0,0 @@
-export declare const PROGRESS_STATUSES: string[];

package/dist/Progress.constants.js

@@ -1 +0,0 @@
-export const PROGRESS_STATUSES = ['none', 'auto', 'info', 'success', 'warning', 'danger'];

package/dist/Progress.svelte

@@ -1,83 +0,0 @@
-<script>//----- Props ----- //
-/** When true, the progress bar is disabled. */
-export let disabled = false;
-/** The maximum value. */
-export let max = 100;
-/** A read-only percentage between 0 and 100 calculated from value and max. */
-export let percent = 0;
-/** The current status of the progress. */
-export let status = 'none';
-/** The current value. */
-export let value = 0;
-/** Additional class names to apply. */
-export let variant = '';
-/** When true, the progress bar is displayed vertically. */
-export let vertical = false;
-//----- State ----- //
-let clientHeight;
-let clientWidth;
-$: clampMax = Math.max(1, max);
-$: clampValue = Math.max(0, Math.min(value, clampMax));
-$: ratio = clampValue / clampMax;
-$: {
-    percent = Math.round(ratio * 100);
-}
-$: percentHeight = clientHeight * ratio;
-$: percentWidth = clientWidth * ratio;
-$: indicatorStyle = vertical ? `height: ${percentHeight}px` : `width: ${percentWidth}px`;
-$: indicatorColor = status === 'auto' ? (percent === 100 ? 'success' : 'info') : status;
-</script>
-
-<!--
-	@component
-	An indicator of a value between 0 and a maximum value.ß
-	Does not use the HTML progress element.
--->
-<!-- svelte-ignore a11y-label-has-associated-control -->
-<!-- svelte-ignore a11y-no-noninteractive-element-interactions -->
-<div
-  class={`sterling-progress ${variant}`}
-  class:disabled
-  class:vertical
-  class:info={indicatorColor === 'info'}
-  class:success={indicatorColor === 'success'}
-  class:warning={indicatorColor === 'warning'}
-  class:error={indicatorColor === 'danger'}
-  role="progressbar"
-  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" bind:clientWidth bind:clientHeight>
-    <div class="indicator" style={indicatorStyle} />
-  </div>
-</div>

package/dist/Progress.svelte.d.ts

@@ -1,61 +0,0 @@
-import { SvelteComponent } from "svelte";
-declare const __propDef: {
-    props: {
-        [x: string]: any;
-        disabled?: boolean | undefined;
-        max?: number | undefined;
-        percent?: number | undefined;
-        status?: string | undefined;
-        value?: number | undefined;
-        variant?: string | undefined;
-        vertical?: boolean | 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: {};
-    exports?: undefined;
-    bindings?: undefined;
-};
-export type ProgressProps = typeof __propDef.props;
-export type ProgressEvents = typeof __propDef.events;
-export type ProgressSlots = typeof __propDef.slots;
-/**
- * An indicator of a value between 0 and a maximum value.ß
- * Does not use the HTML progress element.
- */
-export default class Progress extends SvelteComponent<ProgressProps, ProgressEvents, ProgressSlots> {
-}
-export {};

package/dist/Progress.types.d.ts

@@ -1,4 +0,0 @@
-import type { PROGRESS_STATUSES } from './Progress.constants';
-type ProgressStatusTuple = typeof PROGRESS_STATUSES;
-export type ProgressStatus = ProgressStatusTuple[number];
-export {};

package/dist/Radio.svelte

@@ -1,126 +0,0 @@
-<script>import { idGenerator } from './idGenerator';
-import { usingKeyboard } from './mediaQueries/usingKeyboard';
-// ----- Props ----- //
-export let checked = false;
-export let disabled = false;
-// bind:group doesn't seem to work properly (yet) in a nested radio.
-// The workaround is to export `checked` and `group` properties
-// and implement the same behavior.
-export let group = undefined;
-export let id = undefined;
-/** Additional class names to apply. */
-export let variant = '';
-// ensure initial state is consistent
-if (checked && $$restProps.value !== group) {
-    group = $$restProps.value;
-}
-else if (!checked && $$restProps.value === group) {
-    checked = true;
-}
-// ----- State ----- //
-let inputRef;
-let previousChecked = checked;
-let previousGroup = group;
-const reconcile = () => {
-    if (checked !== previousChecked) {
-        // when checked, set group to value
-        if (checked && $$restProps.value) {
-            group = $$restProps.value;
-            previousGroup = $$restProps.value;
-        }
-        previousChecked = checked;
-    }
-    else if (group !== previousGroup) {
-        // when group changes, update checked
-        if ($$restProps.value) {
-            checked = $$restProps.value === group;
-            previousChecked = checked;
-        }
-        previousGroup = group;
-    }
-};
-$: checked, group, $$restProps.value, reconcile();
-$: {
-    if (inputRef && checked && !inputRef.checked) {
-        // setting checked doesn't cause raise on:change,
-        // so we click the radio to cause it to be checked.
-        inputRef.click();
-    }
-}
-$: {
-    if ($$slots.default && id === undefined) {
-        id = idGenerator.nextId('Radio');
-    }
-}
-// ----- Methods ----- //
-export const blur = () => {
-    inputRef?.blur();
-};
-export const click = () => {
-    inputRef?.click();
-};
-export const focus = (options) => {
-    inputRef?.focus(options);
-};
-// ----- Event Handlers ----- //
-const onChange = (e) => {
-    if (e.currentTarget.checked) {
-        group = $$restProps.value;
-    }
-};
-</script>
-
-<!--
-	@component
-	A styled HTML input type=radio element with optional label.
--->
-<div
-  class={`sterling-radio ${variant}`}
-  class:checked
-  class:disabled
-  class:using-keyboard={$usingKeyboard}
->
-  <div class="container">
-    <input
-      bind:this={inputRef}
-      {checked}
-      {disabled}
-      name={group}
-      {id}
-      type="radio"
-      on:blur
-      on:click
-      on:change
-      on:change={onChange}
-      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:input
-      on:mousedown
-      on:mouseenter
-      on:mouseleave
-      on:mousemove
-      on:mouseover
-      on:mouseout
-      on:mouseup
-      on:wheel|passive
-      {...$$restProps}
-    />
-    <div class="indicator" />
-  </div>
-  {#if $$slots.default}
-    <label for={id}>
-      <slot {checked} {disabled} {group} inputId={id} value={$$restProps.value} {variant} />
-    </label>
-  {/if}
-</div>

package/dist/Radio.svelte.d.ts

@@ -1,65 +0,0 @@
-import { SvelteComponent } from "svelte";
-declare const __propDef: {
-    props: {
-        [x: string]: any;
-        checked?: boolean | undefined;
-        disabled?: boolean | undefined;
-        group?: any | undefined | null;
-        id?: string | undefined;
-        variant?: string | undefined;
-        blur?: (() => void) | undefined;
-        click?: (() => void) | undefined;
-        focus?: ((options?: FocusOptions) => void) | undefined;
-    };
-    events: {
-        blur: FocusEvent;
-        click: MouseEvent;
-        change: Event;
-        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;
-        input: Event;
-        mousedown: MouseEvent;
-        mouseenter: MouseEvent;
-        mouseleave: MouseEvent;
-        mousemove: MouseEvent;
-        mouseover: MouseEvent;
-        mouseout: MouseEvent;
-        mouseup: MouseEvent;
-        wheel: WheelEvent;
-    } & {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {
-        default: {
-            checked: boolean;
-            disabled: boolean;
-            group: any;
-            inputId: string | undefined;
-            value: any;
-            variant: string;
-        };
-    };
-    exports?: undefined;
-    bindings?: undefined;
-};
-export type RadioProps = typeof __propDef.props;
-export type RadioEvents = typeof __propDef.events;
-export type RadioSlots = typeof __propDef.slots;
-/** A styled HTML input type=radio element with optional label. */
-export default class Radio extends SvelteComponent<RadioProps, RadioEvents, RadioSlots> {
-    get blur(): () => void;
-    get click(): () => void;
-    get focus(): (options?: FocusOptions | undefined) => void;
-}
-export {};

package/dist/RgbColorSliders.svelte

@@ -1,93 +0,0 @@
-<script>import { createEventDispatcher } from 'svelte';
-import Input from './Input.svelte';
-import Slider from './Slider.svelte';
-import { round } from 'lodash-es';
-// ----- Props ----- //
-/** The red value. */
-export let red = 0;
-/** The green value. */
-export let green = 0;
-/** The blue value. */
-export let blue = 0;
-/** The alpha value. */
-export let alpha = 1;
-/** Additional class names to apply. */
-export let variant = '';
-// ----- State ----- //
-let redText = red.toString();
-let greenText = green.toString();
-let blueText = blue.toString();
-let alphaText = alpha.toString();
-$: {
-    redText = red.toString();
-}
-$: {
-    greenText = green.toString();
-}
-$: {
-    blueText = blue.toString();
-}
-$: {
-    alphaText = alpha.toString();
-}
-// ----- Events ----- //
-const dispatcher = createEventDispatcher();
-const raiseChange = () => {
-    dispatcher('change', { red, green, blue, alpha });
-};
-$: red, green, blue, alpha, raiseChange();
-// ----- Event Handlers ----- //
-const parseRgbValue = (text, defaultValue = 0) => {
-    if (!text) {
-        return defaultValue;
-    }
-    const newValue = text ? Number.parseFloat(text) : defaultValue;
-    if (newValue && newValue !== Number.NaN) {
-        return Math.round(Math.max(0, Math.min(255, newValue)));
-    }
-    return defaultValue;
-};
-const onRedInputChange = (event) => {
-    const inputChangeEvent = event;
-    red = parseRgbValue(inputChangeEvent?.currentTarget?.value, red);
-};
-const onGreenInputChange = (event) => {
-    const inputChangeEvent = event;
-    green = parseRgbValue(inputChangeEvent?.currentTarget?.value, green);
-};
-const onBlueInputChange = (event) => {
-    const inputChangeEvent = event;
-    blue = parseRgbValue(inputChangeEvent?.currentTarget?.value, blue);
-};
-const onAlphaInputchange = (event) => {
-    const inputChangeEvent = event;
-    const text = inputChangeEvent?.currentTarget?.value;
-    const newValue = text ? Number.parseFloat(text) : alpha;
-    if (newValue && newValue !== Number.NaN) {
-        alpha = round(Math.max(0, Math.min(1, newValue)), 2);
-    }
-};
-</script>
-
-<div class={`sterling-rgb-color-sliders ${variant}`}>
-  <div class="slider red-slider">
-    <Slider min={0} max={255} precision={0} bind:value={red} {variant} />
-  </div>
-  <Input bind:value={redText} {variant} on:change={(e) => onRedInputChange(e)} />
-  <div class="slider green-slider">
-    <Slider min={0} max={255} precision={0} bind:value={green} {variant} />
-  </div>
-  <Input bind:value={greenText} {variant} on:change={(e) => onGreenInputChange(e)} />
-  <div class="slider blue-slider">
-    <Slider min={0} max={255} precision={0} bind:value={blue} {variant} />
-  </div>
-  <Input bind:value={blueText} {variant} on:change={(e) => onBlueInputChange(e)} />
-  <div class="alpha" style={`--red:${red};--green:${green};--blue:${blue}`}>
-    <div class="alpha-hatch" />
-    <div class="alpha-gradient" />
-    <div class="slider alpha-slider">
-      <Slider min={0} max={1} precision={2} bind:value={alpha} {variant} />
-    </div>
-  </div>
-  <Input bind:value={alphaText} {variant} on:change={(e) => onAlphaInputchange(e)} />
-</div>