@geoffcox/sterling-svelte 1.0.12 → 2.0.1

package/dist/ColorPicker.svelte

@@ -1,287 +0,0 @@
-<script>import { tick } from 'svelte';
-import { TinyColor } from '@ctrl/tinycolor';
-import Dropdown from './Dropdown.svelte';
-import Input from './Input.svelte';
-import Tab from './Tab.svelte';
-import TabList from './TabList.svelte';
-import RgbColorSliders from './RgbColorSliders.svelte';
-import HslColorSliders from './HslColorSliders.svelte';
-import HexColorSliders from './HexColorSliders.svelte';
-import { round } from 'lodash-es';
-import { trapKeyboardFocus } from './actions/trapKeyboardFocus';
-// ----- Constants ----- //
-const defaultColorText = '#000000';
-// ----- Props ----- //
-/** The color value in HEX, RGB, or HSL format */
-export let colorText = defaultColorText;
-/** The current color format */
-export let colorFormat = 'hex';
-/** When true, the picker is disabled. */
-export let disabled = false;
-/** When true, the dropdown is open. */
-export let open = false;
-/** Additional class names to apply. */
-export let variant = '';
-/** Additional class names to apply to the value input. */
-export let valueVariant = '';
-/** Additional class names to apply to sliders. */
-export let sliderVariant = '';
-// ----- State ----- //
-let hue = 0;
-let saturation = 0;
-let lightness = 0;
-let red = 0;
-let green = 0;
-let blue = 0;
-let alpha = 1;
-let hexAlpha = 255;
-let updating = false;
-let tabListRef;
-let tabsRef;
-// ----- Update HSL, RGB, Text ----- //
-const updateFromRgb = async () => {
-    // tinycolor requires window
-    if (globalThis.window) {
-        if (!updating && (colorFormat === 'hex' || colorFormat === 'rgb')) {
-            updating = true;
-            const newAlpha = colorFormat === 'hex' ? hexAlpha / 255 : alpha;
-            const color = new TinyColor({ r: red, g: green, b: blue, a: newAlpha });
-            const hsl = color.toHsl();
-            hue = Math.round(hsl.h);
-            saturation = Math.round(hsl.s * 100);
-            lightness = Math.round(hsl.l * 100);
-            switch (colorFormat) {
-                case 'rgb':
-                    colorText = color.toRgbString();
-                    hexAlpha = Math.round(alpha * 255);
-                    break;
-                case 'hex':
-                    colorText = alpha === 100 ? color.toHexString() : color.toHex8String();
-                    alpha = round(hexAlpha / 255, 2);
-                    break;
-            }
-            await tick();
-            updating = false;
-        }
-    }
-};
-const updateFromHsl = async () => {
-    // tinycolor requires window
-    if (globalThis.window) {
-        if (!updating && colorFormat === 'hsl') {
-            updating = true;
-            const color = new TinyColor({ h: hue, s: saturation / 100, l: lightness / 100, a: alpha });
-            const rgb = color.toRgb();
-            red = rgb.r;
-            green = rgb.g;
-            blue = rgb.b;
-            colorText = color.toHslString();
-            hexAlpha = Math.round(alpha * 255);
-            await tick();
-            updating = false;
-        }
-    }
-};
-const updateColorsFromText = async () => {
-    // tinycolor requires window
-    if (globalThis.window) {
-        const color = new TinyColor(colorText);
-        if (color.isValid) {
-            if (!updating) {
-                updating = true;
-                switch (color.format) {
-                    case 'hsl':
-                        colorFormat = 'hsl';
-                        break;
-                    case 'rgb':
-                        colorFormat = 'rgb';
-                        break;
-                    case 'hex':
-                    case 'hex4':
-                    case 'hex8':
-                        colorFormat = 'hex';
-                        break;
-                    default:
-                        break;
-                }
-                const hsl = color.toHsl();
-                hue = Math.round(hsl.h);
-                saturation = Math.round(hsl.s * 100);
-                lightness = Math.round(hsl.l * 100);
-                const rgb = color.toRgb();
-                red = rgb.r;
-                green = rgb.g;
-                blue = rgb.b;
-                if (rgb.a) {
-                    alpha = hsl.a;
-                    hexAlpha = Math.round(alpha * 255);
-                }
-                await tick();
-                updating = false;
-            }
-        }
-    }
-};
-$: {
-    globalThis.window;
-    colorText;
-    updateColorsFromText();
-}
-$: {
-    globalThis.window;
-    colorFormat;
-    hue;
-    saturation;
-    lightness;
-    alpha;
-    updateFromHsl();
-}
-$: {
-    globalThis.window;
-    colorFormat;
-    red;
-    green;
-    blue;
-    alpha;
-    hexAlpha;
-    updateFromRgb();
-}
-// ----- Event handlers ----- //
-const onInputBlur = async () => {
-    if (globalThis.window) {
-        if (!updating) {
-            if (colorText.trim().length === 0) {
-                colorText = defaultColorText;
-                return;
-            }
-            const color = new TinyColor(colorText);
-            if (color.isValid) {
-                updating = true;
-                switch (colorFormat) {
-                    case 'hsl':
-                        colorText = color.toHslString();
-                        break;
-                    case 'rgb':
-                        colorText = color.toRgbString();
-                        break;
-                    case 'hex':
-                        colorText = alpha === 1 ? color.toHexString() : color.toHex8String();
-                        break;
-                    default:
-                        break;
-                }
-                await tick();
-                updating = false;
-            }
-        }
-    }
-};
-const onInputClick = (event) => {
-    event.stopPropagation();
-    return false;
-};
-const onInputKeydown = (event) => {
-    switch (event.key) {
-        case 'Tab':
-            if (open) {
-                setTimeout(() => {
-                    tabListRef?.focus();
-                }, 0);
-                event.preventDefault();
-                event.stopPropagation();
-                return false;
-            }
-            break;
-        case 'Escape':
-            if (open) {
-                open = false;
-                event.preventDefault();
-                event.stopPropagation();
-                return false;
-            }
-            break;
-    }
-    // prevent typing from bubbling to the dropdown
-    event.stopImmediatePropagation();
-};
-// -----Initialization ----- //
-updateColorsFromText();
-</script>
-
-<div class={`sterling-color-picker ${variant}`}>
-  <Dropdown
-    {disabled}
-    bind:open
-    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
-    {variant}
-    {...$$restProps}
-  >
-    <div class="value" slot="value">
-      <div class="color-box" style="background-color: {colorText}" />
-      <Input
-        bind:value={colorText}
-        {disabled}
-        on:blur={onInputBlur}
-        on:click={onInputClick}
-        on:keydown={onInputKeydown}
-        spellcheck="false"
-        variant={`composed ${valueVariant}`}
-      />
-    </div>
-    <div class="sterling-color-picker-popup" use:trapKeyboardFocus>
-      <div class="tabs" bind:this={tabsRef}>
-        <TabList bind:this={tabListRef} bind:selectedValue={colorFormat}>
-          <Tab value="hex">hex</Tab>
-          <Tab value="rgb">rgb</Tab>
-          <Tab value="hsl">hsl</Tab>
-        </TabList>
-      </div>
-      <div class="sliders">
-        {#if colorFormat === 'rgb'}
-          <RgbColorSliders bind:red bind:green bind:blue bind:alpha variant={sliderVariant} />
-        {:else if colorFormat === 'hex'}
-          <HexColorSliders
-            bind:red
-            bind:green
-            bind:blue
-            bind:alpha={hexAlpha}
-            variant={sliderVariant}
-          />
-        {:else if colorFormat === 'hsl'}
-          <HslColorSliders
-            bind:hue
-            bind:saturation
-            bind:lightness
-            bind:alpha
-            variant={sliderVariant}
-          />
-        {/if}
-      </div>
-    </div>
-  </Dropdown>
-</div>

package/dist/ColorPicker.svelte.d.ts

@@ -1,52 +0,0 @@
-import { SvelteComponent } from "svelte";
-declare const __propDef: {
-    props: {
-        [x: string]: any;
-        colorText?: string | undefined;
-        colorFormat?: "hex" | "rgb" | "hsl" | undefined;
-        disabled?: boolean | undefined;
-        open?: boolean | undefined;
-        variant?: string | undefined;
-        valueVariant?: string | undefined;
-        sliderVariant?: 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;
-    } & {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
-    exports?: undefined;
-    bindings?: undefined;
-};
-export type ColorPickerProps = typeof __propDef.props;
-export type ColorPickerEvents = typeof __propDef.events;
-export type ColorPickerSlots = typeof __propDef.slots;
-export default class ColorPicker extends SvelteComponent<ColorPickerProps, ColorPickerEvents, ColorPickerSlots> {
-}
-export {};

package/dist/ColorPicker.types.d.ts

@@ -1,4 +0,0 @@
-import type { COLOR_FORMATS } from './ColorPicker.constants';
-type ColorFormatTuple = typeof COLOR_FORMATS;
-export type ColorFormat = ColorFormatTuple[number];
-export {};

package/dist/ColorPicker.types.js

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

package/dist/HexColorSliders.svelte

@@ -1,103 +0,0 @@
-<script>import { createEventDispatcher } from 'svelte';
-import Input from './Input.svelte';
-import Slider from './Slider.svelte';
-// ----- 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 = 255;
-/** Additional class names to apply. */
-export let variant = '';
-// ----- State ----- //
-let redText = red.toString(16).padStart(2, '0');
-let greenText = green.toString(16).padStart(2, '0');
-let blueText = blue.toString(16).padStart(2, '0');
-let alphaText = alpha.toString(16).padStart(2, '0');
-$: {
-    redText = red.toString(16).padStart(2, '0');
-}
-$: {
-    greenText = green.toString(16).padStart(2, '0');
-}
-$: {
-    blueText = blue.toString(16).padStart(2, '0');
-}
-$: {
-    alphaText = alpha.toString(16).padStart(2, '0');
-}
-// ----- Events ----- //
-const dispatcher = createEventDispatcher();
-const raiseChange = () => {
-    dispatcher('change', { red, green, blue, alpha });
-};
-$: red, green, blue, alpha, raiseChange();
-// ----- Event Handlers ----- //
-const onRedInputChange = (event) => {
-    const inputChangeEvent = event;
-    const text = inputChangeEvent?.currentTarget?.value;
-    red = text ? Number.parseInt(text, 16) : red;
-};
-const onGreenInputChange = (event) => {
-    const inputChangeEvent = event;
-    const text = inputChangeEvent?.currentTarget?.value;
-    green = text ? Number.parseInt(text, 16) : green;
-};
-const onBlueInputChange = (event) => {
-    const inputChangeEvent = event;
-    const text = inputChangeEvent?.currentTarget?.value;
-    blue = text ? Number.parseInt(text, 16) : blue;
-};
-const onAlphaInputchange = (event) => {
-    const inputChangeEvent = event;
-    const text = inputChangeEvent?.currentTarget?.value;
-    alpha = text ? Number.parseInt(text, 16) : alpha;
-};
-</script>
-
-<!-- svelte-ignore a11y-no-static-element-interactions -->
-<div
-  class={`sterling-hex-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={`--red:${red};--green:${green};--blue:${blue}`}
->
-  <Slider min={0} max={255} precision={0} bind:value={red} variant="red" />
-  <Input bind:value={redText} variant="red" on:change={(e) => onRedInputChange(e)} />
-  <Slider min={0} max={255} precision={0} bind:value={green} variant="green" />
-  <Input bind:value={greenText} variant="green" on:change={(e) => onGreenInputChange(e)} />
-  <Slider min={0} max={255} precision={0} bind:value={blue} variant="blue" />
-  <Input bind:value={blueText} variant="blue" on:change={(e) => onBlueInputChange(e)} />
-  <div class="alpha-hatch" />
-  <div class="alpha-gradient" />
-  <Slider min={0} max={255} precision={0} bind:value={alpha} variant="alpha" />
-  <Input bind:value={alphaText} variant="alpha" on:change={(e) => onAlphaInputchange(e)} />
-</div>

package/dist/HexColorSliders.svelte.d.ts

@@ -1,51 +0,0 @@
-import { SvelteComponent } from "svelte";
-declare const __propDef: {
-    props: {
-        [x: string]: any;
-        red?: number | undefined;
-        green?: number | undefined;
-        blue?: 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 HexColorSlidersProps = typeof __propDef.props;
-export type HexColorSlidersEvents = typeof __propDef.events;
-export type HexColorSlidersSlots = typeof __propDef.slots;
-export default class HexColorSliders extends SvelteComponent<HexColorSlidersProps, HexColorSlidersEvents, HexColorSlidersSlots> {
-}
-export {};

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/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 {};