@geoffcox/sterling-svelte 1.0.12 → 2.0.0

package/dist/HslColorSliders.svelte

@@ -1,128 +0,0 @@
-<script>import { createEventDispatcher } from 'svelte';
-import Input from './Input.svelte';
-import Slider from './Slider.svelte';
-import { round } from 'lodash-es';
-// ----- Props ----- //
-/** The hue value. */
-export let hue = 0;
-/** The saturation value. */
-export let saturation = 0;
-/** The lightness value. */
-export let lightness = 0;
-/** The alpha value. */
-export let alpha = 1;
-/** Additional class names to apply. */
-export let variant = '';
-// ----- State ----- //
-let hueText = hue.toString();
-let saturationText = saturation.toString();
-let lightnessText = lightness.toString();
-let alphaText = alpha.toString();
-$: {
-    hueText = hue.toString();
-}
-$: {
-    saturationText = saturation.toString();
-}
-$: {
-    lightnessText = lightness.toString();
-}
-$: {
-    alphaText = alpha.toString();
-}
-// ----- Events ----- //
-const dispatcher = createEventDispatcher();
-const raiseChange = (hue, saturation, lightness) => {
-    dispatcher('change', { hue, saturation, lightness });
-};
-$: raiseChange(hue, saturation, lightness);
-// ----- Event Handlers ----- //
-const onHueInputChange = (event) => {
-    const inputChangeEvent = event;
-    const text = inputChangeEvent?.currentTarget?.value;
-    const newValue = text ? Number.parseFloat(text) : hue;
-    if (newValue && newValue !== Number.NaN) {
-        hue = Math.round(Math.max(0, Math.min(360, newValue)));
-        hueText = hue.toString();
-    }
-};
-const onSaturationInputChange = (event) => {
-    const inputChangeEvent = event;
-    const text = inputChangeEvent?.currentTarget?.value?.replace(/%/g, '');
-    const newValue = text ? Number.parseFloat(text) : saturation;
-    if (newValue && newValue !== Number.NaN) {
-        saturation = Math.round(Math.max(0, Math.min(100, newValue)));
-        saturationText = saturation.toString();
-    }
-};
-const onLightnessInputChange = (event) => {
-    const inputChangeEvent = event;
-    const text = inputChangeEvent?.currentTarget?.value?.replace(/%/g, '');
-    const newValue = text ? Number.parseFloat(text) : lightness;
-    if (newValue && newValue !== Number.NaN) {
-        lightness = Math.round(Math.max(0, Math.min(100, newValue)));
-        lightnessText = lightness.toString();
-    }
-};
-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);
-        alphaText = alpha.toString();
-    }
-};
-</script>
-
-<!-- svelte-ignore a11y-no-static-element-interactions -->
-<div
-  class={`sterling-hsl-color-sliders ${variant}`}
-  on:blur
-  on:click
-  on:copy
-  on:cut
-  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:wheel
-  on:paste
-  {...$$restProps}
-  style={`--hue:${hue};--saturation:${saturation}%;--lightness:${lightness}%`}
->
-  <Slider min={0} max={360} precision={0} bind:value={hue} variant="hue" />
-  <Input bind:value={hueText} variant="hue" on:change={(e) => onHueInputChange(e)} />
-  <Slider min={0} max={100} precision={0} bind:value={saturation} variant="saturation" />
-  <Input
-    bind:value={saturationText}
-    variant="saturation"
-    on:change={(e) => onSaturationInputChange(e)}
-  />
-  <Slider min={0} max={100} precision={0} bind:value={lightness} variant="lightness" />
-  <Input
-    bind:value={lightnessText}
-    variant="lightness"
-    on:change={(e) => onLightnessInputChange(e)}
-  />
-  <div class="alpha-hatch" />
-  <div class="alpha-gradient" />
-  <Slider min={0} max={1} precision={2} step={0.01} bind:value={alpha} variant="alpha" />
-  <Input bind:value={alphaText} variant="alpha" on:change={(e) => onAlphaInputchange(e)} />
-</div>

package/dist/HslColorSliders.svelte.d.ts

@@ -1,51 +0,0 @@
-import { SvelteComponent } from "svelte";
-declare const __propDef: {
-    props: {
-        [x: string]: any;
-        hue?: number | undefined;
-        saturation?: number | undefined;
-        lightness?: number | undefined;
-        alpha?: number | 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;
-        wheel: WheelEvent;
-        paste: ClipboardEvent;
-        change: CustomEvent<any>;
-    } & {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
-    exports?: undefined;
-    bindings?: undefined;
-};
-export type HslColorSlidersProps = typeof __propDef.props;
-export type HslColorSlidersEvents = typeof __propDef.events;
-export type HslColorSlidersSlots = typeof __propDef.slots;
-export default class HslColorSliders extends SvelteComponent<HslColorSlidersProps, HslColorSlidersEvents, HslColorSlidersSlots> {
-}
-export {};

package/dist/Input.svelte

@@ -1,89 +0,0 @@
-<script>import { idGenerator } from './idGenerator';
-import { usingKeyboard } from './mediaQueries/usingKeyboard';
-// ----- Props ----- //
-export let disabled = false;
-export let id = undefined;
-export let value = '';
-/** Additional class names to apply. */
-export let variant = '';
-// ----- State ----- //
-let inputRef;
-$: {
-    if ($$slots.default && id === undefined) {
-        id = idGenerator.nextId('Input');
-    }
-}
-// ----- Methods ----- //
-export const blur = () => {
-    inputRef?.blur();
-};
-export const click = () => {
-    inputRef?.click();
-};
-export const focus = (options) => {
-    inputRef?.focus();
-};
-export const select = () => {
-    inputRef?.select();
-};
-export const setSelectionRange = (start, end, direction) => {
-    inputRef?.setSelectionRange(start, end, direction);
-};
-export const setRangeText = (replacement, start, end, selectionMode) => {
-    if (start && end) {
-        inputRef?.setRangeText(replacement, start, end, selectionMode);
-    }
-    else {
-        inputRef?.setRangeText(replacement);
-    }
-};
-</script>
-
-{#if $$slots.default}
-  <label class={`sterling-input-label ${variant}`} class:disabled for={id}>
-    <slot {disabled} {value} {variant} />
-  </label>
-{/if}
-<div class={`sterling-input ${variant}`} class:disabled class:using-keyboard={$usingKeyboard}>
-  <input
-    bind:this={inputRef}
-    class:using-keyboard={$usingKeyboard}
-    {disabled}
-    {id}
-    bind:value
-    on:beforeinput
-    on:blur
-    on:click
-    on:change
-    on:copy
-    on:cut
-    on:paste
-    on:dblclick
-    on:dragend
-    on:dragenter
-    on:dragleave
-    on:dragover
-    on:dragstart
-    on:drop
-    on:focus
-    on:focusin
-    on:focusout
-    on:input
-    on:invalid
-    on:keydown
-    on:keypress
-    on:keyup
-    on:mousedown
-    on:mouseenter
-    on:mouseleave
-    on:mousemove
-    on:mouseover
-    on:mouseout
-    on:mouseup
-    on:select
-    on:submit
-    on:reset
-    on:wheel|passive
-    {...$$restProps}
-  />
-</div>

package/dist/Input.svelte.d.ts

@@ -1,74 +0,0 @@
-import { SvelteComponent } from "svelte";
-declare const __propDef: {
-    props: {
-        [x: string]: any;
-        disabled?: boolean | undefined;
-        id?: string | undefined;
-        value?: string | 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: {
-        default: {
-            disabled: boolean;
-            value: string;
-            variant: string;
-        };
-    };
-    exports?: undefined;
-    bindings?: undefined;
-};
-export type InputProps = typeof __propDef.props;
-export type InputEvents = typeof __propDef.events;
-export type InputSlots = typeof __propDef.slots;
-export default class Input extends SvelteComponent<InputProps, InputEvents, InputSlots> {
-    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/Label.svelte

@@ -1,197 +0,0 @@
-<script>import { onMount } from 'svelte';
-import Tooltip from './Tooltip.svelte';
-import { usingKeyboard } from './mediaQueries/usingKeyboard';
-// ----- Props ----- //
-let htmlFor = undefined;
-export { htmlFor as for };
-/**
- * If true, clicking the label invokes a click on the content.
- * Needed only when the label is not associated with the content through containment or the `for`/`id` relationship.
- */
-export let forwardClick = false;
-/** The text to display in the label. Not used if the text slot is filled. */
-export let text = undefined;
-/** The status message to display. */
-export let message = undefined;
-/** When true, indicates a value is required. */
-export let required = false;
-/** The reason the value is required. */
-export let requiredReason = 'required';
-/** The status of the label. */
-export let status = 'none';
-/** Additional class names to apply. */
-export let variant = '';
-/** When true, the label appears above the content. */
-export let vertical = true;
-// ----- State ----- //
-let labelRef;
-let targetDisabled = false;
-let targetRef = null;
-const findTarget = () => {
-    let candidate = null;
-    if (htmlFor) {
-        candidate = labelRef?.querySelector(`[id="${htmlFor}"]`);
-    }
-    if (!candidate) {
-        candidate = labelRef?.querySelector('a[href], ' +
-            'audio[controls], ' +
-            'button, ' +
-            'details, ' +
-            'div[contenteditable], ' +
-            'form, ' +
-            'input, ' +
-            'select, ' +
-            'textarea, ' +
-            'video[controls], ' +
-            '[tabindex]:not([tabindex="-1"])');
-    }
-    targetRef = candidate;
-};
-const isElementDisabled = (element) => {
-    if (element) {
-        return (element.getAttribute('aria-disabled') === 'true' ||
-            element?.matches(':disabled') ||
-            element?.disabled === true ||
-            element?.classList.contains('disabled'));
-    }
-    return false;
-};
-$: $$slots.default, labelRef, htmlFor, findTarget();
-$: {
-    targetDisabled = isElementDisabled(targetRef);
-}
-const mutationCallback = (mutations) => {
-    let disabled = undefined;
-    for (let i = 0; i < mutations.length; i++) {
-        const mutation = mutations[i];
-        if (mutation.type === 'attributes') {
-            if (mutation.attributeName === 'aria-disabled' ||
-                mutation.attributeName === 'disabled' ||
-                mutation.attributeName === 'class') {
-                if (isElementDisabled(targetRef)) {
-                    // a mutation caused the target to be disabled
-                    disabled = true;
-                    break;
-                }
-                // a mutation caused the target to be enabled
-                disabled = false;
-            }
-        }
-    }
-    // if we found a mutation that changed disabled, then set targetDisabled
-    if (disabled !== undefined) {
-        targetDisabled = disabled;
-    }
-};
-let mutationObserver;
-onMount(() => {
-    mutationObserver = new MutationObserver(mutationCallback);
-    return () => mutationObserver?.disconnect();
-});
-$: {
-    mutationObserver?.disconnect();
-    if (targetRef) {
-        mutationObserver?.observe(targetRef, {
-            attributes: true
-        });
-    }
-}
-// ----- Methods ----- //
-export const click = () => {
-    labelRef?.click();
-};
-export const blur = () => {
-    labelRef?.blur();
-};
-export const focus = (options) => {
-    labelRef?.focus(options);
-};
-// ----- Event Handlers ----- //
-const onClick = () => {
-    if (forwardClick) {
-        targetRef?.click();
-    }
-};
-</script>
-
-<!-- svelte-ignore a11y-no-noninteractive-element-interactions -->
-<label
-  bind:this={labelRef}
-  aria-disabled={targetDisabled}
-  class={`sterling-label ${variant}`}
-  class:disabled={targetDisabled}
-  class:using-keyboard={$usingKeyboard}
-  class:vertical
-  for={htmlFor}
-  on:blur
-  on:click
-  on:click={onClick}
-  on:copy
-  on:cut
-  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:scroll
-  on:wheel|passive
-  on:paste
-  {...$$restProps}
->
-  {#if text || $$slots.text}
-    <slot
-      name="text"
-      disabled={targetDisabled}
-      for={htmlFor}
-      {forwardClick}
-      {required}
-      {text}
-      {variant}
-    >
-      <div class="text">
-        {text}
-      </div>
-    </slot>
-  {/if}
-  {#if $$slots.default}
-    <div class="content">
-      <slot />
-    </div>
-  {/if}
-  {#if message}
-    <slot name="message" disabled={targetDisabled} {message} {required} {status} {variant}>
-      <div
-        class="message"
-        class:info={status === 'info'}
-        class:success={status === 'success'}
-        class:warning={status === 'warning'}
-        class:error={status === 'danger'}
-      >
-        {message}
-      </div>
-    </slot>
-  {/if}
-  {#if required}
-    <slot name="required" {requiredReason} {variant}>
-      <Tooltip showOn="hover">
-        <span class="required-reason" slot="tip">{requiredReason}</span>
-        <div class="required">*</div>
-      </Tooltip>
-    </slot>
-  {/if}
-</label>

package/dist/Label.svelte.d.ts

@@ -1,82 +0,0 @@
-import { SvelteComponent } from "svelte";
-declare const __propDef: {
-    props: {
-        [x: string]: any;
-        for?: string | undefined;
-        forwardClick?: boolean | undefined;
-        text?: string | undefined;
-        message?: string | undefined;
-        required?: boolean | undefined;
-        requiredReason?: string | undefined;
-        status?: string | undefined;
-        variant?: string | undefined;
-        vertical?: boolean | undefined;
-        click?: (() => void) | undefined;
-        blur?: (() => void) | undefined;
-        focus?: ((options?: FocusOptions) => 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;
-        scroll: Event;
-        wheel: WheelEvent;
-        paste: ClipboardEvent;
-    } & {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {
-        text: {
-            disabled: boolean;
-            for: string | undefined;
-            forwardClick: boolean;
-            required: boolean;
-            text: string | undefined;
-            variant: string;
-        };
-        default: {};
-        message: {
-            disabled: boolean;
-            message: string | undefined;
-            required: boolean;
-            status: string;
-            variant: string;
-        };
-        required: {
-            requiredReason: string;
-            variant: string;
-        };
-    };
-    exports?: undefined;
-    bindings?: undefined;
-};
-export type LabelProps = typeof __propDef.props;
-export type LabelEvents = typeof __propDef.events;
-export type LabelSlots = typeof __propDef.slots;
-export default class Label extends SvelteComponent<LabelProps, LabelEvents, LabelSlots> {
-    get click(): () => void;
-    get blur(): () => void;
-    get focus(): (options?: FocusOptions | undefined) => void;
-}
-export {};

package/dist/Label.types.d.ts

@@ -1,6 +0,0 @@
-import type { LABEL_STATUSES, LABEL_VARIANTS } from './Label.constants';
-type LabelStatusTuple = typeof LABEL_STATUSES;
-export type LabelStatus = LabelStatusTuple[number];
-type LabelVariantTuple = typeof LABEL_VARIANTS;
-export type LabelVariant = LabelVariantTuple[number];
-export {};

package/dist/Label.types.js

@@ -1 +0,0 @@
-export {};

package/dist/Link.svelte

@@ -1,57 +0,0 @@
-<script>export let href;
-export let disabled = false;
-// ----- Props ----- //
-/** Additional class names to apply. */
-export let variant = '';
-// ----- State ----- //
-let linkRef;
-// ----- Methods ----- //
-export const blur = () => {
-    linkRef?.blur();
-};
-export const click = () => {
-    linkRef?.click();
-};
-export const focus = (options) => {
-    linkRef?.focus();
-};
-</script>
-
-<a
-  bind:this={linkRef}
-  class={`sterling-link ${variant}`}
-  class:disabled
-  {href}
-  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}><slot {disabled} {href} {variant} /></a
->