@geoffcox/sterling-svelte 1.0.12 → 2.0.0

package/dist/RgbColorSliders.svelte.d.ts

@@ -1,24 +0,0 @@
-import { SvelteComponent } from "svelte";
-declare const __propDef: {
-    props: {
-        /** The red value. */ red?: number | undefined;
-        /** The green value. */ green?: number | undefined;
-        /** The blue value. */ blue?: number | undefined;
-        /** The alpha value. */ alpha?: number | undefined;
-        /** Additional class names to apply. */ variant?: string | undefined;
-    };
-    events: {
-        change: CustomEvent<any>;
-    } & {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
-    exports?: {} | undefined;
-    bindings?: string | undefined;
-};
-export type RgbColorSlidersProps = typeof __propDef.props;
-export type RgbColorSlidersEvents = typeof __propDef.events;
-export type RgbColorSlidersSlots = typeof __propDef.slots;
-export default class RgbColorSliders extends SvelteComponent<RgbColorSlidersProps, RgbColorSlidersEvents, RgbColorSlidersSlots> {
-}
-export {};

package/dist/Select.svelte.d.ts

@@ -1,83 +0,0 @@
-import { SvelteComponent } from "svelte";
-declare const __propDef: {
-    props: {
-        [x: string]: any;
-        disabled?: boolean | undefined;
-        open?: boolean | undefined;
-        selectedValue?: string | undefined;
-        variant?: string | undefined;
-        listVariant?: string | undefined;
-        blur?: (() => void) | undefined;
-        click?: (() => void) | undefined;
-        focus?: ((options?: FocusOptions) => void) | undefined;
-        scrollToSelectedItem?: (() => void) | 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;
-        wheel: WheelEvent;
-        paste: ClipboardEvent;
-        select: CustomEvent<any>;
-        pending: CustomEvent<any>;
-    } & {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {
-        value: {
-            disabled: boolean;
-            open: boolean;
-            selectedValue: string | undefined;
-            variant: string;
-        };
-        button: {
-            disabled: boolean;
-            open: boolean;
-            selectedValue: string | undefined;
-            variant: string;
-        };
-        icon: {
-            disabled: boolean;
-            open: boolean;
-            selectedValue: string | undefined;
-            variant: string;
-        };
-        default: {
-            variant: string;
-            listVariant: string;
-        };
-    };
-    exports?: undefined;
-    bindings?: undefined;
-};
-export type SelectProps = typeof __propDef.props;
-export type SelectEvents = typeof __propDef.events;
-export type SelectSlots = typeof __propDef.slots;
-export default class Select extends SvelteComponent<SelectProps, SelectEvents, SelectSlots> {
-    get blur(): () => void;
-    get click(): () => void;
-    get focus(): (options?: FocusOptions | undefined) => void;
-    get scrollToSelectedItem(): () => void;
-}
-export {};

package/dist/Slider.svelte

@@ -1,190 +0,0 @@
-<script>import { createEventDispatcher } from 'svelte';
-import { round } from 'lodash-es';
-// ----- Props ----- //
-/** When true, the slider is disabled. */
-export let disabled = false;
-/** The minimum value of the slider. */
-export let min = 0;
-/** The maximum value of the slider. */
-export let max = 100;
-/** The number of decimal places for rounding the value. */
-export let precision = undefined;
-/** The amount the value changes by pressing arrow keys. */
-export let step = 1;
-/** The value of the slider. */
-export let value = 0;
-/** Additional class names to apply. */
-export let variant = '';
-/** When true, the slider is displayed vertically. */
-export let vertical = false;
-// ----- State ----- //
-let sliderRef;
-// ----- Methods ----- //
-export const blur = () => {
-    sliderRef?.blur();
-};
-export const click = () => {
-    sliderRef?.click();
-};
-export const focus = (options) => {
-    sliderRef?.focus();
-};
-// -----Events----- //
-const dispatch = createEventDispatcher();
-//TODO: have change and input events for parity with input type=slider
-// or use input internally within this component.
-const raiseChange = (newValue) => {
-    dispatch('change', { value: newValue });
-};
-// ----- Value tracking ----- //
-// const getPrecision = (value?: number): number => {
-//   if (value !== undefined && Number !== null && !Number.isNaN(value)) {
-//     const text = value.toString();
-//     const position = text.indexOf('.');
-//     if (position !== -1) {
-//       const fraction = text.substring(position + 1);
-//       if (fraction) {
-//         return fraction.length;
-//       }
-//     }
-//   }
-//   return 0;
-// };
-const setValue = (newValue) => {
-    const clamped = Math.max(min, Math.min(max, newValue));
-    value = precision !== undefined ? round(clamped, precision) : clamped;
-};
-// ensure min <= max
-$: {
-    if (min > max) {
-        min = max;
-    }
-}
-$: min, max, precision, setValue(value);
-// Compute the ratio of the value to the range
-$: ratio = (value - min) / (max - min);
-const setValueByOffset = (offset) => {
-    if (sliderSize > 0) {
-        const positionRatio = Math.max(0, Math.min(1, offset / sliderSize));
-        const newValue = min + positionRatio * (max - min);
-        setValue(newValue);
-    }
-};
-// Raise change event when value changes
-$: {
-    raiseChange(value);
-}
-// ----- Size tracking ----- //
-let sliderWidth;
-let sliderHeight;
-$: sliderSize = vertical ? sliderHeight : sliderWidth;
-$: valueOffset = sliderSize * ratio;
-// ----- Event handlers ----- //
-const onPointerDown = (event) => {
-    if (!disabled) {
-        event.currentTarget.setPointerCapture(event.pointerId);
-        if (vertical) {
-            setValueByOffset(sliderRef.getBoundingClientRect().bottom - event.y);
-        }
-        else {
-            setValueByOffset(event.x - sliderRef.getBoundingClientRect().left);
-        }
-    }
-};
-const onPointerMove = (event) => {
-    if (!disabled && event.currentTarget.hasPointerCapture(event.pointerId)) {
-        if (vertical) {
-            setValueByOffset(sliderRef.getBoundingClientRect().bottom - event.y);
-        }
-        else {
-            setValueByOffset(event.x - sliderRef.getBoundingClientRect().left);
-        }
-    }
-};
-const onPointerUp = (event) => {
-    if (!disabled) {
-        event.currentTarget.releasePointerCapture(event.pointerId);
-    }
-};
-const onKeyDown = (event) => {
-    if (!disabled && !event.ctrlKey && !event.shiftKey && !event.altKey) {
-        switch (event.code) {
-            case 'ArrowDown':
-            case 'ArrowLeft':
-                setValue(value - step);
-                event.preventDefault();
-                event.stopPropagation();
-                return;
-            case 'ArrowRight':
-            case 'ArrowUp':
-                setValue(value + step);
-                event.preventDefault();
-                event.stopPropagation();
-                return;
-        }
-    }
-};
-</script>
-
-<!-- @component
-Slider lets the user chose a value within a min/max range by dragging a thumb button.
--->
-<div
-  aria-disabled={disabled}
-  aria-valuemin={0}
-  aria-valuenow={value}
-  aria-valuemax={max}
-  class={`sterling-slider ${variant}`}
-  class:disabled
-  class:horizontal={!vertical}
-  class:vertical
-  role="slider"
-  tabindex={!disabled ? 0 : undefined}
-  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:keydown={onKeyDown}
-  on:keypress
-  on:keyup
-  on:mousedown
-  on:mouseenter
-  on:mouseleave
-  on:mousemove
-  on:mouseover
-  on:mouseout
-  on:mouseup
-  on:pointercancel
-  on:pointerdown
-  on:pointerdown={onPointerDown}
-  on:pointerenter
-  on:pointerleave
-  on:pointermove
-  on:pointermove={onPointerMove}
-  on:pointerover
-  on:pointerout
-  on:pointerup
-  on:pointerup={onPointerUp}
-  on:wheel|passive
-  {...$$restProps}
->
-  <div
-    class="container"
-    bind:this={sliderRef}
-    bind:clientWidth={sliderWidth}
-    bind:clientHeight={sliderHeight}
-  >
-    <div class="track" />
-    <div class="fill" style={vertical ? `height: ${valueOffset}px` : `width: ${valueOffset}px`} />
-    <div class="thumb" style={vertical ? `bottom: ${valueOffset}px` : `left: ${valueOffset}px`} />
-  </div>
-</div>

package/dist/Slider.svelte.d.ts

@@ -1,66 +0,0 @@
-import { SvelteComponent } from "svelte";
-declare const __propDef: {
-    props: {
-        [x: string]: any;
-        disabled?: boolean | undefined;
-        min?: number | undefined;
-        max?: number | undefined;
-        precision?: number | undefined;
-        step?: number | undefined;
-        value?: number | undefined;
-        variant?: string | undefined;
-        vertical?: boolean | 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;
-        change: CustomEvent<any>;
-    } & {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
-    exports?: undefined;
-    bindings?: undefined;
-};
-export type SliderProps = typeof __propDef.props;
-export type SliderEvents = typeof __propDef.events;
-export type SliderSlots = typeof __propDef.slots;
-/** Slider lets the user chose a value within a min/max range by dragging a thumb button. */
-export default class Slider extends SvelteComponent<SliderProps, SliderEvents, SliderSlots> {
-    get blur(): () => void;
-    get click(): () => void;
-    get focus(): (options?: FocusOptions | undefined) => void;
-}
-export {};

package/dist/Switch.svelte

@@ -1,110 +0,0 @@
-<script>import { idGenerator } from './idGenerator';
-import { usingKeyboard } from './mediaQueries/usingKeyboard';
-// ----- Props ----- //
-export let checked = false;
-export let disabled = false;
-/** The text appearing by the off position. Not used when the offLabel slot is filled. */
-export let offText = undefined;
-/** The text appearing near the on position. Not used when the onLabel slot is filled. */
-export let onText = undefined;
-/** Additional class names to apply. */
-export let variant = '';
-/** When true, the switch is displayed vertically. */
-export let vertical = false;
-// ----- State ----- //
-const inputId = idGenerator.nextId('Switch');
-let inputRef;
-let switchWidth = 0;
-let switchHeight = 0;
-let thumbWidth = 0;
-let thumbHeight = 0;
-$: switchSize = vertical ? switchHeight : switchWidth;
-$: thumbSize = vertical ? thumbHeight : thumbWidth;
-$: ratio = vertical ? (checked ? 0 : 1) : checked ? 1 : 0;
-$: valueOffset = (switchSize - thumbSize) * ratio;
-$: hasOffLabel = $$slots.offLabel || (offText !== undefined && offText.length > 0);
-$: hasOnLabel = $$slots.onLabel || (onText !== undefined && onText.length > 0);
-// ----- Methods ----- //
-export const blur = () => {
-    inputRef?.blur();
-};
-export const click = () => {
-    inputRef?.click();
-};
-export const focus = (options) => {
-    inputRef?.focus(options);
-};
-</script>
-
-<!--
-	@component
-	A styled HTML input type=checkbox element.
--->
-<div
-  class={`sterling-switch ${variant}`}
-  class:checked
-  class:disabled
-  class:vertical
-  class:using-keyboard={$usingKeyboard}
->
-  <input
-    bind:this={inputRef}
-    bind:checked
-    {disabled}
-    id={inputId}
-    type="checkbox"
-    on:blur
-    on:click
-    on:change
-    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}
-  />
-  {#if hasOffLabel}
-    <div class="off-label">
-      <slot name="offLabel" {checked} {disabled} {inputId} {offText} {variant} {vertical}>
-        {#if offText}
-          <label for={inputId}>{offText}</label>
-        {/if}
-      </slot>
-    </div>
-  {/if}
-  <!-- svelte-ignore a11y-click-events-have-key-events -->
-  <div class="switch" bind:offsetWidth={switchWidth} bind:offsetHeight={switchHeight}>
-    <div
-      class="thumb"
-      bind:offsetWidth={thumbWidth}
-      bind:offsetHeight={thumbHeight}
-      style={`--thumb-offset: ${valueOffset}px`}
-    />
-  </div>
-  {#if hasOnLabel}
-    <div class="on-label">
-      <slot name="onLabel" {checked} {disabled} {inputId} {onText} {variant} {vertical}>
-        {#if onText}
-          <label for={inputId}>{onText}</label>
-        {/if}
-      </slot>
-    </div>
-  {/if}
-</div>

package/dist/Switch.svelte.d.ts

@@ -1,74 +0,0 @@
-import { SvelteComponent } from "svelte";
-declare const __propDef: {
-    props: {
-        [x: string]: any;
-        checked?: boolean | undefined;
-        disabled?: boolean | undefined;
-        offText?: string | undefined;
-        onText?: string | undefined;
-        variant?: string | undefined;
-        vertical?: boolean | 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: {
-        offLabel: {
-            checked: boolean;
-            disabled: boolean;
-            inputId: string;
-            offText: string | undefined;
-            variant: string;
-            vertical: boolean;
-        };
-        onLabel: {
-            checked: boolean;
-            disabled: boolean;
-            inputId: string;
-            onText: string | undefined;
-            variant: string;
-            vertical: boolean;
-        };
-    };
-    exports?: undefined;
-    bindings?: undefined;
-};
-export type SwitchProps = typeof __propDef.props;
-export type SwitchEvents = typeof __propDef.events;
-export type SwitchSlots = typeof __propDef.slots;
-/** A styled HTML input type=checkbox element. */
-export default class Switch extends SvelteComponent<SwitchProps, SwitchEvents, SwitchSlots> {
-    get blur(): () => void;
-    get click(): () => void;
-    get focus(): (options?: FocusOptions | undefined) => void;
-}
-export {};

package/dist/Tab.svelte

@@ -1,94 +0,0 @@
-<script>import { getContext } from 'svelte';
-import { TAB_LIST_CONTEXT_KEY } from './TabList.constants';
-import { usingKeyboard } from './mediaQueries/usingKeyboard';
-// ----- Props ----- //
-/**
- * When true, the tab is disabled.
- * The tab is also disabled when its parent tab list is disabled.
- */
-export let disabled = false;
-/** When true, the tab is selected. */
-export let selected = false;
-/** The text of the tab. Not used when the default slot is filled. */
-export let text = undefined;
-/** The value uniquely identifying this tab within the tab list. */
-export let value;
-/** Additional class names to apply. */
-export let variant = '';
-// ----- State ----- //
-let tabRef;
-const { disabled: tabListDisabled, selectedValue, vertical } = getContext(TAB_LIST_CONTEXT_KEY);
-$: _disabled = $tabListDisabled || disabled;
-$: {
-    selected = $selectedValue === value;
-}
-$: {
-    if (selected) {
-        selectedValue.set(value);
-    }
-}
-// ----- Methods ----- //
-export const click = () => {
-    tabRef?.click();
-};
-export const blur = () => {
-    tabRef?.blur();
-};
-export const focus = (options) => {
-    tabRef?.focus(options);
-};
-</script>
-
-<button
-  bind:this={tabRef}
-  aria-selected={selected}
-  class={`sterling-tab ${variant}`}
-  disabled={_disabled}
-  class:selected
-  class:using-keyboard={$usingKeyboard}
-  class:vertical={$vertical}
-  data-value={value}
-  role="tab"
-  type="button"
-  tabIndex={selected ? 0 : -1}
-  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
->
-  <div class="content">
-    <slot disabled={_disabled} {selected} {text} {value} {variant}>
-      <div class="text">
-        {text || value}
-      </div>
-    </slot>
-  </div>
-  <div class="indicator" />
-</button>