@solid-design-system/components 3.24.0 → 4.0.0-next.0

package/dist/internal/animate.d.ts

@@ -0,0 +1,10 @@
+export declare function animateTo(el: HTMLElement, keyframes: Keyframe[], options?: KeyframeAnimationOptions): Promise<unknown>;
+export declare function parseDuration(delay: number | string): number;
+export declare function prefersReducedMotion(): boolean;
+export declare function stopAnimations(el: HTMLElement): Promise<unknown[]>;
+export declare function shimKeyframesHeightAuto(keyframes: Keyframe[], calculatedHeight: number): {
+    height: string | number | null | undefined;
+    composite?: CompositeOperationOrAuto;
+    easing?: string;
+    offset?: number | null;
+}[];

package/dist/internal/animate.js

@@ -0,0 +1,43 @@
+export function animateTo(el, keyframes, options) {
+    return new Promise(resolve => {
+        if (options?.duration === Infinity) {
+            throw new Error('Promise-based animations must be finite.');
+        }
+        const animation = el.animate(keyframes, {
+            ...options,
+            duration: prefersReducedMotion() ? 0 : options.duration
+        });
+        animation.addEventListener('cancel', resolve, { once: true });
+        animation.addEventListener('finish', resolve, { once: true });
+    });
+}
+export function parseDuration(delay) {
+    delay = delay.toString().toLowerCase();
+    if (delay.indexOf('ms') > -1) {
+        return parseFloat(delay);
+    }
+    if (delay.indexOf('s') > -1) {
+        return parseFloat(delay) * 1000;
+    }
+    return parseFloat(delay);
+}
+export function prefersReducedMotion() {
+    const query = window.matchMedia('(prefers-reduced-motion: reduce)');
+    return query.matches;
+}
+export function stopAnimations(el) {
+    return Promise.all(el.getAnimations().map(animation => {
+        return new Promise(resolve => {
+            const handleAnimationEvent = requestAnimationFrame(resolve);
+            animation.addEventListener('cancel', () => handleAnimationEvent, { once: true });
+            animation.addEventListener('finish', () => handleAnimationEvent, { once: true });
+            animation.cancel();
+        });
+    }));
+}
+export function shimKeyframesHeightAuto(keyframes, calculatedHeight) {
+    return keyframes.map(keyframe => ({
+        ...keyframe,
+        height: keyframe.height === 'auto' ? `${calculatedHeight}px` : keyframe.height
+    }));
+}

package/dist/internal/debounce.d.ts

@@ -0,0 +1 @@
+export declare const debounce: (delay: number) => <T>(_target: T, _propertyKey: string, descriptor: PropertyDescriptor) => void;

package/dist/internal/debounce.js

@@ -0,0 +1,12 @@
+const TIMER_ID_KEY = Symbol();
+export const debounce = (delay) => {
+    return (_target, _propertyKey, descriptor) => {
+        const fn = descriptor.value;
+        descriptor.value = function (...args) {
+            clearTimeout(this[TIMER_ID_KEY]);
+            this[TIMER_ID_KEY] = window.setTimeout(() => {
+                fn.apply(this, args);
+            }, delay);
+        };
+    };
+};

package/dist/internal/default-value.d.ts

@@ -0,0 +1,2 @@
+import type { ReactiveElement } from 'lit';
+export declare const defaultValue: (propertyName?: string) => (proto: ReactiveElement, key: string) => void;

package/dist/internal/default-value.js

@@ -0,0 +1,18 @@
+import { defaultConverter } from 'lit';
+export const defaultValue = (propertyName = 'value') => (proto, key) => {
+    const ctor = proto.constructor;
+    const attributeChangedCallback = ctor.prototype.attributeChangedCallback;
+    ctor.prototype.attributeChangedCallback = function (name, old, value) {
+        const options = ctor.getPropertyOptions(propertyName);
+        const attributeName = typeof options.attribute === 'string' ? options.attribute : propertyName;
+        if (name === attributeName) {
+            const converter = options.converter || defaultConverter;
+            const fromAttribute = typeof converter === 'function' ? converter : (converter?.fromAttribute ?? defaultConverter.fromAttribute);
+            const newValue = fromAttribute(value, options.type);
+            if (this[propertyName] !== newValue) {
+                this[key] = newValue;
+            }
+        }
+        attributeChangedCallback.call(this, name, old, value);
+    };
+};

package/dist/internal/drag.d.ts

@@ -0,0 +1,7 @@
+interface DragOptions {
+    onMove: (x: number, y: number) => void;
+    onStop: () => void;
+    initialEvent: PointerEvent;
+}
+export declare function drag(container: HTMLElement, options?: Partial<DragOptions>): void;
+export {};

package/dist/internal/drag.js

@@ -0,0 +1,25 @@
+export function drag(container, options) {
+    function move(pointerEvent) {
+        const dims = container.getBoundingClientRect();
+        const defaultView = container.ownerDocument.defaultView;
+        const offsetX = dims.left + defaultView.pageXOffset;
+        const offsetY = dims.top + defaultView.pageYOffset;
+        const x = pointerEvent.pageX - offsetX;
+        const y = pointerEvent.pageY - offsetY;
+        if (options?.onMove) {
+            options.onMove(x, y);
+        }
+    }
+    function stop() {
+        document.removeEventListener('pointermove', move);
+        document.removeEventListener('pointerup', stop);
+        if (options?.onStop) {
+            options.onStop();
+        }
+    }
+    document.addEventListener('pointermove', move, { passive: true });
+    document.addEventListener('pointerup', stop);
+    if (options?.initialEvent instanceof PointerEvent) {
+        move(options.initialEvent);
+    }
+}

package/dist/internal/event.d.ts

@@ -0,0 +1 @@
+export declare function waitForEvent(el: HTMLElement, eventName: string): Promise<void>;

package/dist/internal/event.js

@@ -0,0 +1,11 @@
+export function waitForEvent(el, eventName) {
+    return new Promise(resolve => {
+        function done(event) {
+            if (event.target === el) {
+                el.removeEventListener(eventName, done);
+                resolve();
+            }
+        }
+        el.addEventListener(eventName, done);
+    });
+}

package/dist/internal/form.d.ts

@@ -0,0 +1,44 @@
+import { type ReactiveController, type ReactiveControllerHost } from 'lit';
+import type { SolidFormControl } from '../internal/solid-element';
+import type SdButton from '../components/button/button';
+export declare const formCollections: WeakMap<HTMLFormElement, Set<SolidFormControl>>;
+export interface FormControlControllerOptions {
+    form: (input: SolidFormControl) => HTMLFormElement | null;
+    name: (input: SolidFormControl) => string;
+    value: (input: SolidFormControl) => unknown;
+    defaultValue: (input: SolidFormControl) => unknown;
+    disabled: (input: SolidFormControl) => boolean;
+    reportValidity: (input: SolidFormControl) => boolean;
+    setValue: (input: SolidFormControl, value: unknown) => void;
+    assumeInteractionOn: string[];
+}
+export declare class FormControlController implements ReactiveController {
+    host: SolidFormControl & ReactiveControllerHost;
+    form?: HTMLFormElement | null;
+    options: FormControlControllerOptions;
+    constructor(host: ReactiveControllerHost & SolidFormControl, options?: Partial<FormControlControllerOptions>);
+    hostConnected(): void;
+    hostDisconnected(): void;
+    hostUpdated(): void;
+    private attachForm;
+    private detachForm;
+    private handleFormData;
+    private handleFormSubmit;
+    private handleFormReset;
+    private handleInteraction;
+    fakeUserInteraction: () => void;
+    private reportFormValidity;
+    private setUserInteracted;
+    private doAction;
+    updateValidityStyle(): void;
+    getForm(): HTMLFormElement | null;
+    renderInvalidMessage(): import("lit").TemplateResult<1>;
+    reset(invoker?: HTMLInputElement | SdButton): void;
+    submit(invoker?: HTMLInputElement | SdButton): void;
+    setValidity(isValid: boolean): void;
+    updateValidity(): void;
+    emitInvalidEvent(originalInvalidEvent?: Event): void;
+}
+export declare const validValidityState: ValidityState;
+export declare const valueMissingValidityState: ValidityState;
+export declare const customErrorValidityState: ValidityState;

package/dist/internal/form.js

@@ -0,0 +1,286 @@
+import { html } from 'lit';
+export const formCollections = new WeakMap();
+const reportValidityOverloads = new WeakMap();
+const userInteractedControls = new WeakMap();
+const interactions = new WeakMap();
+export class FormControlController {
+    constructor(host, options) {
+        this.handleFormData = (event) => {
+            const disabled = this.options.disabled(this.host);
+            const name = this.options.name(this.host);
+            const value = this.options.value(this.host);
+            const isButton = this.host.tagName.toLowerCase() === 'sd-button';
+            if (!disabled && !isButton && typeof name === 'string' && name.length > 0 && typeof value !== 'undefined') {
+                if (Array.isArray(value)) {
+                    value.forEach(val => {
+                        event.formData.append(name, val.toString());
+                    });
+                }
+                else {
+                    event.formData.append(name, value.toString());
+                }
+            }
+        };
+        this.handleFormSubmit = (event) => {
+            const disabled = this.options.disabled(this.host);
+            const reportValidity = this.options.reportValidity;
+            if (this.form && !this.form.noValidate) {
+                formCollections.get(this.form)?.forEach(control => {
+                    this.setUserInteracted(control, true);
+                });
+            }
+            if (this.form && !this.form.noValidate && !disabled && !reportValidity(this.host)) {
+                event.preventDefault();
+                event.stopImmediatePropagation();
+                const invalidElements = this.form?.querySelectorAll('[data-invalid]');
+                const sdRadioGroups = Array.from(invalidElements).filter(element => element.tagName.toLowerCase() === 'sd-radio-group');
+                sdRadioGroups.forEach(radioGroup => {
+                    radioGroup.shadowRoot?.querySelector('input')?.dispatchEvent(new Event('invalid'));
+                });
+                if (invalidElements?.length)
+                    invalidElements[0].focus();
+            }
+        };
+        this.handleFormReset = () => {
+            this.options.setValue(this.host, this.options.defaultValue(this.host));
+            this.setUserInteracted(this.host, false);
+            interactions.set(this.host, []);
+        };
+        this.handleInteraction = (event) => {
+            const emittedEvents = interactions.get(this.host);
+            if (!emittedEvents.includes(event.type)) {
+                emittedEvents.push(event.type);
+            }
+            if (emittedEvents.length === this.options.assumeInteractionOn.length) {
+                this.setUserInteracted(this.host, true);
+            }
+        };
+        this.fakeUserInteraction = () => {
+            this.setUserInteracted(this.host, true);
+        };
+        (this.host = host).addController(this);
+        this.options = {
+            form: input => {
+                if (input.hasAttribute('form') && input.getAttribute('form') !== '') {
+                    const root = input.getRootNode();
+                    const formId = input.getAttribute('form');
+                    if (formId) {
+                        return root.getElementById(formId);
+                    }
+                }
+                return input.closest('form');
+            },
+            name: input => input.name,
+            value: input => input.value,
+            defaultValue: input => input.defaultValue,
+            disabled: input => input.disabled ?? false,
+            reportValidity: input => (typeof input.reportValidity === 'function' ? input.reportValidity() : true),
+            setValue: (input, value) => (input.value = value),
+            assumeInteractionOn: ['sd-input'],
+            ...options
+        };
+    }
+    hostConnected() {
+        const form = this.options.form(this.host);
+        if (form) {
+            this.attachForm(form);
+        }
+        interactions.set(this.host, []);
+        this.options.assumeInteractionOn.forEach(event => {
+            this.host.addEventListener(event, this.handleInteraction);
+        });
+    }
+    hostDisconnected() {
+        this.detachForm();
+        interactions.delete(this.host);
+        this.options.assumeInteractionOn.forEach(event => {
+            this.host.removeEventListener(event, this.handleInteraction);
+        });
+    }
+    hostUpdated() {
+        const form = this.options.form(this.host);
+        if (!form) {
+            this.detachForm();
+        }
+        if (form && this.form !== form) {
+            this.detachForm();
+            this.attachForm(form);
+        }
+        if (this.host.hasUpdated) {
+            this.setValidity(this.host?.validity.valid);
+            this.updateValidityStyle();
+        }
+    }
+    attachForm(form) {
+        if (form) {
+            this.form = form;
+            if (formCollections.has(this.form)) {
+                formCollections.get(this.form).add(this.host);
+            }
+            else {
+                formCollections.set(this.form, new Set([this.host]));
+            }
+            this.form.addEventListener('formdata', this.handleFormData);
+            this.form.addEventListener('submit', this.handleFormSubmit);
+            this.form.addEventListener('reset', this.handleFormReset);
+            if (!reportValidityOverloads.has(this.form)) {
+                reportValidityOverloads.set(this.form, this.form.reportValidity);
+                this.form.reportValidity = () => this.reportFormValidity();
+            }
+        }
+        else {
+            this.form = undefined;
+        }
+    }
+    detachForm() {
+        if (this.form) {
+            formCollections.get(this.form)?.delete(this.host);
+            this.form.removeEventListener('formdata', this.handleFormData);
+            this.form.removeEventListener('submit', this.handleFormSubmit);
+            this.form.removeEventListener('reset', this.handleFormReset);
+            if (reportValidityOverloads.has(this.form)) {
+                this.form.reportValidity = reportValidityOverloads.get(this.form);
+                reportValidityOverloads.delete(this.form);
+            }
+        }
+        this.form = undefined;
+    }
+    reportFormValidity() {
+        if (this.form && !this.form.noValidate) {
+            const elements = this.form.querySelectorAll('*');
+            for (const element of elements) {
+                if (typeof element.reportValidity === 'function') {
+                    if (!element.reportValidity()) {
+                        return false;
+                    }
+                }
+            }
+        }
+        return true;
+    }
+    setUserInteracted(el, hasInteracted) {
+        userInteractedControls.set(el, hasInteracted);
+        el.requestUpdate();
+    }
+    doAction(type, invoker) {
+        if (this.form) {
+            const button = document.createElement('button');
+            button.type = type;
+            button.style.position = 'absolute';
+            button.style.width = '0';
+            button.style.height = '0';
+            button.style.clipPath = 'inset(50%)';
+            button.style.overflow = 'hidden';
+            button.style.whiteSpace = 'nowrap';
+            if (invoker) {
+                button.name = invoker.name;
+                button.value = invoker.value;
+                ['formaction', 'formenctype', 'formmethod', 'formnovalidate', 'formtarget'].forEach(attr => {
+                    if (invoker.hasAttribute(attr)) {
+                        button.setAttribute(attr, invoker.getAttribute(attr));
+                    }
+                });
+            }
+            this.form.append(button);
+            button.click();
+            button.remove();
+        }
+    }
+    updateValidityStyle() {
+        if (this.host.hasAttribute('data-user-valid') && this.host.checkValidity()) {
+            if (this.host.showValidStyle !== undefined)
+                this.host.showValidStyle = true;
+            this.host.showInvalidStyle = false;
+        }
+        else if (this.host.hasAttribute('data-user-invalid') && !this.host.checkValidity()) {
+            if (this.host.showValidStyle !== undefined)
+                this.host.showValidStyle = false;
+            this.host.showInvalidStyle = true;
+        }
+        else {
+            if (this.host.showValidStyle !== undefined)
+                this.host.showValidStyle = false;
+            this.host.showInvalidStyle = false;
+        }
+    }
+    getForm() {
+        return this.form ?? null;
+    }
+    renderInvalidMessage() {
+        return html `<div
+      id="invalid-message"
+      class="text-error text-sm mt-2 text-left"
+      part="invalid-message"
+      aria-live="polite"
+      ?hidden=${!this.host.showInvalidStyle}
+    ></div>`;
+    }
+    reset(invoker) {
+        this.doAction('reset', invoker);
+    }
+    submit(invoker) {
+        this.doAction('submit', invoker);
+    }
+    setValidity(isValid) {
+        const host = this.host;
+        const hasInteracted = Boolean(userInteractedControls.get(host));
+        const required = Boolean(host.required);
+        if (this.form?.noValidate) {
+            host.removeAttribute('data-required');
+            host.removeAttribute('data-optional');
+            host.removeAttribute('data-invalid');
+            host.removeAttribute('data-valid');
+            host.removeAttribute('data-user-invalid');
+            host.removeAttribute('data-user-valid');
+            host.removeAttribute('aria-invalid');
+        }
+        else {
+            host.toggleAttribute('data-required', required);
+            host.toggleAttribute('data-optional', !required);
+            host.toggleAttribute('data-invalid', !isValid);
+            host.toggleAttribute('data-valid', isValid);
+            host.toggleAttribute('data-user-invalid', !isValid && hasInteracted);
+            host.toggleAttribute('data-user-valid', isValid && hasInteracted);
+            host.setAttribute('aria-invalid', (!isValid).toString());
+        }
+    }
+    updateValidity() {
+        const host = this.host;
+        this.setValidity(host?.validity.valid);
+    }
+    emitInvalidEvent(originalInvalidEvent) {
+        originalInvalidEvent?.preventDefault();
+        const sdInvalidEvent = new CustomEvent('sd-invalid', {
+            bubbles: false,
+            composed: false,
+            cancelable: true,
+            detail: {}
+        });
+        if (!originalInvalidEvent) {
+            sdInvalidEvent.preventDefault();
+        }
+    }
+}
+export const validValidityState = Object.freeze({
+    badInput: false,
+    customError: false,
+    patternMismatch: false,
+    rangeOverflow: false,
+    rangeUnderflow: false,
+    stepMismatch: false,
+    tooLong: false,
+    tooShort: false,
+    typeMismatch: false,
+    valid: true,
+    valueMissing: false
+});
+export const valueMissingValidityState = Object.freeze({
+    ...validValidityState,
+    valid: false,
+    valueMissing: true
+});
+export const customErrorValidityState = Object.freeze({
+    ...validValidityState,
+    valid: false,
+    customError: true
+});

package/dist/internal/longpress.d.ts

@@ -0,0 +1,23 @@
+import { AsyncDirective, type DirectiveParameters, type Part } from 'lit/async-directive.js';
+import { type ElementPart, noChange, nothing } from 'lit';
+interface Callbacks {
+    start: () => void;
+    end: () => void;
+}
+declare class LongPressDirective extends AsyncDirective {
+    host: HTMLButtonElement;
+    observer: MutationObserver;
+    callbacks: Callbacks;
+    interval: NodeJS.Timeout;
+    timeout: NodeJS.Timeout;
+    constructor(part: Part);
+    render(_callback: Callbacks): typeof nothing;
+    update(part: ElementPart, [callbacks]: DirectiveParameters<this>): typeof noChange;
+    protected disconnected(): void;
+    private handlePointerDown;
+    private spinOnLongPressCallback;
+    private handlePointerUp;
+    private stopSpinningAndCleanUp;
+}
+export declare const longPress: (_callback: Callbacks) => import("lit/async-directive").DirectiveResult<typeof LongPressDirective>;
+export type { LongPressDirective };

package/dist/internal/longpress.js

@@ -0,0 +1,68 @@
+import { AsyncDirective, directive, PartType } from 'lit/async-directive.js';
+import { noChange, nothing } from 'lit';
+class LongPressDirective extends AsyncDirective {
+    constructor(part) {
+        super(part);
+        this.handlePointerDown = (event) => {
+            if (event.button !== 0 || this.host.disabled) {
+                return;
+            }
+            this.spinOnLongPressCallback(event);
+        };
+        this.handlePointerUp = (pointerUp) => {
+            pointerUp?.preventDefault();
+            pointerUp?.stopPropagation();
+            if (this.timeout) {
+                this.callbacks.start();
+            }
+            this.stopSpinningAndCleanUp();
+            this.callbacks.end();
+            document.removeEventListener('pointerup', this.handlePointerUp);
+        };
+        if (part.type !== PartType.ELEMENT || !(part.element instanceof HTMLButtonElement)) {
+            throw new Error('The `longPress` directive must be used on an HTMLButtonElement.');
+        }
+    }
+    render(_callback) {
+        return nothing;
+    }
+    update(part, [callbacks]) {
+        if (this.callbacks === undefined && this.host === undefined) {
+            this.host = part.element;
+            this.callbacks = { ...callbacks };
+            this.host.addEventListener('pointerdown', this.handlePointerDown);
+        }
+        return noChange;
+    }
+    disconnected() {
+        this.stopSpinningAndCleanUp();
+        this.host.removeEventListener('pointerdown', this.handlePointerDown);
+        document.removeEventListener('pointerup', this.handlePointerUp);
+    }
+    spinOnLongPressCallback(event) {
+        event.preventDefault();
+        event.stopPropagation();
+        this.timeout = setTimeout(() => {
+            this.timeout = undefined;
+            this.interval = setInterval(() => {
+                this.callbacks.start();
+            }, 50);
+        }, 500);
+        document.addEventListener('pointerup', this.handlePointerUp);
+        this.observer?.disconnect();
+        this.observer = new MutationObserver(mutations => {
+            mutations.forEach(mutation => {
+                if (mutation.attributeName === 'disabled') {
+                    this.stopSpinningAndCleanUp();
+                }
+            });
+        });
+        this.observer.observe(this.host, { attributes: true });
+    }
+    stopSpinningAndCleanUp() {
+        clearInterval(this.interval);
+        clearTimeout(this.timeout);
+        this.observer?.disconnect();
+    }
+}
+export const longPress = directive(LongPressDirective);

package/dist/internal/math.d.ts

@@ -0,0 +1 @@
+export declare function clamp(value: number, min: number, max: number): number;

package/dist/internal/math.js

@@ -0,0 +1,10 @@
+export function clamp(value, min, max) {
+    const noNegativeZero = (n) => (Object.is(n, -0) ? 0 : n);
+    if (value < min) {
+        return noNegativeZero(min);
+    }
+    if (value > max) {
+        return noNegativeZero(max);
+    }
+    return noNegativeZero(value);
+}

package/dist/internal/modal.d.ts

@@ -0,0 +1,12 @@
+export default class Modal {
+    element: HTMLElement;
+    tabDirection: 'forward' | 'backward';
+    constructor(element: HTMLElement);
+    activate(): void;
+    deactivate(): void;
+    isActive(): boolean;
+    checkFocus(): void;
+    handleFocusIn(): void;
+    handleKeyDown(event: KeyboardEvent): void;
+    handleKeyUp(): void;
+}

package/dist/internal/modal.js

@@ -0,0 +1,49 @@
+import { getTabbableBoundary } from './tabbable';
+let activeModals = [];
+export default class Modal {
+    constructor(element) {
+        this.tabDirection = 'forward';
+        this.element = element;
+        this.handleFocusIn = this.handleFocusIn.bind(this);
+        this.handleKeyDown = this.handleKeyDown.bind(this);
+        this.handleKeyUp = this.handleKeyUp.bind(this);
+    }
+    activate() {
+        activeModals.push(this.element);
+        document.addEventListener('focusin', this.handleFocusIn);
+        document.addEventListener('keydown', this.handleKeyDown);
+        document.addEventListener('keyup', this.handleKeyUp);
+    }
+    deactivate() {
+        activeModals = activeModals.filter(modal => modal !== this.element);
+        document.removeEventListener('focusin', this.handleFocusIn);
+        document.removeEventListener('keydown', this.handleKeyDown);
+        document.removeEventListener('keyup', this.handleKeyUp);
+    }
+    isActive() {
+        return activeModals[activeModals.length - 1] === this.element;
+    }
+    checkFocus() {
+        if (this.isActive()) {
+            if (!this.element.matches(':focus-within')) {
+                const { start, end } = getTabbableBoundary(this.element);
+                const target = this.tabDirection === 'forward' ? start : end;
+                if (typeof target?.focus === 'function') {
+                    target.focus({ preventScroll: true });
+                }
+            }
+        }
+    }
+    handleFocusIn() {
+        this.checkFocus();
+    }
+    handleKeyDown(event) {
+        if (event.key === 'Tab' && event.shiftKey) {
+            this.tabDirection = 'backward';
+            requestAnimationFrame(() => this.checkFocus());
+        }
+    }
+    handleKeyUp() {
+        this.tabDirection = 'forward';
+    }
+}

package/dist/internal/offset.d.ts

@@ -0,0 +1,4 @@
+export declare function getOffset(element: HTMLElement, parent: HTMLElement): {
+    top: number;
+    left: number;
+};

package/dist/internal/offset.js

@@ -0,0 +1,6 @@
+export function getOffset(element, parent) {
+    return {
+        top: Math.round(element.getBoundingClientRect().top - parent.getBoundingClientRect().top),
+        left: Math.round(element.getBoundingClientRect().left - parent.getBoundingClientRect().left)
+    };
+}